Tresemmé

Year

2016

Completed in (hours)

436

Agency

tres-thumbnail

/ 6

Overview

Tresemmé is a well-known American brand of hair care products owned by Unilever. With creative direction from Spring, myself and another supporting UI designer created a 100% componetised design to fit the framework of a multi-brand CMS platform.

2 / 6

Foundation

Utalitarian branding that let’s their products shine.

Utalitarian colours

A functional, minimalist greyscale palette with only 6 colours.

tres-colours

Photography that gets cut

A well directed library of photographs that can be cropped to either landscape, square or portrait ratio.

tres-photography

Fashionable typography

A bold, magazine style Nimbus Sans combined with functional Univers give the brand its look.

tres-typography-2

Simple spacing

Simplified spacing rule that goes up in sets of ten increments.

tres-spacing

Functional grid

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

tres-grid

Libraries

1

Components

86

Variants

296

tres-device-mockup-6

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.

tres-step-by-step

Hero

The hero component lives at the top of the page and highlights the latest message or promotion from the brand.

tres-hero-1

Product listing page

A product listing page is a dedicated page for a line or category of products.

tres-plp-1

Product listing page

Each product listing page features a hero, description, more information inside an accordion and links to products.

tres-plp-2

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.

tres-footer

Search

A search with suggestive results that works directly from the menu. Customers search for specific products or articles.

tres-search-2

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.

tres-shopping-bag

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.

tres-languages

Around the world

The product became available in 34 countries from the outset to meet the requirements of such a global brand.

tres-locations-2

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-hand-horns

100% components

Each design element has been mapped against code and turned into a component, including text sections.

icon-google-maps

Custom maps

Custom Google Maps API styling for store locations.

icon-styleguide

Detailed documentation

In-depth styleguide with design examples for developers and stakeholders.

/ 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