Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

leather · Shopify · Paris, 1717

Fauré Le Page

Fauré Le Page worked as a Paris gunmaker from 1717, arming French royalty and duelists, and was later revived as a leather goods house built around its scale-patterned coated canvas.

The pages

desktop1440 x 900

Fauré Le Page homepage on desktop, Shopify luxury leather storefront captured at 1440 x 900
Homepage
Fauré Le Page collection: all bags on desktop, Shopify luxury leather storefront captured at 1440 x 900
Collection: All Bags
Fauré Le Page product page on desktop, Shopify luxury leather storefront captured at 1440 x 900
Product page

mobile390 x 844

Fauré Le Page homepage on mobile, Shopify luxury leather storefront captured at 390 x 844
Homepage
Fauré Le Page collection: all bags on mobile, Shopify luxury leather storefront captured at 390 x 844
Collection: All Bags
Fauré Le Page product page on mobile, Shopify luxury leather storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

76.9%
9.2%
76.9% #ffffff page
9.2% #fbba00 call to action
7.6% #f5f5f5 panels and grid cells
4.8% #142449 footer navy
1.6% #000000 announcement bar

Ink, by share of text set in it

78.2%
12.3%
78.2% #000000 body and headings
12.3% #ffffff reversed on dark
6.6% #696969 captions
2.9% #757575 secondary

Imagery, by share of the page it covers

30.5% photograph, the rest is surface

Typography

sans-serif · everything

EuclidFlex

sans-serif · accent

BeaufortforLOL

of all text on the page

100% sans-serif

The icon set

Ecommerce components, rebuilt to spec

Add to cart
Type
EuclidFlex 12px / 500 / 1px tracking / uppercase
Color
#FBBA00 on #000000
Shape
2px radius, 1px border, 12px 20px padding, 40px tall
Width
100% of its column
Add to cart Double Battle 35 Bag 5 color(s) $1,890 USD
Add to cart Daily Battle 35 Zip Bag 7 color(s) $1,720 USD
Add to cart Daily Battle 35 Bag 2 color(s) $1,770 USD | WEB EXCLUSIVE

Hover a card to raise the add to cart bar.

Product card
Image
1:1 crop on #F5F5F5, no padding
Title
12px / 600 / uppercase / .4px tracking, black
Colors
12px / 400, #757575, directly beneath
Price
12px / 400, black, currency spelled out
Flag
Pipe then WEB EXCLUSIVE, uppercase, grey
Hover
#FBBA00 bar across the image foot, black uppercase
Rail
25px gaps, Swiper carousel with arrows and dots

Size and color

16 22
Size selector
Control
links to sibling products, 2 values
Label
Size :
Type
EuclidFlex 12px / 400
Cell
13 by 32px, 30px apart
Chosen
32px ring, 1px #fbba00
On load
one is already chosen
Color selector
Control
radio list with coloured labels, 3 swatches
Swatch
circle, 24 by 24px, 16px apart
Chosen
32px ring, 1px #fbba00