Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

fashion · Shopify ·

Ahluwalia

Priya Ahluwalia's London label reworks vintage and deadstock cloth into patchwork, knitwear and print, drawing on the designer's Indian and Nigerian heritage.

The pages

desktop1440 x 900

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

mobile390 x 844

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

Palette

Surfaces, by share of painted area

58.9%
40.3%
58.9% #ffffff page
40.3% #222222 dark bands
0.9% #000000 dark bands

Ink, by share of text set in it

61.2%
20.9%
17.9%
61.2% #222222 body and headings
20.9% #ffffff reversed on dark
17.9% #666666 emphasis

Imagery, by share of the page it covers

32% photograph, the rest is surface

Typography

sans-serif · everything

Instrument Sans

sans-serif · accent

M-Heading-Font

of all text on the page

100% sans-serif

The icon set

cart
search
account
close
wishlist

Ecommerce components, rebuilt to spec

Ahluwalia add to cart button photographed on its product page
photographed on ahluwalia.world
Add to cart
Type
Instrument Sans 20px / 500
Color
rgb(255, 255, 255) on #000000, painted over #ffffff
Shape
5px radius, 485 by 45px
Label
center, rebuild matched the photograph at 0.99
Product card
Grid
4 across, 331px wide
Image
0.75 : 1 crop, cover

Size and color

XS/S M/L XL/XXL
Size selector
Control
radio list with text labels, 3 values
Label
Size
Type
Instrument Sans 16px / 400
Cell
68 by 53px, 0px apart
Chosen
border 1px solid rgb(34, 34, 34) (unselected 1px solid rgb(222, 222, 222))
On load
one is already chosen