Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

eyewear · Shopify ·

Smith Optics

The Smith Optics 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 23.1 percent of the page, typeset in Graphik.

The pages

desktop1440 x 900

Smith Optics homepage on desktop, Shopify luxury eyewear storefront captured at 1440 x 900
Homepage
Smith Optics collection: black friday/cyber monday sale on desktop, Shopify luxury eyewear storefront captured at 1440 x 900
Collection: Black Friday/Cyber Monday Sale
Smith Optics product page on desktop, Shopify luxury eyewear storefront captured at 1440 x 900
Product page

mobile390 x 844

Smith Optics homepage on mobile, Shopify luxury eyewear storefront captured at 390 x 844
Homepage
Smith Optics collection: black friday/cyber monday sale on mobile, Shopify luxury eyewear storefront captured at 390 x 844
Collection: Black Friday/Cyber Monday Sale
Smith Optics product page on mobile, Shopify luxury eyewear storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

75%
17.1%
75% #ffffff page
17.1% #f5f5f5 panels and cards
4.7% #181818 dark bands
1.5% #edf3f8 panels and cards
0.8% #121212 dark bands
0.4% #fafaf8 panels and cards

Ink, by share of text set in it

67.3%
15.3%
8.8%
67.3% #181818 body and headings
15.3% #ffffff reversed on dark
8.8% #000000 emphasis
7.9% #121212 emphasis
0.4% #747474 secondary
0.3% #333333 emphasis

Imagery, by share of the page it covers

23.1% photograph, the rest is surface

Typography

sans-serif · everything

Graphik

of all text on the page

100% serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Graphik 14px / 600 / 0.56px tracking / uppercase
Color
rgb(255, 255, 255) on rgb(24, 24, 24)
Shape
0px radius, 14px 40px padding, 48px tall
Width
537px as rendered
Product card
Grid
3 across, 288px wide
Image
1 : 1 crop, cover