Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

jewelry · not disclosed ·

Boodles

The Boodles 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 39 percent of the page, typeset in Cormorant Garamond, Futura PT.

The pages

desktop1440 x 900

Boodles homepage on desktop, not disclosed luxury jewelry storefront captured at 1440 x 900
Homepage
Boodles collection: all products on desktop, not disclosed luxury jewelry storefront captured at 1440 x 900
Collection: All Products
Boodles product page on desktop, not disclosed luxury jewelry storefront captured at 1440 x 900
Product page

mobile390 x 844

Boodles homepage on mobile, not disclosed luxury jewelry storefront captured at 390 x 844
Homepage
Boodles collection: all products on mobile, not disclosed luxury jewelry storefront captured at 390 x 844
Collection: All Products
Boodles product page on mobile, not disclosed luxury jewelry storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

69.9%
17%
69.9% #ffffff page
17% #fdeff3 panels and cards
5% #f9e4ea secondary surface
3.6% #ececec panels and cards
1.8% #000000 dark bands
1.3% #ded5c9 accent

Ink, by share of text set in it

56.9%
23.2%
14.9%
56.9% #141414 body and headings
23.2% #000000 emphasis
14.9% #ffffff reversed on dark
4% #707070 secondary
0.5% #1f2937 emphasis
0.5% #7f7f7f secondary

Imagery, by share of the page it covers

39% photograph, the rest is surface

Typography

serif · everything

Cormorant Garamond

sans-serif · accent

Futura PT

of all text on the page

85% serif15% sans-serif

Ecommerce components, rebuilt to spec

Product card
Grid
4 across, 319px wide
Image
1 : 1 crop, contain