Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

beauty · not disclosed ·

Amouage

The Amouage 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 12.8 percent of the page, typeset in Gotham-Book, Gotham-Light.

The pages

desktop1440 x 900

Amouage homepage on desktop, not disclosed luxury beauty storefront captured at 1440 x 900
Homepage
Amouage collection: 100ml collection on desktop, not disclosed luxury beauty storefront captured at 1440 x 900
Collection: 100ml Collection
Amouage product page on desktop, not disclosed luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Amouage homepage on mobile, not disclosed luxury beauty storefront captured at 390 x 844
Homepage
Amouage collection: 100ml collection on mobile, not disclosed luxury beauty storefront captured at 390 x 844
Collection: 100ml Collection
Amouage product page on mobile, not disclosed luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

48.1%
29.4%
16.1%
48.1% #ffffff page
29.4% #000000 dark bands
16.1% #eee5da secondary surface
3.5% #f7f4ef panels and cards
2.9% #f3e6dd secondary surface

Ink, by share of text set in it

40.5%
36.8%
15.2%
40.5% #ffffff body and headings
36.8% #000000 emphasis
15.2% #f8f5f0 reversed on dark
7.5% #121212 emphasis

Imagery, by share of the page it covers

12.8% photograph, the rest is surface

Typography

sans-serif · everything

Gotham-Book

sans-serif · accent

Gotham-Light

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Guidance 100ml
Guidance 100ml
Guidance 100ml
Product card
Grid
4 across, 188px wide
Image
1.42 : 1 crop, cover
Line 1
14px / 500 / uppercase, rgb(18, 18, 18)
Line 2
12px / 400 / lowercase, rgb(18, 18, 18)