Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

jewelry · Shopify ·

Anita Ko

Los Angeles fine jeweler known for diamond ear cuffs, safety pin earrings and a palm leaf motif built from baguette cuts, in pieces meant for daily wear as much as red carpets.

The pages

desktop1440 x 900

Anita Ko homepage on desktop, Shopify luxury jewelry storefront captured at 1440 x 900
Homepage
Anita Ko collection: earrings on desktop, Shopify luxury jewelry storefront captured at 1440 x 900
Collection: Earrings
Anita Ko product page on desktop, Shopify luxury jewelry storefront captured at 1440 x 900
Product page

mobile390 x 844

Anita Ko homepage on mobile, Shopify luxury jewelry storefront captured at 390 x 844
Homepage
Anita Ko collection: earrings on mobile, Shopify luxury jewelry storefront captured at 390 x 844
Collection: Earrings
Anita Ko product page on mobile, Shopify luxury jewelry storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

87.1%
9.2%
87.1% #ffffff page
9.2% #fafafa panels and cards
2.6% #b43f69 accent
0.8% #0f0f0f dark bands
0.3% #111111 dark bands

Ink, by share of text set in it

86.5%
10.1%
86.5% #000000 body and headings
10.1% #1c1d1d emphasis
2.7% #ffffff reversed on dark
0.6% #cccccc secondary

Imagery, by share of the page it covers

11.8% photograph, the rest is surface

Typography

sans-serif · everything

Helvetica

serif · accent

Times New Roman

of all text on the page

100% sans-serif

The icon set

cart
search
account
menu
close
wishlist

Ecommerce components, rebuilt to spec

Add to cart
Type
Helvetica 13px / 700 / 3.9px tracking / uppercase
Color
rgb(255, 255, 255) on rgb(17, 17, 17)
Shape
0px radius, 13px 20px padding, 46px tall
Width
617px as rendered
SMALL PAVE TWIST HOOPS $6,200.00
EMERALD COIL RING $6,200.00
WIDE DIAMOND BAND WITH EMERALD CUT BLUE SAPPHIRE CENTER $6,200.00
Product card
Grid
4 across, 320px wide
Line 1
10px / 700 / uppercase, rgb(0, 0, 0)
Line 2
11.9px / 700, rgb(28, 29, 29)