Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

luggage · Shopify ·

Away

The Away 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 8.5 percent of the page, typeset in Graphik, Lyon Display.

The pages

desktop1440 x 900

Away homepage on desktop, Shopify luxury luggage storefront captured at 1440 x 900
Homepage
Away collection: all product (internal only) on desktop, Shopify luxury luggage storefront captured at 1440 x 900
Collection: All product (internal only)
Away product page on desktop, Shopify luxury luggage storefront captured at 1440 x 900
Product page

mobile390 x 844

Away homepage on mobile, Shopify luxury luggage storefront captured at 390 x 844
Homepage
Away collection: all product (internal only) on mobile, Shopify luxury luggage storefront captured at 390 x 844
Collection: All product (internal only)
Away product page on mobile, Shopify luxury luggage storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

82.3%
13.8%
82.3% #f7f4f1 page
13.8% #ffffff panels and cards
1.6% #f7f0ea panels and cards
1.3% #b1b068 accent
0.8% #f9e3ea secondary surface
0.3% #f7eeea panels and cards

Ink, by share of text set in it

75.4%
11.7%
75.4% #111111 body and headings
11.7% #000000 emphasis
7.2% #666666 emphasis
5.3% #ffffff reversed on dark
0.4% #d8d8dc secondary

Imagery, by share of the page it covers

8.5% photograph, the rest is surface

Typography

sans-serif · everything

Graphik

sans-serif · accent

Lyon Display

of all text on the page

76% sans-serif24% serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Graphik 16px / 500 / uppercase
Color
rgb(255, 255, 255) on rgb(17, 17, 17)
Shape
80px radius, 0px 20px padding, 52px tall
Width
219px as rendered
Product card
Grid
4 across, 270px wide
Image
0.78 : 1 crop, cover