Completed in (hours)
2 / 6
Utalitarian branding that let’s their products shine.
A functional, minimalist greyscale palette with only 6 colours.
A well directed library of photographs that can be cropped to either landscape, square or portrait ratio.
Simplified spacing rule that goes up in sets of ten increments.
Regardless of screen size, content scales on a 12 column grid across 3 breakpoints.
3 / 6
All of the 86 components live in the same design file for instant change updates.
A set of “step” components have been created to guide the customer through instructional articles.
The hero component lives at the top of the page and highlights the latest message or promotion from the brand.
A product listing page is a dedicated page for a line or category of products.
Each product listing page features a hero, description, more information inside an accordion and links to products.
Related products is a carousel of similar products that display on the product listing and article pages.
The footer houses all the basics and legals as well as links to social. This is also where one can switch locales and languages.
A search with suggestive results that works directly from the menu. Customers search for specific products or articles.
On desktop the menu drops down from the top to reveal more options, whilst on tablet and mobile it is a two-step process.
With a lot of editorial content, it was crucial to create a seamless reading experience. Made up of blocks, content creators can easilt build articles that always look great.
The shopping bag component appears in either full-screen or pop-over view.
4 / 6
Available in 19 languages and 34 countries.
Translated into 19 languages, the design is built to work in both left and right-to-left orientations.
The product became available in 34 countries from the outset to meet the requirements of such a global brand.
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.
Each design element has been mapped against code and turned into a component, including text sections.
Custom Google Maps API styling for store locations.
In-depth styleguide with design examples for developers and stakeholders.