Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

home and design · Shopify ·

Augarten

Viennese porcelain manufactory whose origins run back to 1718, making it one of the oldest in Europe. Its tableware and figures are still formed and painted by hand at the Augarten palace.

The pages

desktop1440 x 900

Augarten homepage on desktop, Shopify luxury home and design storefront captured at 1440 x 900
Homepage
Augarten collection: florales & blätterdekore on desktop, Shopify luxury home and design storefront captured at 1440 x 900
Collection: Florales & Blätterdekore
Augarten product page on desktop, Shopify luxury home and design storefront captured at 1440 x 900
Product page

mobile390 x 844

Augarten homepage on mobile, Shopify luxury home and design storefront captured at 390 x 844
Homepage
Augarten collection: florales & blätterdekore on mobile, Shopify luxury home and design storefront captured at 390 x 844
Collection: Florales & Blätterdekore
Augarten product page on mobile, Shopify luxury home and design storefront captured at 390 x 844
Product page

Palette

Surfaces, by share of painted area

56.7%
40%
56.7% #ffffff page
40% #00205c dark bands
1.9% #9eb0be accent
1.1% #f4f2e6 panels and cards
0.2% #212121 dark bands

Ink, by share of text set in it

75.6%
24.4%
75.6% #212121 body and headings
24.4% #ffffff reversed on dark

Imagery, by share of the page it covers

28.2% photograph, the rest is surface

Typography

sans-serif · everything

Moderat

sans-serif · accent

GT Super Display

of all text on the page

86% sans-serif14% serif

The icon set

cart
search
account
menu
close
wishlist

Ecommerce components, rebuilt to spec

Add to cart
Type
Moderat 14px / 400
Color
rgb(255, 255, 255) on rgb(33, 33, 33)
Shape
0px radius, 12px 13.6px padding, 44px tall
Width
274px as rendered
Zuckerdose Mozart 40% Rabatt
Vase Stromlinienförmig, 15 cm 40% Rabatt
Vase Ei-Form, 9,5 cm 40% Rabatt
Product card
Grid
3 across, 443px wide
Image
1 : 1 crop, cover
Line 1
16px / 400, rgb(33, 33, 33)
Line 2
14px / 400, rgb(33, 33, 33)