
2 / 6
Defined using 11 colours and 13 typographic styles.
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.
Ogg paired with Maison Neue elegantly complement each other. Type scales proportionally using rem values.
Along with different sizes, it was crucial to find the right balance between tight typography and messages that need more space to breathe.
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.
Reducing variation in spacing allows for a more coherent design pattern.
Regardless of screen size, content scales on a 12 column grid across 3 breakpoints.
Libraries
1
Components
46
Variants
140
3 / 6
All of the 46 components live in the same design file for instant change updates.
A thumbnail component links to a page or article. By default it comes with two supporting images and animates on load.
This component wraps the important product information at the top of the page.
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.
The end of a page is welcomed by a calm photograph of skin texture, reiterating the brand’s image.
When choosing to subscribe to the newsletter, the customer is presented with a simple modal window.
A social media component feeds curated photographs using a styled third-party widget.
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
Product available in 7 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.
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
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.
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.
Placeholder copy always indicative of real brand voice. Helpful when showing in progress mockups to client.
Custom design video player to match the minimalist styling, typography and icons.
From the outset any design solution has been aligned with code for efficiency and best outcome.
A history of all design versions and interations in a separate Sketch file.
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.
A user-friendly page explaining how the website handles privacy. Simple to navigate using FAQ style design.
6 / 6
Art Director
Copywriter
Project Manager