Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

fashion · Shopify ·

Agnona

The Agnona 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 59 percent of the page, typeset in Scto Grotesk B.

The pages

desktop1440 x 900

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

mobile390 x 844

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

Palette

Surfaces, by share of painted area

100%
100% #f1f1f1 page

Ink, by share of text set in it

97.4%
97.4% #000000 body and headings
2.5% #ffffff reversed on dark

Imagery, by share of the page it covers

59% photograph, the rest is surface

Typography

sans-serif · everything

Scto Grotesk B

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Scto Grotesk B 12px / 500 / uppercase
Color
rgb(255, 255, 255) on rgba(0, 0, 0, 0)
Shape
10px radius, 10.4px 28px padding, 43px tall
Width
448px as rendered
Product card
Grid
24 across, 313px wide
Image
0.75 : 1 crop, contain