Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

eyewear · not disclosed ·

Persol

Turin eyewear maker founded in 1917, which began with protective glasses for drivers and pilots. Its Meflecto flexible stems and the silver arrow on the temples remain the house signatures.

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

The icon set

cart
search
account
menu
close
wishlist

Ecommerce components, rebuilt to spec

Persol add to cart button photographed on its product page
photographed on persol.com
Add to cart
Type
CABOTO 14px / 400 / 2px tracking / uppercase
Color
rgb(253, 253, 253) on #222222, painted over #ffffff
Shape
0px radius, 412 by 40px
Label
center, rebuild matched the photograph at 0.979
Product card
Grid
12 across, 306px wide
Image
1.47 : 1 crop, contain

Size and color

Color selector
Control
links to sibling products, 2 swatches
Swatch
square, 76 by 76px, 8px apart
Chosen
1px underline, #222223