Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

eyewear · not disclosed ·

Persol

The Persol 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.4 percent of the page, typeset in CABOTO, arial.

The pages

desktop1440 x 900

Persol homepage on desktop, not disclosed luxury eyewear storefront captured at 1440 x 900
Homepage
Persol collection: persol prescription glasses on desktop, not disclosed luxury eyewear storefront captured at 1440 x 900
Collection: Persol Prescription Glasses
Persol product page on desktop, not disclosed luxury eyewear storefront captured at 1440 x 900
Product page

mobile390 x 844

Persol homepage on mobile, not disclosed luxury eyewear storefront captured at 390 x 844
Homepage
Persol collection: persol prescription glasses on mobile, not disclosed luxury eyewear storefront captured at 390 x 844
Collection: Persol Prescription Glasses
Persol product page on mobile, not disclosed luxury eyewear storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

51.4%
18.6%
14.7%
8.2%
51.4% #ffffff page
18.6% #fdfdfd panels and cards
14.7% #000000 dark bands
8.2% #f5f5f5 panels and cards
6.6% #242833 secondary surface
0.6% #e1e1e1 secondary surface

Ink, by share of text set in it

39.3%
30.7%
13.7%
39.3% #444444 body and headings
30.7% #222223 emphasis
13.7% #121212 emphasis
6.2% #fdfdfd reversed on dark
6.1% #868686 secondary
4% #000000 emphasis

Imagery, by share of the page it covers

17.4% photograph, the rest is surface

Typography

sans-serif · everything

CABOTO

sans-serif · accent

arial

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
CABOTO 14px / 400 / 2px tracking / uppercase
Color
rgb(253, 253, 253) on rgb(34, 34, 35)
Shape
0px radius, 12px 24px padding, 40px tall
Width
412px as rendered
Product card
Grid
12 across, 306px wide
Image
1.47 : 1 crop, contain