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

Anita Ko add to cart button photographed on its product page
photographed on anitako.com
Add to cart
Type
Helvetica 13px / 700 / 3.9px tracking / uppercase
Color
rgb(255, 255, 255) on #111111, painted over #ffffff
Shape
0px radius, 617 by 46px
Label
center, rebuild matched the photograph at 0.964
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)

Size and color

Color selector
Control
radio list with text labels, 2 swatches
Swatch
wide rectangle, 115 by 48px, 0px apart
Chosen
no computed difference between chosen and unchosen