Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

eyewear · Shopify ·

Smith Optics

Sport eyewear maker started in 1965 in Sun Valley, Idaho by Bob Smith, an orthodontist who built ski goggles with a sealed thermal lens and vented foam. Now part of Italy's Safilo Group.

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

The icon set

cart
search
menu
close

Ecommerce components, rebuilt to spec

Smith Optics add to cart button photographed on its product page
photographed on smithoptics.com
Add to cart
Type
Graphik 14px / 600 / 0.56px tracking / uppercase
Color
rgb(255, 255, 255) on #181818, painted over #ffffff
Shape
0px radius, 537 by 48px
Label
center, rebuild matched the photograph at 1
Product card
Grid
3 across, 288px wide
Image
1 : 1 crop, cover

Size and color

Small Medium Large
Size selector
Control
radio list with text labels, 3 values
Label
Size
Type
Graphik 14px / 400
Cell
79 by 40px, 9px apart
Chosen
border 1px solid rgb(24, 24, 24) (unselected 1px solid color(srgb 0.0941176 0.0941176 0.0941176 / 0.05))
On load
one is already chosen
Color selector
Control
radio list with coloured labels, 3 swatches
Swatch
square, 82 by 82px, 8px apart
Chosen
1.5px outline, #181818 (inset shadow)