Chase
/
Augustinus Bader
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.
Elegant typography
Ogg paired with Maison Neue elegantly complement each other. Type scales proportionally using rem values.
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.
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.
Coherent spacing
Reducing variation in spacing allows for a more coherent design pattern.
Responsive grid
Regardless of screen size, content scales on a 12 column grid across 3 breakpoints.
Libraries
1
Components
46
Variants
140
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.
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.
Footer
The end of a page is welcomed by a calm photograph of skin texture, reiterating the brand’s image.
Newsletter
When choosing to subscribe to the newsletter, the customer is presented with a simple modal window.
Social media
A social media component feeds curated photographs using a styled third-party widget.
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.
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.
5 / 6
Features
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.
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.
No lorem ipsum
Placeholder copy always indicative of real brand voice. Helpful when showing in progress mockups to client.
Custom video player
Custom design video player to match the minimalist styling, typography and icons.
Developer-friendly designs
From the outset any design solution has been aligned with code for efficiency and best outcome.
Version history
A history of all design versions and interations in a separate Sketch file.
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.
Simplified privacy policy
A user-friendly page explaining how the website handles privacy. Simple to navigate using FAQ style design.
6 / 6
Collaborators
Art Director
Copywriter
Project Manager
