Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

fashion · not disclosed ·

Ami Paris

The Ami Paris 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 40 percent of the page, typeset in miera, ui-sans-serif.

The pages

desktop1440 x 900

Ami Paris homepage on desktop, not disclosed luxury fashion storefront captured at 1440 x 900
Homepage
Ami Paris collection: collection homme on desktop, not disclosed luxury fashion storefront captured at 1440 x 900
Collection: Collection Homme
Ami Paris product page on desktop, not disclosed luxury fashion storefront captured at 1440 x 900
Product page

mobile390 x 844

Ami Paris homepage on mobile, not disclosed luxury fashion storefront captured at 390 x 844
Homepage
Ami Paris collection: collection homme on mobile, not disclosed luxury fashion storefront captured at 390 x 844
Collection: Collection Homme
Ami Paris product page on mobile, not disclosed luxury fashion storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

92.5%
92.5% #fbf9f4 page
7.5% #000000 dark bands

Ink, by share of text set in it

81.2%
15.1%
81.2% #000000 body and headings
15.1% #6d6b66 secondary
2.3% #ffffff reversed on dark
0.7% #7e7d7a secondary
0.6% #767676 secondary

Imagery, by share of the page it covers

40% photograph, the rest is surface

Typography

sans-serif · everything

miera

sans-serif · accent

ui-sans-serif

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
miera 12px / 700 / 0.24px tracking / uppercase
Color
rgb(255, 255, 255) on rgb(0, 0, 0)
Shape
0px radius, 16px 15px padding, 44px tall
Width
395px as rendered
T-shirt blanc en coton Ami de Co 170€ EUR 170€ EUR Add to wishlist
T-shirt blanc en coton Ami de Co 170€ EUR 170€ EUR Add to wishlist
T-shirt blanc en coton Ami de Co 170€ EUR 170€ EUR Add to wishlist
Product card
Grid
3 across, 475px wide
Image
0.8 : 1 crop, fill
Line 1
12px / 400 / uppercase, rgb(0, 0, 0)
Line 2
12px / 700 / uppercase, rgb(0, 0, 0)
Line 3
12px / 700 / uppercase, rgb(0, 0, 0)
Line 4
14px / 400 / uppercase, rgb(255, 69, 0)