Chase
/
Tresemmé
2 / 6
Foundation
Utalitarian branding that let’s their products shine.
Utalitarian colours
A functional, minimalist greyscale palette with only 6 colours.
Photography that gets cut
A well directed library of photographs that can be cropped to either landscape, square or portrait ratio.
Fashionable typography
A bold, magazine style Nimbus Sans combined with functional Univers give the brand its look.
Simple spacing
Simplified spacing rule that goes up in sets of ten increments.
Functional grid
Regardless of screen size, content scales on a 12 column grid across 3 breakpoints.
Libraries
1
Components
86
Variants
296
3 / 6
Components
All of the 86 components live in the same design file for instant change updates.
Step-by-step instructions
A set of “step” components have been created to guide the customer through instructional articles.
Hero
The hero component lives at the top of the page and highlights the latest message or promotion from the brand.
Product listing page
A product listing page is a dedicated page for a line or category of products.
Product listing page
Each product listing page features a hero, description, more information inside an accordion and links to products.
Related products
Related products is a carousel of similar products that display on the product listing and article pages.
Footer
The footer houses all the basics and legals as well as links to social. This is also where one can switch locales and languages.
Search
A search with suggestive results that works directly from the menu. Customers search for specific products or articles.
Menu
On desktop the menu drops down from the top to reveal more options, whilst on tablet and mobile it is a two-step process.
Article
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.
Shopping bag
The shopping bag component appears in either full-screen or pop-over view.
4 / 6
Localisation
Available in 19 languages and 34 countries.
LTR and RTL languages
Translated into 19 languages, the design is built to work in both left and right-to-left orientations.
Around the world
The product became available in 34 countries from the outset to meet the requirements of such a global brand.
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.
100% components
Each design element has been mapped against code and turned into a component, including text sections.
Custom maps
Custom Google Maps API styling for store locations.
Detailed documentation
In-depth styleguide with design examples for developers and stakeholders.
6 / 6
Collaborators
Creative Director
UI Designer
“Ed was a fantastic addition to our team. His vast industry knowledge and skill for digital design ensured our project was delivered to the highest quality in style and detail.”
Project Manager
