Developing a brand toolkit

Vague brand guidelines and different departments having their own designers can only lead to one thing... a gradual dilution of the look and feel of the brand. As senior designer I needed to bring things back together and provide a solid direction for us to head in.

Rather than leaping into design work, I started by writing out a set of design principles. As design is split across different areas of the charity, it’s important we are all working to the same goals. These principles should be at the heart of everything we design.

I then conducted a full audit of branded materials and talked to the other designers to understand how the brand was being used and what problems they faced with the existing guidelines. Comparing current design work to the principles highlighted a number of areas that could be improved.

Looking back at the original guidelines, one big area that was missing was any mention of accessibility. Accessible design was now a principle, so I made subtle changes to the brand to bring it within accessibility guidelines.

I used an atomic design methodology to communicate a new design language for the charity. The original brand guidelines listed out the basics; things like colours, fonts and photography, but I extended those to create guidelines about how the elements should interact with one another. Rather than the old ‘pick a brand colour and your design is on brand’ approach for example, I gave the colours a purpose and use case.

The colours page shows when colours should be used and how they can be combined
Guidance on how to use brand colours effectively and accessibly

Working with the other designers, we were able to use these brand foundations to build up a web style guide within the brand. This included a set of reusable components based on the concept of content and display patterns. We built a CSS framework (following BEM standards) which can be used in any online charity application to implement the brand and components.

A page showing form elements in different states
Defining styles and usage rules for common components

Using the framework, we created a website to house the brand toolkit. I was keen for the style guide to be out in the open, a resource accessible to anyone both internal and external. The site has helped ensure that everyone doing design has everything they need to produce high quality work that is on brand.