Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

beauty · Shopify ·

Oribe

The Oribe 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 31.3 percent of the page, typeset in itc_avant_garde_gothic, adobe_garamond.

The pages

desktop1440 x 900

Oribe homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Homepage
Oribe collection: all products excluding samples on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Collection: All Products excluding samples
Oribe product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Product page

mobile390 x 844

Oribe homepage on mobile, Shopify luxury beauty storefront captured at 390 x 844
Homepage
Oribe collection: all products excluding samples on mobile, Shopify luxury beauty storefront captured at 390 x 844
Collection: All Products excluding samples
Oribe product page on mobile, Shopify luxury beauty storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

83.4%
16.6%
83.4% #ffffff page
16.6% #000000 dark bands

Ink, by share of text set in it

72.6%
26.3%
72.6% #000000 body and headings
26.3% #ffffff reversed on dark
0.7% #757575 secondary
0.2% #333333 emphasis

Imagery, by share of the page it covers

31.3% photograph, the rest is surface

Typography

sans-serif · everything

itc_avant_garde_gothic

sans-serif · accent

adobe_garamond

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
itc_avant_garde_gothic 16px / 500 / uppercase
Color
rgb(0, 0, 0) on rgb(255, 255, 255)
Shape
0px radius, 0px 30px padding, 50px tall
Width
332px as rendered