Dulux Digital Brand Guidelines

The main objective of this project is creating a new digital brand guideline for Dulux to help to guide and produce design that can adapt to different devices and environments. Also we were challenged to consolidate and develop the existing websites, applications and in-store apps. Our goal was creating a new brand guideline that is easy, flexible and expandable for users, designers and developers while we maintaining the brand personality. The big challenge was consolidating digital brand guideline. It was a little fractured because they were working with agencies around the world.

Skills used

  • Digital Branding
  • User Experience
  • User Interface Design
  • Animation
  • Art Direction

Taking a digital first approach to brand development

The brand is just more than a logo. In this digital era, brand must adapt different ways of approaching users and represent their personality. With increasing numbers of mobile user and wearables, brand must think an integrated brand experience in different digital environment. Digital platforms allow a brand to interact with users in new ways. a user experience is an extension of a brand’s personality. It’s becoming more sophisticated with motion and animation to create unique brand experiences that provide clarity and personality.

This project allowed me to explore interesting new ways of designing digital brand guideline. Some good examples of style guides include Google’s material design, BBC Gel, Mozilla, IBM, SalesForce among many others that are available online. I was working with a UX designer, design director and digital strategist.

Why digital branding is important

Brand design is exciting and challenging at same time. Many brand marks are designed for physical spaces or printing. Most of brand designers focus on positive/negative spaces, forms and colour when they design logos rather than the digital space. Therefore a lot of digital designers are challenged and tested while they try to bring existing brand marks or logos into the digital spaces. Whether we are graphic designers, digital designers or typographers, we should really consider when we design our logos than can adapt and transform in different environment.

Brand guideline structure

  • Elements - Exploring Brand mark, Typography, Colour, Iconography, Motion, Virtual reality and Accessibility
  • Components
  • Layout
  • Resources

Brandmark

Dulux’s is the brand that has been loved by many many people since 1918. The logo itself, it’s easily recognisable by customers and we doubt that it will change in few years. The good news is we challenged ourselves to suggest a new way of displaying the existing logo on different devices. Here is a good example: http://www.responsivelogos.co.uk

Anatomy

The full logo contains word mark, Flourish, Figure and a tagline. When it’s displayed on smaller devices, it becomes difficult to read the tagline. The full logo is displayed on desktop or larger tablet screens and it transforms into simpler forms on smaller devices.

The key to creating a responsive logo is providing full brand experience on larger displays and minimize it on smaller devices while the logo is still recognisable. Resize your browser or rotate your device to see it in action.

Grid

A grid will create a consistent foundation upon which all companies can work together to build uniquely Dulux experiences.

Proposed a fluid grid system that breaks into three main sizes - small, medium and large. With a maximum width of 1400px and a minimum width of 320px. Within these break points, content should respond to fit the view port, by scaling larger or smaller.

We employed an 8 pixel baseline grid system to help with the vertical alignment of page components. Scaling down or up in 8px or 8dp grid results in shapes cleanly aligned to pixel boundaries. Therefore you will get crisper assets without making any other changes.

Typography

Choosing a typography is a big task. It can change the look and feel or the brand very easily. I focus on three requirements when I choose a typeface: readability, accessibility and personality. Not every font is readable. It need to be tested on the browsers and different devices in different sizes, weight and colour. Online fonts should be accessible for all users. I recommend using free font recources and fonts with smaller file size. Showing a personality is more than choosing a font between serif and sans serif. Searching history and usages of a font can be also helpful.

Readability

Good vertical rhythm makes a layout more balanced and its content more readable. Using 8px baseline allowed us to create a consistent pattern. I started setting the hierarchy for the heading and body copy. Avoid using capitalized text to increase readability.

Iconography

The existing icon style wasn’t designed for digital environment. The icons weren’t scalable for high resolution screens and expandable to create new icons based on existing sets. My goal was creating a set of icons that work on all devices and sizes. Every icon has different meanings and purpose, we looked at two icon types: Product icons and system icons.

Product icons are designed to express the brand personality and represent services. System icons or UI icons are used to represent common actions like menu, print and save.

Our aim is designing unique, simple, modern and friendly icons style for Dulux. I recommend using icons if it’s only 100% clear to everyone. When in doubt, kip the icon. Stick to simple copy or use a label. Also I often looked at https://thenounproject.com/

Anatomy

The grid itself is divided into 24 squares, each measuring one unit. The padding outside the core area is 4 units.

1. Stroke terminal

2. Corner

3. Counter area

4. Stroke

5. Counter stroke

6. Bounding area

Text Labels

A text label must be present next to an icon, unless it has the following function: Search, Home, Print, Test: Menu, Cart, Favourite The label should always be usable. Don’t use an icon for an abstract such as a profile or groups, a label will be much more effective. Icons should be standardised, well recognized and have a strong visual presentation.

Digitally friendly icons

As users engage with the products on a variety of screen sizes we need to ensure that clarity is not lost. This is important to consider at both extremes of screen sizes. Icons accommodate for limited space, but are sized for interactive, touch-friendly experiences. They can indicate change, provide visual cues for the eye and increase recognition. The clarity of function should remain the same in each executions, accept the level of detail can increase or decrease.

Clearance

Adequate space around the icon is needed to allow for legibility and touch.Preferably bounding area should be X2 larger than content area. A touch target that’s 45 – 57 pixels wide allows the user’s finger to fit snugly inside the target. The edges of the target are visible when the user taps it. This provides them with clear visual feedback that they’re hitting the target accurately.

Motion

Skype is a good example of showing brand personality in motion. Skype’s launching animation and other interaction clearly show excitement, fun and engaging personalities. Their UI design is relatively simple but how content slides, expands and opens defines the experience and makes it completely immersive.

The modern digital experience no longer means scrolling through images and words on a screen. The motion and animation can communicate a brand’s personality thought a more interactive experience.

I created mood boards and defined some element examples to animate both routes. My first rule of creating an animation is ‘keeping it simple’. Instead of creating complex UI animation, I used a line, circle or square to animated it with speed, easing and shadow. By changing values of speed and shadow, it defines the personality and a unique experience.

Elegant Motion

Our first step of establishing brand motion was identifying Dulux’s personality. Deluxe provides simple, sophisticated and friendly services and products. We defined our first route called ‘Elegant motion’.

Elegant motion is simple and intuitive for the user. It should be straightforward to understand the transition and there shouldn’t be any extra frills or complexity.

Liquefied Motion

I created an diagram to explain the flowing motion based on the shape of a paint and how it might behave. ‘Liquefied Motion’ is thoughtful and visually pleasing, it should have style and expression that makes the user smile.

Motion + UI Elements

I created several animation example with UI elements. Some elements have both aspects of elegant and liquefied personalities. We come to a conclusion that the elegant motion works well with simple elements such as buttons, navigation and search. The animation should be simple and intuitive for users when they interact with these elements. When liquefied motion shows more fun and engaging personality, the animation could be used on transitions, loading screen and siwpe gestures.

Next step

Every brand should deliver a simple and flawless digital experience while it’s maintaining it’s brand personality. To find that perfect balance, UX, UI and developers should collaborate their ideas together to bring the best outcome.

Maybe in the near future, the digital brand guideline will allow us to easily have all these benefits of an online style guide. For designers, everything will be easy to search without clicking hungers of pages and downloading brand assets. For developers, they can download and reuse consistent assets without creating something new. The future of brand guideline is right around the corner, and I’m expecting designers and developers lives will get much, much easier.