Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

eyewear · Shopify ·

Polaroid Eyewear

The Polaroid 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 27.4 percent of the page, typeset in Poppins.

The pages

desktop1440 x 900

Polaroid Eyewear homepage on desktop, Shopify luxury eyewear storefront captured at 1440 x 900
Homepage
Polaroid Eyewear collection: essential on desktop, Shopify luxury eyewear storefront captured at 1440 x 900
Collection: Essential
Polaroid Eyewear product page on desktop, Shopify luxury eyewear storefront captured at 1440 x 900
Product page

mobile390 x 844

Polaroid Eyewear homepage on mobile, Shopify luxury eyewear storefront captured at 390 x 844
Homepage
Polaroid Eyewear collection: essential on mobile, Shopify luxury eyewear storefront captured at 390 x 844
Collection: Essential
Polaroid Eyewear product page on mobile, Shopify luxury eyewear storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

84.7%
84.7% #ffffff page
6.7% #ffb600 secondary surface
5.3% #000000 dark bands
3.3% #212121 dark bands

Ink, by share of text set in it

85.4%
85.4% #000000 body and headings
7.6% #ffffff reversed on dark
3.6% #4d4d4d emphasis
3.4% #212121 emphasis

Imagery, by share of the page it covers

27.4% photograph, the rest is surface

Typography

sans-serif · everything

Poppins

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Poppins 14px / 500 / 0.35px tracking
Color
rgb(255, 255, 255) on rgb(0, 0, 0)
Shape
3px radius, 9px 16.2px padding, 43px tall
Width
420px as rendered
Product card
Grid
3 across, 420px wide
Image
1 : 1 crop, cover