Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

retail · Shopify ·

Analog Shift

The Analog Shift 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 19.2 percent of the page, typeset in Bradford, RightGrotesk.

The pages

desktop1440 x 900

Analog Shift homepage on desktop, Shopify luxury retail storefront captured at 1440 x 900
Homepage
Analog Shift collection: 0 inventory on desktop, Shopify luxury retail storefront captured at 1440 x 900
Collection: 0 Inventory
Analog Shift product page on desktop, Shopify luxury retail storefront captured at 1440 x 900
Product page

mobile390 x 844

Analog Shift homepage on mobile, Shopify luxury retail storefront captured at 390 x 844
Homepage
Analog Shift collection: 0 inventory on mobile, Shopify luxury retail storefront captured at 390 x 844
Collection: 0 Inventory
Analog Shift product page on mobile, Shopify luxury retail storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

69.6%
18.7%
69.6% #ffffff page
18.7% #f7f7f4 panels and cards
5.3% #eeeeea panels and cards
2.1% #000000 dark bands
2.1% #6153a9 accent
1.6% #f9f9f9 panels and cards

Ink, by share of text set in it

86.4%
86.4% #000000 body and headings
6.7% #595959 emphasis
6.4% #ffffff reversed on dark
0.3% #268260 secondary
0.2% #2e9b57 secondary

Imagery, by share of the page it covers

19.2% photograph, the rest is surface

Typography

sans-serif · everything

Bradford

sans-serif · accent

RightGrotesk

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Maison 16px / 400 / 1px tracking / uppercase
Color
rgb(255, 255, 255) on rgb(46, 160, 119)
Shape
0px radius, 18px 16px 16px padding, 54px tall
Width
234px as rendered
WOLF X Analog:Shift Flatiron II WOLF X Analog:Shift Flatiron II Sold Out Sold Out
WOLF X Analog:Shift Flatiron II WOLF X Analog:Shift Flatiron II Sold Out Sold Out
WOLF X Analog:Shift Flatiron II WOLF X Analog:Shift Flatiron II Sold Out Sold Out
Product card
Grid
3 across, 312px wide
Image
0.8 : 1 crop, cover
Line 1
16px / 400, rgb(38, 130, 96)
Line 2
16px / 400, rgb(0, 0, 0)
Line 3
15px / 400, rgb(0, 0, 0)
Line 4
15px / 400, rgb(0, 0, 0)