Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

fashion · Shopify ·

Donna Karan

The Donna Karan 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 29.9 percent of the page, typeset in HelveticaNeueLTStd-LtEx, HelveticaNeueLTStd-Ex.

The pages

desktop1440 x 900

Donna Karan homepage on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Homepage
Donna Karan collection: all products on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Collection: All Products
Donna Karan product page on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Product page

mobile390 x 844

Donna Karan homepage on mobile, Shopify luxury fashion storefront captured at 390 x 844
Homepage
Donna Karan collection: all products on mobile, Shopify luxury fashion storefront captured at 390 x 844
Collection: All Products
Donna Karan product page on mobile, Shopify luxury fashion storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

47.3%
40.2%
9.9%
47.3% #ffffff page
40.2% #000000 dark bands
9.9% #d8bd89 secondary surface
2.5% #f4eee8 panels and cards

Ink, by share of text set in it

43.6%
37.7%
43.6% #212121 body and headings
37.7% #ffffff reversed on dark
7.3% #000000 emphasis
6.3% #999999 secondary
3.2% #515151 emphasis
2% #be0113 emphasis

Imagery, by share of the page it covers

29.9% photograph, the rest is surface

Typography

sans-serif · everything

HelveticaNeueLTStd-LtEx

sans-serif · accent

HelveticaNeueLTStd-Ex

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

<img src="//www.donnakaran <img src="//www.donnakaran
<img src="//www.donnakaran <img src="//www.donnakaran
<img src="//www.donnakaran <img src="//www.donnakaran
Product card
Grid
4 across, 326px wide
Image
0.67 : 1 crop, cover
Line 1
14px / 400, rgb(33, 33, 33)
Line 2
14px / 400, rgb(33, 33, 33)