Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

jewelry · Shopify ·

Bayco

The Bayco 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 17.9 percent of the page, typeset in Proza Libre, gothambook.

The pages

desktop1440 x 900

Bayco homepage on desktop, Shopify luxury jewelry storefront captured at 1440 x 900
Homepage
Bayco collection: diamond collection on desktop, Shopify luxury jewelry storefront captured at 1440 x 900
Collection: Diamond Collection
Bayco product page on desktop, Shopify luxury jewelry storefront captured at 1440 x 900
Product page

mobile390 x 844

Bayco homepage on mobile, Shopify luxury jewelry storefront captured at 390 x 844
Homepage
Bayco collection: diamond collection on mobile, Shopify luxury jewelry storefront captured at 390 x 844
Collection: Diamond Collection
Bayco product page on mobile, Shopify luxury jewelry storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

73.3%
22.3%
73.3% #ffffff page
22.3% #333333 secondary surface
3.1% #fff5dd panels and cards
0.9% #000000 dark bands
0.3% #edecec panels and cards

Ink, by share of text set in it

70.6%
27.6%
70.6% #000000 body and headings
27.6% #ffffff reversed on dark
1.4% #666666 emphasis
0.4% #999999 secondary

Imagery, by share of the page it covers

17.9% photograph, the rest is surface

Typography

sans-serif · everything

Proza Libre

sans-serif · accent

gothambook

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Purple Sapphire & Diamond Ring AMG4096R $12,000.00
Purple Sapphire & Diamond Ring AMG4096R $12,000.00
Purple Sapphire & Diamond Ring AMG4096R $12,000.00
Product card
Grid
8 across, 425px wide
Image
1 : 1 crop, fill
Line 1
14px / 400, rgb(0, 0, 0)
Line 2
14px / 400, rgb(0, 0, 0)
Line 3
14px / 600, rgb(0, 0, 0)