Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

fashion · Shopify ·

Antonio Marras

The Antonio Marras 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 38.9 percent of the page, typeset in neue-haas-grotesk-display.

The pages

desktop1440 x 900

Antonio Marras homepage on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Homepage
Antonio Marras collection: 01-0-woman on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Collection: 01-0-WOMAN
Antonio Marras product page on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Product page

mobile390 x 844

Antonio Marras homepage on mobile, Shopify luxury fashion storefront captured at 390 x 844
Homepage
Antonio Marras collection: 01-0-woman on mobile, Shopify luxury fashion storefront captured at 390 x 844
Collection: 01-0-WOMAN
Antonio Marras product page on mobile, Shopify luxury fashion storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

33.7%
32.6%
29.1%
33.7% #f8f8f8 page
32.6% #ffffff panels and cards
29.1% #f4f2eb panels and cards
4.5% #000000 dark bands

Ink, by share of text set in it

88.9%
88.9% #000000 body and headings
6.9% #646464 emphasis
3.7% #ffffff reversed on dark
0.5% #a60d1a emphasis

Imagery, by share of the page it covers

38.9% photograph, the rest is surface

Typography

sans-serif · everything

neue-haas-grotesk-display

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
ui-sans-serif 16px / 400
Color
rgb(255, 255, 255) on rgb(190, 190, 190)
Shape
4px radius, 12px 16px padding, 42px tall
Width
330px as rendered
Product card
Grid
3 across, 136px wide
Image
0.75 : 1 crop, cover