Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

footwear · Shopify ·

Greats

The Greats 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 26.6 percent of the page, typeset in Helvetica Neue, WT Kormelink.

The pages

desktop1440 x 900

Greats homepage on desktop, Shopify luxury footwear storefront captured at 1440 x 900
Homepage
Greats collection: all low tops on desktop, Shopify luxury footwear storefront captured at 1440 x 900
Collection: All Low Tops
Greats product page on desktop, Shopify luxury footwear storefront captured at 1440 x 900
Product page

mobile390 x 844

Greats homepage on mobile, Shopify luxury footwear storefront captured at 390 x 844
Homepage
Greats collection: all low tops on mobile, Shopify luxury footwear storefront captured at 390 x 844
Collection: All Low Tops
Greats product page on mobile, Shopify luxury footwear storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

84.2%
9.6%
84.2% #ffffff page
9.6% #f7f7f7 panels and cards
5.7% #000000 dark bands
0.4% #141415 dark bands

Ink, by share of text set in it

71.6%
22.5%
71.6% #141415 body and headings
22.5% #000000 emphasis
5.6% #ffffff reversed on dark
0.3% #2c2c2c emphasis

Imagery, by share of the page it covers

26.6% photograph, the rest is surface

Typography

sans-serif · everything

Helvetica Neue

sans-serif · accent

WT Kormelink

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Helvetica Neue 16px / 400 / uppercase
Color
rgb(255, 255, 255) on rgb(20, 20, 21)
Shape
0px radius, 13px 10px padding, 44px tall
Width
200px as rendered
Back in Stock: The Royale 2.0.
Back in Stock: The Royale 2.0.
Back in Stock: The Royale 2.0.
Product card
Grid
27 across, 167px wide
Image
1 : 1 crop, cover
Line 1
14px / 500 / uppercase, rgb(20, 20, 21)