Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

jewelry · Shopify ·

Alighieri

The Alighieri 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 37.7 percent of the page, typeset in mrs-eaves, mrs-eaves-roman-all-small-ca.

The pages

desktop1440 x 900

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

mobile390 x 844

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

Palette

Surfaces, by share of painted area

75.8%
20%
75.8% #f5f3ef page
20% #ffffff panels and cards
3.6% #000000 dark bands
0.7% #212121 dark bands

Ink, by share of text set in it

83.2%
9%
83.2% #000000 body and headings
9% #212121 emphasis
4.8% #777777 secondary
3% #ffffff reversed on dark

Imagery, by share of the page it covers

37.7% photograph, the rest is surface

Typography

sans-serif · everything

mrs-eaves

sans-serif · accent

mrs-eaves-roman-all-small-ca

of all text on the page

100% serif

Ecommerce components, rebuilt to spec

Add to cart
Type
mrs-eaves-roman-all-small-ca 18px / 400
Color
rgb(255, 255, 255) on rgb(0, 0, 0)
Shape
0px radius, 0px padding, 40px tall
Width
320px as rendered
Product card
Grid
4 across, 315px wide
Image
0.8 : 1 crop, contain