Skip to main content

← The UX Guide for Luxury Ecommerce Vol. 1

watches · not disclosed ·

Bell & Ross

The Bell & Ross 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 26.8 percent of the page, typeset in Roboto Mono, rift.

The pages

desktop1440 x 900

Bell & Ross homepage on desktop, not disclosed luxury watches storefront captured at 1440 x 900
Homepage
Bell & Ross collection: accessoires on desktop, not disclosed luxury watches storefront captured at 1440 x 900
Collection: Accessoires
Bell & Ross product page on desktop, not disclosed luxury watches storefront captured at 1440 x 900
Product page

mobile390 x 844

Bell & Ross homepage on mobile, not disclosed luxury watches storefront captured at 390 x 844
Homepage
Bell & Ross collection: accessoires on mobile, not disclosed luxury watches storefront captured at 390 x 844
Collection: Accessoires
Bell & Ross product page on mobile, not disclosed luxury watches storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

64.1%
32.4%
64.1% #ffffff page
32.4% #171717 dark bands
3% #f2f2f2 panels and cards
0.5% #000000 dark bands

Ink, by share of text set in it

60.5%
25.2%
8%
60.5% #000000 body and headings
25.2% #bfbfbf secondary
8% #595959 emphasis
6.1% #ffffff reversed on dark
0.2% #737373 secondary

Imagery, by share of the page it covers

26.8% photograph, the rest is surface

Typography

sans-serif · everything

Roboto Mono

sans-serif · accent

rift

of all text on the page

100% sans-serif

Ecommerce components, rebuilt to spec

Add to cart
Type
Roboto Mono 14px / 700 / 1.12px tracking / uppercase
Color
rgb(255, 255, 255) on rgb(0, 0, 0)
Shape
0px radius, 15px 25px padding, 46px tall
Width
827px as rendered
<img src="//bellross.com/cdn/sho <img src="//bellross.com/cdn/sho <img src="//bellross.com/cdn/sho <img src="//bellross.com/cdn/sho <img src="//bellross.com/cdn/sho
<img src="//bellross.com/cdn/sho <img src="//bellross.com/cdn/sho <img src="//bellross.com/cdn/sho <img src="//bellross.com/cdn/sho <img src="//bellross.com/cdn/sho
<img src="//bellross.com/cdn/sho <img src="//bellross.com/cdn/sho <img src="//bellross.com/cdn/sho <img src="//bellross.com/cdn/sho <img src="//bellross.com/cdn/sho
Product card
Grid
4 across, 253px wide
Image
0.8 : 1 crop, cover
Line 1
14px / 400, rgb(0, 0, 0)
Line 2
14px / 400, rgb(0, 0, 0)
Line 3
14px / 400, rgb(0, 0, 0)
Line 4
14px / 400, rgb(0, 0, 0)
Line 5
14px / 400, rgb(0, 0, 0)