Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

eyewear · Shopify ·

Vogue Eyewear

The Vogue Eyewear 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 14.9 percent of the page, typeset in Futura Std, arial.

The pages

desktop1440 x 900

Vogue Eyewear homepage on desktop, Shopify luxury eyewear storefront captured at 1440 x 900
Homepage
Vogue Eyewear collection: eyeglasses for women & men on desktop, Shopify luxury eyewear storefront captured at 1440 x 900
Collection: Eyeglasses for Women & Men
Vogue Eyewear product page on desktop, Shopify luxury eyewear storefront captured at 1440 x 900
Product page

mobile390 x 844

Vogue Eyewear homepage on mobile, Shopify luxury eyewear storefront captured at 390 x 844
Homepage
Vogue Eyewear collection: eyeglasses for women & men on mobile, Shopify luxury eyewear storefront captured at 390 x 844
Collection: Eyeglasses for Women & Men
Vogue Eyewear product page on mobile, Shopify luxury eyewear storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

58.9%
22.5%
15.1%
58.9% #ffffff page
22.5% #f2f2f2 panels and cards
15.1% #000000 dark bands
2.8% #f8f8fb panels and cards
0.6% #e1e1e1 secondary surface

Ink, by share of text set in it

63.9%
21.9%
8.6%
63.9% #000000 body and headings
21.9% #ffffff reversed on dark
8.6% #6d6d6d secondary
3.3% #121212 emphasis
2.3% #202125 emphasis

Imagery, by share of the page it covers

14.9% photograph, the rest is surface

Typography

sans-serif · everything

Futura Std

sans-serif · accent

arial

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Futura Std 16px / 400 / 1px tracking
Color
rgb(255, 255, 255) on rgb(0, 0, 0)
Shape
3px radius, 12px 24px padding, 43px tall
Width
512px as rendered
Product card
Grid
4 across, 355px wide
Image
2 : 1 crop, fill