Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

fashion · Shopify ·

Balmain

The Balmain 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 20.1 percent of the page, typeset in Arial, Balmain Sans.

The pages

desktop1440 x 900

Balmain homepage on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Homepage
Balmain collection: collection on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Collection: Collection
Balmain product page on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Product page

mobile390 x 844

Balmain homepage on mobile, Shopify luxury fashion storefront captured at 390 x 844
Homepage
Balmain collection: collection on mobile, Shopify luxury fashion storefront captured at 390 x 844
Collection: Collection
Balmain product page on mobile, Shopify luxury fashion storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

100%
100% #ffffff page

Ink, by share of text set in it

100%
100% #000000 body and headings

Imagery, by share of the page it covers

20.1% photograph, the rest is surface

Typography

sans-serif · everything

Arial

sans-serif · accent

Balmain Sans

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Balmain Sans 12px / 500 / uppercase
Color
rgb(0, 0, 0) on rgb(255, 255, 255)
Shape
0px radius, 13px 20px padding, 40px tall
Width
320px as rendered
<img src="//balmain.com/cdn/shop
<img src="//balmain.com/cdn/shop
<img src="//balmain.com/cdn/shop
Product card
Grid
8 across, 355px wide
Image
0.75 : 1 crop, cover
Line 1
12px / 400, rgb(0, 0, 0)