Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

beauty · Shopify ·

SK-II

The SK-II 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 19.3 percent of the page, typeset in AvenirNextLTProRegular, AvenirNextLTPro.

The pages

desktop1440 x 900

SK-II homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
SK-II collection: normal on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: Normal
SK-II product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

SK-II homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
SK-II collection: normal on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: Normal
SK-II product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

48.3%
23.6%
13.4%
12.8%
48.3% #ffffff page
23.6% #161616 dark bands
13.4% #fffcfa panels and cards
12.8% #f8f4ed panels and cards
1.3% #fbf4ed panels and cards
0.4% #ea0429 secondary surface

Ink, by share of text set in it

43.2%
34.2%
15.8%
43.2% #161616 body and headings
34.2% #ffffff reversed on dark
15.8% #1b1212 emphasis
4.8% #000000 emphasis
1.5% #808080 secondary
0.6% #666666 emphasis

Imagery, by share of the page it covers

19.3% photograph, the rest is surface

Typography

sans-serif · everything

AvenirNextLTProRegular

sans-serif · accent

AvenirNextLTPro

of all text on the page

92% sans-serif8% serif

Ecommerce components, rebuilt to spec

Add to cart
Type
AvenirNextLTProRegular 14px / 700 / 1.12px tracking / uppercase
Color
rgb(255, 255, 255) on rgb(234, 4, 41)
Shape
0px radius, 5px 12px padding, 45px tall
Width
500px as rendered
Quick add
Quick add
Quick add
Product card
Grid
4 across, 262px wide
Image
1.06 : 1 crop, contain
Line 1
12px / 400, rgb(22, 22, 22)