Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

beauty · Shopify ·

Boy Smells

The Boy Smells 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 41.2 percent of the page, typeset in Neuzeit Grotesk, Ano W05.

The pages

desktop1440 x 900

Boy Smells homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
Boy Smells collection: all candles (expect l, sb, cbk, g, cs, hf) on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: ALL CANDLES (EXPECT L, SB, CBK, G, CS, HF)
Boy Smells product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Boy Smells homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
Boy Smells collection: all candles (expect l, sb, cbk, g, cs, hf) on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: ALL CANDLES (EXPECT L, SB, CBK, G, CS, HF)
Boy Smells product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

68%
18%
68% #ffffff page
18% #e8d1ff secondary surface
5.5% #fff8f5 panels and cards
4.3% #bd826f accent
2.9% #f2f2f2 panels and cards
1.1% #ceb6e6 accent

Ink, by share of text set in it

53.6%
29%
10.4%
53.6% #030303 body and headings
29% #000000 emphasis
10.4% #757575 secondary
4.7% #ffffff reversed on dark
1.5% #373330 emphasis
0.8% #bebebe secondary

Imagery, by share of the page it covers

41.2% photograph, the rest is surface

Typography

sans-serif · everything

Neuzeit Grotesk

sans-serif · accent

Ano W05

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Ano W05 14px / 700
Color
rgb(255, 255, 255) on rgb(3, 3, 3)
Shape
100px radius, 25px 32px padding, 64px tall
Width
382px as rendered
Product card
Grid
4 across, 304px wide
Image
1 : 1 crop, contain