Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

jewelry · Shopify ·

Astley Clarke

Fine jewelry brand started in London in 2006 by Bec Astley Clarke, which began as an online retailer of other designers before moving to pieces designed in its own studio.

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

The icon set

cart
search
account
close
wishlist

Ecommerce components, rebuilt to spec

Astley Clarke add to cart button photographed on its product page
photographed on astleyclarke.com
Add to cart
Type
europa 12px / 400 / 0.48px tracking / uppercase
Color
rgb(255, 255, 255) on #0a1e45, painted over #f9f6f1
Shape
0px radius, 456 by 39px
Label
center, rebuild matched the photograph at 0.979
Gold Flare White Topaz Cushion Cut Signet Ring Gold Biography Midi Locket Neckl $315.00 $0.00
Gold Initial 'R' Biography Charm Gold Biography Midi Locket Neckl $315.00 $0.00
Gold Initial 'P' Biography Charm 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)

Size and color

UK J / US 5 UK L / US 6 UK N / US 7 UK P / US 8
Size selector
Control
span cells, 4 values
Label
Size
Type
europa 12px / 400
Cell
88 by 40px, 7px apart
Chosen
border 1px solid rgb(80, 87, 103) (unselected 1px solid rgb(229, 225, 221))
On load
nothing is chosen

The email sign up popup

Astley Clarke email sign up popup, centred centre, offering 10% off
Email capture
Placement
centred centre, 370 x 400
Asks for
email, first name
Offers
10% off
Shown on
both
Dismissible
no close control found