Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

beauty · Shopify ·

Serge Lutens

French perfume house built around the work of Serge Lutens and backed by Shiseido, with a boutique in the Palais Royal in Paris. Its dense wood and spice compositions anchor niche perfumery.

The pages

desktop1440 x 900

Serge Lutens homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
Serge Lutens collection: all best-sellers on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: ALL BEST-SELLERS
Serge Lutens product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Serge Lutens homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
Serge Lutens collection: all best-sellers on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: ALL BEST-SELLERS
Serge Lutens product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

62.7%
37.3%
62.7% #ffffff page
37.3% #000000 dark bands

Ink, by share of text set in it

49.4%
48%
49.4% #000000 body and headings
48% #ffffff reversed on dark
1.7% #1a1a1a emphasis
0.4% #333232 emphasis
0.4% #5f5f5f emphasis

Imagery, by share of the page it covers

25.8% photograph, the rest is surface

Typography

sans-serif · everything

Work Sans

sans-serif · accent

Oswald

of all text on the page

100% sans-serif

The icon set

cart
search
account
close

Ecommerce components, rebuilt to spec

Refill Féminité du Bois 8 reviews Mascara Mascara - Deep black brown price:
GWP - Miniature La Nuit Tombée 5ml 8 reviews Mascara Mascara - Deep black brown price:
Fleurs d'oranger 8 reviews Mascara Mascara - Deep black brown price:
Product card
Grid
3 across, 427px wide
Image
1 : 1 crop, cover
Line 1
14px / 300 / uppercase, rgb(0, 0, 0)
Line 2
16px / 400, rgb(0, 0, 0)
Line 3
24px / 300 / uppercase, rgb(0, 0, 0)
Line 4
14px / 300 / uppercase, rgb(0, 0, 0)
Line 5
16px / 300, rgb(0, 0, 0)