Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

beauty · Shopify ·

111Skin

The 111Skin 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 27.5 percent of the page, typeset in Futura Cyrillic Book, Blair Medium.

The pages

desktop1440 x 900

111Skin homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
111Skin collection: all products on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: All Products
111Skin product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

111Skin homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
111Skin collection: all products on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: All Products
111Skin product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

75.6%
10.5%
75.6% #ffffff page
10.5% #f9f9f9 panels and cards
6.6% #561933 secondary surface
5.9% #660c3a dark bands
0.5% #f3f3f3 panels and cards
0.4% #000000 dark bands

Ink, by share of text set in it

44.6%
37%
9.6%
8.8%
44.6% #000000 body and headings
37% #ffffff reversed on dark
9.6% #212121 emphasis
8.8% #832a59 emphasis

Imagery, by share of the page it covers

27.5% photograph, the rest is surface

Typography

sans-serif · everything

Futura Cyrillic Book

sans-serif · accent

Blair Medium

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Futura Cyrillic Medium 14px / 500 / 1.05px tracking / uppercase
Color
rgb(255, 255, 255) on rgb(102, 12, 58)
Shape
0px radius, 10px 18px padding, 41px tall
Width
435px as rendered
bestseller .wishlist-hero-custom-button but
bestseller .wishlist-hero-custom-button but
bestseller .wishlist-hero-custom-button but
Product card
Grid
3 across, 420px wide
Image
1 : 1 crop, cover
Line 1
11px / 400 / uppercase, rgb(102, 12, 58)
Line 2
15px / 400, rgb(255, 255, 255)