Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

fashion · Shopify ·

Altuzarra

The Altuzarra 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 23.3 percent of the page, typeset in CentraBook, PetitSerif.

The pages

desktop1440 x 900

Altuzarra homepage on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Homepage
Altuzarra collection: all full price products on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Collection: All full price products
Altuzarra product page on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Product page

mobile390 x 844

Altuzarra homepage on mobile, Shopify luxury fashion storefront captured at 390 x 844
Homepage
Altuzarra collection: all full price products on mobile, Shopify luxury fashion storefront captured at 390 x 844
Collection: All full price products
Altuzarra product page on mobile, Shopify luxury fashion storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

84.6%
13.4%
84.6% #ffffff page
13.4% #f4f0ea panels and cards
1.9% #2c2c2c secondary surface

Ink, by share of text set in it

72.9%
12.9%
8.6%
72.9% #2c2c2c body and headings
12.9% #4f4f4f emphasis
8.6% #8d8d8d secondary
5.6% #ffffff reversed on dark

Imagery, by share of the page it covers

23.3% photograph, the rest is surface

Typography

sans-serif · everything

CentraBook

sans-serif · accent

PetitSerif

of all text on the page

87% sans-serif13% serif

Ecommerce components, rebuilt to spec

Add to cart
Type
CentraBook 12px / 400 / 0.26004px tracking
Color
rgb(255, 255, 255) on rgb(44, 44, 44)
Shape
0px radius, 0px padding, 37px tall
Width
316px as rendered
Serge Pant $745 available sizes 34 36
Serge Pant $745 available sizes 34 36
Serge Pant $745 available sizes 34 36
Product card
Grid
4 across, 354px wide
Image
0.67 : 1 crop, cover
Line 1
11px / 400 / uppercase, rgb(44, 44, 44)
Line 2
11px / 400 / uppercase, rgb(141, 141, 141)
Line 3
11px / 400 / uppercase, rgb(44, 44, 44)
Line 4
11px / 400 / uppercase, rgb(44, 44, 44)
Line 5
11px / 400 / uppercase, rgb(44, 44, 44)