Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

beauty · Shopify ·

Hourglass

The Hourglass 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 37.1 percent of the page, typeset in Lausanne-300, Gotham-Bold.

The pages

desktop1440 x 900

Hourglass homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
Hourglass collection: all on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: All
Hourglass product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Hourglass homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
Hourglass collection: all on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: All
Hourglass product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

92.4%
92.4% #f5f2e5 page
5.1% #000000 dark bands
2.5% #f2efe8 panels and cards

Ink, by share of text set in it

59.7%
20.5%
15.8%
59.7% #000000 body and headings
20.5% #ffffff reversed on dark
15.8% #f5f2e5 reversed on dark
4% #2c2c2c emphasis

Imagery, by share of the page it covers

37.1% photograph, the rest is surface

Typography

sans-serif · everything

Lausanne-300

sans-serif · accent

Gotham-Bold

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Gotham-Book 14px / 600 / uppercase
Color
rgb(245, 242, 229) on rgb(0, 0, 0)
Shape
0px radius, 12px 24px padding, 44px tall
Width
532px as rendered
/* Companion stylesheet for "glo Unlocked Instant Extensions Masc $34 2 Shades
/* Companion stylesheet for "glo Unlocked Instant Extensions Masc $34 2 Shades
/* Companion stylesheet for "glo Unlocked Instant Extensions Masc $34 2 Shades
Product card
Grid
10 across, 372px wide
Image
1 : 1 crop, cover
Line 1
13px / 300, rgb(0, 0, 0)
Line 2
13px / 400 / uppercase, rgb(0, 0, 0)
Line 3
14px / 300, rgb(0, 0, 0)
Line 4
13px / 300, rgb(0, 0, 0)
Line 5
13px / 300, rgb(0, 0, 0)