Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

fashion · Shopify ·

Patou

The Patou 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 13.1 percent of the page, typeset in brandon-grotesque, Belwe.

The pages

desktop1440 x 900

Patou homepage on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Homepage
Patou collection: a patou summer in white on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Collection: A Patou summer in white
Patou product page on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Product page

mobile390 x 844

Patou homepage on mobile, Shopify luxury fashion storefront captured at 390 x 844
Homepage
Patou collection: a patou summer in white on mobile, Shopify luxury fashion storefront captured at 390 x 844
Collection: A Patou summer in white
Patou product page on mobile, Shopify luxury fashion storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

89.8%
8.2%
89.8% #ffffff page
8.2% #051c2c dark bands
2% #000000 dark bands

Ink, by share of text set in it

44%
25.4%
23.4%
44% #051c2c body and headings
25.4% #000000 emphasis
23.4% #6f7376 secondary
7.1% #7e8487 secondary

Imagery, by share of the page it covers

13.1% photograph, the rest is surface

Typography

sans-serif · everything

brandon-grotesque

sans-serif · accent

Belwe

of all text on the page

74% sans-serif26% serif

Ecommerce components, rebuilt to spec

Add to cart
Type
brandon-grotesque 12px / 400 / 0.8px tracking / uppercase
Color
rgb(255, 255, 255) on rgb(5, 28, 44)
Shape
0px radius, 0px padding, 40px tall
Width
323px as rendered
Les Essentiels
Les Essentiels
Les Essentiels
Product card
Grid
4 across, 243px wide
Image
0.67 : 1 crop, fill
Line 1
12px / 400, rgb(0, 0, 0)