Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

beauty · Shopify ·

Viktor&Rolf Fragrance

The Viktor&Rolf Fragrance 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.9 percent of the page, typeset in Neuzeit S LT Std.

The pages

desktop1440 x 900

Viktor&Rolf Fragrance homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
Viktor&Rolf Fragrance collection: all products on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: ALL PRODUCTS
Viktor&Rolf Fragrance product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Viktor&Rolf Fragrance homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
Viktor&Rolf Fragrance collection: all products on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: ALL PRODUCTS
Viktor&Rolf Fragrance product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

65.2%
19.6%
13.3%
65.2% #f5f5f5 page
19.6% #efe6d5 secondary surface
13.3% #ffffff panels and cards
1.9% #000000 dark bands

Ink, by share of text set in it

61.2%
23.6%
61.2% #191919 body and headings
23.6% #000000 emphasis
7.9% #ffffff reversed on dark
7.3% #959595 secondary

Imagery, by share of the page it covers

41.9% photograph, the rest is surface

Typography

sans-serif · everything

Neuzeit S LT Std

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Neuzeit S LT Std 12px / 400 / 0.5px tracking
Color
rgb(255, 255, 255) on rgb(0, 0, 0)
Shape
0px radius, 11px 30px padding, 36px tall
Width
418px as rendered
Product card
Grid
4 across, 360px wide
Image
0.67 : 1 crop, cover