Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

leather goods · Shopify ·

Lancel

The Lancel 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 36.4 percent of the page, typeset in Poppins, Poppins ExtraBold.

The pages

desktop1440 x 900

Lancel homepage on desktop, Shopify luxury leather goods storefront captured at 1440 x 900
Homepage
Lancel collection: all bags. on desktop, Shopify luxury leather goods storefront captured at 1440 x 900
Collection: ALL BAGS.
Lancel product page on desktop, Shopify luxury leather goods storefront captured at 1440 x 900
Product page

mobile390 x 844

Lancel homepage on mobile, Shopify luxury leather goods storefront captured at 390 x 844
Homepage
Lancel collection: all bags. on mobile, Shopify luxury leather goods storefront captured at 390 x 844
Collection: ALL BAGS.
Lancel product page on mobile, Shopify luxury leather goods storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

65.4%
22.4%
11.5%
65.4% #ffffff page
22.4% #1f1f1f dark bands
11.5% #f7f4f1 panels and cards
0.5% #000000 dark bands
0.2% #eeecea panels and cards

Ink, by share of text set in it

39.4%
31.1%
13.5%
39.4% #000000 body and headings
31.1% #ffffff reversed on dark
13.5% #0e0607 emphasis
5.6% #1c1b19 emphasis
5.4% #6f6a62 secondary
2.5% #898989 secondary

Imagery, by share of the page it covers

36.4% photograph, the rest is surface

Typography

sans-serif · everything

Poppins

sans-serif · accent

Poppins ExtraBold

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Poppins 13px / 700 / uppercase
Color
rgb(14, 6, 7) on rgb(255, 255, 255)
Shape
0px radius, 0px 25px padding, 54px tall
Width
473px as rendered
Product card
Grid
4 across, 248px wide
Image
1 : 1 crop, cover