Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

fashion · not disclosed ·

Bode

The Bode 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 47.7 percent of the page, typeset in NeueHaasUnica, ITCBlairPro.

The pages

desktop1440 x 900

Bode homepage on desktop, not disclosed luxury fashion storefront captured at 1440 x 900
Homepage
Bode collection: emily adams bode on desktop, not disclosed luxury fashion storefront captured at 1440 x 900
Collection: Emily Adams Bode
Bode product page on desktop, not disclosed luxury fashion storefront captured at 1440 x 900
Product page

mobile390 x 844

Bode homepage on mobile, not disclosed luxury fashion storefront captured at 390 x 844
Homepage
Bode collection: emily adams bode on mobile, not disclosed luxury fashion storefront captured at 390 x 844
Collection: Emily Adams Bode
Bode product page on mobile, not disclosed luxury fashion storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

90.8%
8.9%
90.8% #ffffff page
8.9% #fbfbfb panels and cards
0.4% #000000 dark bands

Ink, by share of text set in it

73.1%
25%
73.1% #000000 body and headings
25% #737373 secondary
1.5% #808080 secondary
0.4% #ffffff reversed on dark

Imagery, by share of the page it covers

47.7% photograph, the rest is surface

Typography

sans-serif · everything

NeueHaasUnica

sans-serif · accent

ITCBlairPro

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
NeueHaasUnica 12px / 400
Color
rgb(255, 255, 255) on rgb(0, 0, 0)
Shape
0px radius, 10px 0px padding, 40px tall
Width
297px as rendered
$450
$450
$450
Product card
Grid
3 across, 365px wide
Image
0.8 : 1 crop, cover
Line 1
12px / 400, rgb(0, 0, 0)