Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

eyewear · not disclosed ·

Oliver Peoples

The Oliver Peoples 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 30.4 percent of the page, typeset in BerlingLTStd, FuturaStd.

The pages

desktop1440 x 900

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

mobile390 x 844

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

Palette

Surfaces, by share of painted area

58.9%
19.6%
12.7%
58.9% #ffffff page
19.6% #000000 dark bands
12.7% #f1f3f8 panels and cards
7.7% #f8f8fb panels and cards
0.8% #e1e1e1 secondary surface
0.2% #202125 dark bands

Ink, by share of text set in it

50.1%
16.4%
14.2%
13.3%
50.1% #202125 body and headings
16.4% #3b3d43 emphasis
14.2% #000000 emphasis
13.3% #ffffff reversed on dark
4.9% #69697a secondary
1% #121212 emphasis

Imagery, by share of the page it covers

30.4% photograph, the rest is surface

Typography

sans-serif · everything

BerlingLTStd

sans-serif · accent

FuturaStd

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
FuturaStd 14px / 400 / 2px tracking / uppercase
Color
rgb(255, 255, 255) on rgb(32, 33, 37)
Shape
0px radius, 12px 24px padding, 40px tall
Width
384px as rendered
Product card
Grid
44 across, 416px wide
Image
2 : 1 crop, fill