Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

fashion · Shopify ·

Area

The Area 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 38.4 percent of the page, typeset in The Future.

The pages

desktop1440 x 900

Area homepage on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Homepage
Area collection: $250 to $500 on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Collection: $250 to $500
Area product page on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Product page

mobile390 x 844

Area homepage on mobile, Shopify luxury fashion storefront captured at 390 x 844
Homepage
Area collection: $250 to $500 on mobile, Shopify luxury fashion storefront captured at 390 x 844
Collection: $250 to $500
Area product page on mobile, Shopify luxury fashion storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

90.7%
9.3%
90.7% #ffffff page
9.3% #000000 dark bands

Ink, by share of text set in it

98%
98% #000000 body and headings
1.9% #ffffff reversed on dark

Imagery, by share of the page it covers

38.4% photograph, the rest is surface

Typography

sans-serif · everything

The Future

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
The Future 14px / 400
Color
rgb(0, 0, 0) on rgba(0, 0, 0, 0)
Shape
0px radius, 14px padding, 52px tall
Width
350px as rendered
<img class="product-item__image- Girly Rib Knit Short Regular price $375
<img class="product-item__image- Girly Rib Knit Short Regular price $375
<img class="product-item__image- Girly Rib Knit Short Regular price $375
Product card
Grid
3 across, 456px wide
Image
0.67 : 1 crop, cover
Line 1
14px / 400, rgb(0, 0, 0)
Line 2
14px / 400, rgb(0, 0, 0)
Line 3
14px / 400, rgb(0, 0, 0)
Line 4
14px / 400, rgb(0, 0, 0)