Augustinus Bader

Year

2017

Completed in (hours)

568

Agency

ab-thumbnail

/ 6

Overview

Augustinus Bader is a luxury skin care brand pioneered by Professor Bader and his 30 years of experience in stem-cell research. Creative direction and photography lead by Sunshine and e-commerce digital product lead by myself with development help from Stink.

2 / 6

Foundation

Defined using 11 colours and 13 typographic styles.

Luxury colours

The colours were carefully picked to reflect the luxury image of the brand. Mixed in with rich natural tones are some speck background patterns that create a softer, organic aesthetic.

ab-colours-4

Elegant typography

Ogg paired with Maison Neue elegantly complement each other. Type scales proportionally using rem values.

ab-typography-4

Typographical hierarchy

Along with different sizes, it was crucial to find the right balance between tight typography and messages that need more space to breathe.

ab-hierarchy

Asymmetric layout

Photography steals the show in this product. To show the beautiful visuals off, we enlarged the photos up and allowed them to overlap text content.

ab-layout-2

Coherent spacing

Reducing variation in spacing allows for a more coherent design pattern.

ab-spacing-4

Responsive grid

Regardless of screen size, content scales on a 12 column grid across 3 breakpoints.

ab-grid-2

Libraries

1

Components

46

Variants

140

ab-device-mockup-3

3 / 6

Components

All of the 46 components live in the same design file for instant change updates.

Thumbnail

A thumbnail component links to a page or article. By default it comes with two supporting images and animates on load.

Product detail

This component wraps the important product information at the top of the page.

ab-product

Menu

The menu takes over the entire screen, with an animating split image view on desktop. Each varianton is designed to adjust the layout at 3 different breakpoints.

ab-menu

Footer

The end of a page is welcomed by a calm photograph of skin texture, reiterating the brand’s image.

ab-footer

Newsletter

When choosing to subscribe to the newsletter, the customer is presented with a simple modal window.

ab-newsletter

Social media

A social media component feeds curated photographs using a styled third-party widget.

ab-social

Article

Componetising article text and images into a larger pattern greatly simplified and sped up the design delivery. Tighter rules also helped with consistency of the brand's 50+ articles.

4 / 6

Localisation

Product available in 7 languages.

Latin languages

Four languages (English, Spanish, French and German) have been chosen to cover continental Europe and the Americas. In these markets customers can buy products in $USD, £GBP and €EUR.

ab-latin-2

Logographic languages

Three languages (Mandarin, Japanese and Korean) cover the markets in Asia. Customers can purchase products in either ¥CNY, ¥JPY or ₩KRW. Typography has been set in Noto Sans to accomodate for the additional character types.

ab-logographic

5 / 6

Features

icon-robot

Fully auto layout

Built using Anima’s Auto-Layout plugin for Sketch, all components are fully responsive to the input of new content and don’t require to be broken from master.

icon-tetris

Drag-and-drop

Each component is a made up smaller clusters of elements. These clusters come with pre-defined spacing to allow for an easy drag-and-drop fit.

icon-poo

No lorem ipsum

Placeholder copy always indicative of real brand voice. Helpful when showing in progress mockups to client.

icon-video-player

Custom video player

Custom design video player to match the minimalist styling, typography and icons.

icon-developer

Developer-friendly designs

From the outset any design solution has been aligned with code for efficiency and best outcome.

icon-versions

Version history

A history of all design versions and interations in a separate Sketch file.

icon-shopping-bag

Shopify checkout reskin

The website checkout process is based on a Shopify API. To keep in line with the AB branding the checkout pages have been re-skinned to match in style.

icon-hang-loose

Simplified privacy policy

A user-friendly page explaining how the website handles privacy. Simple to navigate using FAQ style design.

/ 6

Collaborators

Art Director

Copywriter

Project Manager