Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

fashion · Shopify ·

Brain Dead

Clothing collective founded in Los Angeles in 2014 by Kyle Ng and Ed Davis, drawing on underground comics, punk and skate graphics, and known for a steady run of collaborations.

The pages

desktop1440 x 900

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

mobile390 x 844

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

Palette

Surfaces, by share of painted area

78%
12.5%
78% #ffffff page
12.5% #e9d5ff secondary surface
6.4% #f3f3f3 panels and cards
1.5% #333333 secondary surface
0.8% #000000 dark bands
0.7% #d0f491 secondary surface

Ink, by share of text set in it

93.9%
93.9% #000000 body and headings
4.5% #ffffff reversed on dark
1.5% #ff00ff emphasis

Imagery, by share of the page it covers

5.6% photograph, the rest is surface

Typography

sans-serif · everything

GT-Pressura-Mono

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Brain Dead add to cart button photographed on its product page
photographed on wearebraindead.com
Add to cart
Type
GT-Pressura-Mono 14px / 300 / uppercase
Color
rgb(0, 0, 0) on #d0f392, painted over #ffffff
Shape
6px radius, 349 by 65px
Label
between, rebuild matched the photograph at 0.968
Product card
Grid
12 across, 211px wide
Image
0.8 : 1 crop, contain

Size and color

XS S M L XL XXL
Size selector
Control
radio list with text labels, 6 values
Label
Size
Type
GT-Pressura-Mono 14px / 300
Cell
54 by 30px, 5px apart
Chosen
62x38px outline box, 2px #beef6a
On load
nothing is chosen
Color selector
Control
links to sibling products, 3 swatches
Swatch
rounded square, 53 by 66px, 6px apart
Chosen
nothing marked as chosen