Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

footwear · Shopify ·

Aubercy

Family shoemaker on rue Vivienne in Paris, founded in 1935 and now run by the third generation of the Aubercy family, making bespoke and ready to wear men's shoes alongside repairs.

The pages

desktop1440 x 900

Aubercy homepage on desktop, Shopify luxury footwear storefront captured at 1440 x 900
Homepage
Aubercy collection: ligne mesure on desktop, Shopify luxury footwear storefront captured at 1440 x 900
Collection: Ligne Mesure
Aubercy product page on desktop, Shopify luxury footwear storefront captured at 1440 x 900
Product page

mobile390 x 844

Aubercy homepage on mobile, Shopify luxury footwear storefront captured at 390 x 844
Homepage
Aubercy collection: ligne mesure on mobile, Shopify luxury footwear storefront captured at 390 x 844
Collection: Ligne Mesure
Aubercy product page on mobile, Shopify luxury footwear storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

84.6%
15.3%
84.6% #ffffff page
15.3% #151515 dark bands

Ink, by share of text set in it

73.9%
25.1%
73.9% #151515 body and headings
25.1% #ffffff reversed on dark
1% #ee3b45 emphasis

Imagery, by share of the page it covers

41.1% photograph, the rest is surface

Typography

serif · everything

Garamond

of all text on the page

100% serif

The icon set

cart
search
account

Ecommerce components, rebuilt to spec

Aubercy add to cart button photographed on its product page
photographed on aubercy.com
Add to cart
Type
Garamond 14px / 700 / 0.28px tracking / uppercase
Color
rgb(21, 21, 21) on #fefefe, painted over #ffffff
Shape
0px radius, 383 by 48px
Label
center, rebuild matched the photograph at 1
Arsène en cuir beige (Archives) Découvrir
La Lawrence- La bottine à boutons, le soulier de dandy(Archi Découvrir
La Lawrence-La bottine à boutons, le soulier de dandy (Archi Découvrir
Product card
Grid
3 across, 360px wide
Image
0.9 : 1 crop, cover
Line 1
16px / 700 / uppercase, rgb(255, 255, 255)
Line 2
15px / 400, rgb(255, 255, 255)

Size and color

Pointure
Size selector
Control
native select, 16 values
Label
Pointure
Type
12px / 400
Cell
0 by 48px, 0px apart
Chosen
the value shown in the closed select
On load
one is already chosen