← The UX Guide for Luxury Ecommerce Vol. 1

jewelry · not disclosed ·

Garrard

The Garrard 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 14.8 percent of the page, typeset in HCo Gotham, freight-display-pro.

The pages

desktop1440 x 900

Garrard homepage on desktop, not disclosed luxury jewelry storefront captured at 1440 x 900 — Homepage

Garrard collection: diamond jewellery on desktop, not disclosed luxury jewelry storefront captured at 1440 x 900 — Collection: Diamond Jewellery

Garrard product page on desktop, not disclosed luxury jewelry storefront captured at 1440 x 900 — Product page

mobile390 x 844

Garrard homepage on mobile, not disclosed luxury jewelry storefront captured at 390 x 844 — Homepage

Garrard collection: diamond jewellery on mobile, not disclosed luxury jewelry storefront captured at 390 x 844 — Collection: Diamond Jewellery

Garrard product page on mobile, not disclosed luxury jewelry storefront captured at 390 x 844 — Product page

Palette

Surfaces, by share of painted area

92.4%

92.4% #ffffff page

6.8% #f6f6f8 panels and cards

0.8% #0133a1 secondary surface

Ink, by share of text set in it

99.4%

99.4% #222222 body and headings

0.4% #ffffff reversed on dark

0.2% #433625 emphasis

Imagery, by share of the page it covers

14.8% photograph, the rest is surface

Typography

sans-serif · everything

HCo Gotham

sans-serif · accent

freight-display-pro

of all text on the page

50% serif50% sans-serif