Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

leather goods · Shopify ·

Filson

The Filson 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 61.8 percent of the page, typeset in FoundersGroteskText, FoundersGroteskXCondensed.

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

Ecommerce components, rebuilt to spec

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