Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

fashion · Shopify ·

Agnona

Italian house from Borgosesia in Piedmont, founded in 1953, which began by weaving cloth for couture ateliers and now makes women's ready-to-wear in cashmere, vicuña and fine wool.

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

The icon set

cart
search
account
menu
close

Ecommerce components, rebuilt to spec

Agnona add to cart button photographed on its product page
photographed on agnona.com
Add to cart
Type
Scto Grotesk B 12px / 500 / uppercase
Color
rgb(255, 255, 255) on #000000, painted over #f1f1f1
Shape
10px radius, 448 by 43px
Label
center, rebuild matched the photograph at 0.979
Product card
Grid
24 across, 313px wide
Image
0.75 : 1 crop, contain

Size and color

S M L XL
Size selector
Control
radio list with text labels, 4 values
Label
Size
Type
Scto Grotesk B 12px / 400
Cell
16 by 20px, 10px apart
Chosen
border 0px solid rgb(147, 98, 68) (unselected 0px solid rgb(205, 205, 205))
On load
one is already chosen
Color selector
Control
links to sibling products, 2 swatches
Swatch
circle, 18 by 18px, 10px apart
Chosen
51x30px block, #000000