Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

jewelry · Shopify ·

Astley Clarke

The Astley Clarke storefront measured page by page: homepage, collection and product at desktop and mobile, every color weighted by the share of the page it paints, with photography covering 26.1 percent of the page, typeset in europa, Canela Light.

The pages

desktop1440 x 900

Astley Clarke homepage on desktop, Shopify luxury jewelry storefront captured at 1440 x 900
Homepage
Astley Clarke collection: all jewellery on desktop, Shopify luxury jewelry storefront captured at 1440 x 900
Collection: All Jewellery
Astley Clarke product page on desktop, Shopify luxury jewelry storefront captured at 1440 x 900
Product page

mobile390 x 844

Astley Clarke homepage on mobile, Shopify luxury jewelry storefront captured at 390 x 844
Homepage
Astley Clarke collection: all jewellery on mobile, Shopify luxury jewelry storefront captured at 390 x 844
Collection: All Jewellery
Astley Clarke product page on mobile, Shopify luxury jewelry storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

60.2%
21.4%
12.6%
60.2% #f9f5f1 page
21.4% #ffffff panels and cards
12.6% #0b1e46 dark bands
5.8% #eee5dc secondary surface

Ink, by share of text set in it

65.8%
19.1%
65.8% #000000 body and headings
19.1% #505767 emphasis
7.8% #0b1e46 emphasis
6.6% #ffffff reversed on dark
0.7% #0a1e46 emphasis

Imagery, by share of the page it covers

26.1% photograph, the rest is surface

Typography

sans-serif · everything

europa

sans-serif · accent

Canela Light

of all text on the page

87% sans-serif13% serif

Ecommerce components, rebuilt to spec

Add to cart
Type
europa 12px / 400 / 0.48px tracking / uppercase
Color
rgb(255, 255, 255) on rgb(11, 30, 70)
Shape
0px radius, 12px 32px padding, 39px tall
Width
456px as rendered
Engravable Gold Biography Midi Locket Neckl $315.00 $0.00
Engravable Gold Biography Midi Locket Neckl $315.00 $0.00
Engravable Gold Biography Midi Locket Neckl $315.00 $0.00
Product card
Grid
4 across, 324px wide
Image
0.8 : 1 crop, fill
Line 1
16px / 400, rgb(0, 0, 0)
Line 2
13px / 300 / uppercase, rgb(0, 0, 0)
Line 3
13px / 400, rgb(0, 0, 0)
Line 4
13px / 400, rgb(0, 0, 0)