Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

leather goods · Shopify ·

Filson

Filson outfitted prospectors heading for the Klondike from its Seattle store in the 1890s and still sells that category of gear: waxed Tin Cloth coats, Mackinaw wool and bridle leather bags.

The pages

desktop1440 x 900

Filson homepage on desktop, Shopify luxury leather goods storefront captured at 1440 x 900
Homepage
Filson collection: accessories on desktop, Shopify luxury leather goods storefront captured at 1440 x 900
Collection: Accessories

mobile390 x 844

Filson homepage on mobile, Shopify luxury leather goods storefront captured at 390 x 844
Homepage
Filson collection: accessories on mobile, Shopify luxury leather goods storefront captured at 390 x 844
Collection: Accessories
Filson product page on mobile, Shopify luxury leather goods storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

96.8%
96.8% #e6dbcb page
2.1% #2a2a22 secondary surface
0.6% #ac8752 accent
0.6% #dacbb7 accent

Ink, by share of text set in it

47%
23.6%
21.7%
47% #0e0e0b body and headings
23.6% #e6dbcb reversed on dark
21.7% #121212 emphasis
4.7% #0e020b emphasis
3% #f1edea reversed on dark

Imagery, by share of the page it covers

61.8% photograph, the rest is surface

Typography

sans-serif · everything

FoundersGroteskText

sans-serif · accent

FoundersGroteskXCondensed

of all text on the page

100% sans-serif

The icon set

cart
search
account
menu

Ecommerce components, rebuilt to spec

Product card
Grid
4 across, 338px wide
Image
0.8 : 1 crop, cover

Size and color

XS S M L XL
Size selector
Control
radio list with text labels, 5 values
Label
Size
Type
FoundersGroteskMono 12px / 400
Cell
72 by 40px, 4px apart
Chosen
filled #2a2a22 (unselected #dacbb7)
On load
nothing is chosen
Color selector
Control
buttons, 3 swatches
Swatch
wide rectangle, 29 by 17px, 0px apart
Chosen
border 1px solid rgb(0, 0, 0) (unselected 1px solid rgba(0, 0, 0, 0))