Updating your brand? 8 ways you can embed digital into your brand guidelines

One of the biggest issues surrounding charitable giving is trust.

Trust in charities has decreased significantly since 2016, according to Charities Aid Foundation’s 2019 report into UK giving, with a drop from 51% to 48% of survey respondents believing charities to be trustworthy. 

A strong, consistent brand narrative throughout all touch points is a crucial part of building and sustaining trust with audiences – and this includes digital.

According to Lloyd’s Consumer Digital Index report, 62% of people in the UK are ‘digital first’. They shop, stream and manage their money online using various devices with different screen sizes and resolutions. 

Reason Digital’s report into the new rules of digital engagement tells us that online donations are increasing, with the number of people donating online vs offline almost equal for the first time, and predicted to overtake traditional offline methods.

However, in the 10 or so years I have been working with charities, I’ve found that brands’ digital representations are very rarely taken into account, beyond a quick homepage or social media post mockup, in and amongst page upon page of mockups of posters, brochures and even business cards. 

In one recent rebrand project, the branding agency’s presentation led with a mockup of the new logo on a flag. Really people?

There are many issues with print-first branding. From completely inaccessible colour palettes to typography choices that only accommodate 10 characters on a screen, to layouts that break usability best practice – digital creatives have seen it all.

If your organisation is about to go through a rebrand or brand refresh, here’s a list of things you could discuss with your branding agency.

1. A responsive logo

Your logo is one of the most important parts of your brand; it’s one of the first things a user sees on digital platforms. Therefore, it’s well worth investing in developing a logo that’s responsive to the space it sits in. Digital allows the freedom to experiment with how a brand is represented on any device, in any context. This means the logo should always be optimised to sit within the space.

Rigid logos that stay the same no matter the application often take up far too much real estate on smaller devices, or are too small to read. Similarly, inflexible logo placement rules often lead to usability issues or constraints on important UI features when they’re applied to digital interfaces.

How the Manifesto logo adapts

We are seeing a movement away from complex wordmarks to simple icons, from wide, horizontal formats to flexible stacking, with some logos changing location and colour to suit the environment in which they are placed. Look to brands such as Spotify and Airbnb, who’s logos not only respond and vary, but coexist in harmony with their environment.

2. An accessible colour palette

All too often, brands created with a print-first mindset end up developing a colour palette that needs to be adjusted for digital. 

Give RGB values and hex codes for your colour palette as well as CMYK and Pantone values. Consider WCAG 2.1 guidelines when composing a colour palette; most of our clients aim for AA or AAA. This has huge implications on the colours that are considered safe to use on the web, and how they can be used together.

There are a variety of free tools you can take advantage of to develop accessible digital colour palettes, such as this colour contrast checker and this colour palette creation tool from Adobe, designed to help with colour palette selection by using presets based on the rules of colour theory.

Colorable colour contrast checker

3. An appropriate colour palette

What works for print might not work in digital. A neon pink block of colour that works so well on the front of a beautifully printed booklet might  look eye-achingly bright when lit up for the world to see on an iPad. 

This shouldn’t necessarily limit your options.  It might be that your goal with use of colour is to be disruptive, or convey energy. When applied to digital, in certain places this can feel appropriate, but all too often we are seeing page editors, when confronted with a plethora of bright modules to choose from, go for more toned-down options, leading to a monotonous digital presence.

Another thing to think about is how colour is used to convey areas that are interactive or clickable. Try to have one colour for calls to action uniquely so the user understands what is clickable and what is not.

4. Appropriate font selection

While an expressive and unique font is often a large part of a brand identity, there are a couple of things to consider for digital applications. 

First and foremost is accessibility. Type designer Stuart de Rozario of Fontsmith (creators of FS Me for Mencap) has helpfully offered 10 tips on choosing an accessible typeface, commenting: ‘If the type isn’t right for all abilities, the design simply isn’t inclusive.’ 

In general, I look for fonts that:

• Are clean and clear with large open counters (the holes) and even spacing between the characters
• Include characters that can’t be confused with one another (does the capital ‘I’ look like a 1, or the ‘c’ look like an ‘e’? I generally go for body copy fonts that have a humanist, or double storey ‘a’ rather than a rounded one that might be confused with an ‘o’.
• Have a large x-height, and a good difference between that and the ascenders (the long bit of an ‘h’) and descenders (the long bit of a ‘y’)

When choosing a headline font for a website, try and steer clear of handwritten fonts, as these can be hard to read, especially at small sizes. Equally, overembellished fonts can lead to confusion between characters at smaller sizes.

Things to look out for in an accessible typeface

Second, licensing. Webfont licensing pricing is calculated by looking at anticipated page views, and can get complicated and expensive. Instead of licensing a whole font family, consider choosing a few weights for larger, ‘hero’ applications, such as headings, quotes or calls to action, and supplementing with a free Google Font for body copy. 

5. A typographic hierarchy that works across all platforms

A strong typographic hierarchy is key to good UX. It can be used to break up large blocks of content into digestible chunks or to help a user identify where they are on a journey. Consider more than the traditional editorial uses for text. Look at how it will appear across all platforms, rather than just one particular execution. Perhaps look at using percentages rather than specific font sizes to ensure consistency?

6. Consideration of motion

The beauty of digital is that we can make things move and react to us. Animation can be as much an expression of a brand’s character as the tone of voice, but rarely is this thought about in brand guidelines. 

Think about how your logo might animate on social media videos, how you want type to animate in and out. What other brand devices do you have that might need consideration? How can you ensure consistency of brand experience across all your touchpoints without having some basic rules in place?

Our Senior Video Editor, Maria Padro had this to add: 

“Motion is one more ingredient that can’t be separated from the others. All the branding tools (logo, font, colors, shapes…) work together towards the goal of expressing the brand’s main values and character.

Motion is not only about space but also about time. Time offers the chance to consider one of the most important motion principals: Pace. Or, in other words, what’s the rhythm of the brand?

The motion potential lands in its capacity to add storytelling and therefore reinforce the brand values alongside the feelings and emotions linked to the brand.”

Manifesto’s brand devices animated to full effect, helping us to express our own unique character

When it comes to interaction design, where there is limited space available and the first priority is getting information to the user, animation plays as much of if not more of a key role in conveying a brand than say, imagery. Think about how elements on a page might animate in, or what happens when users open or close your menu. Roo, by Planned Parenthood, has a very clean and basic interface, but conveys huge amounts of warmth through animation.

Roo

7. Realistic image guidelines

Don’t rely on photographic content or a certain illustration style unless you know you can obtain it at volume or at short notice. Some charities have access to a plethora of beautiful image and video content that they can use to bring emotion to their branded content. Some may occasionally be able to commission a beautiful set of illustrations for a brand project, but struggle with choosing imagery that sets the right tone, or feels inclusive. This often leads to supplementing image libraries with disparate styles of stock imagery.

If you know that getting hold of appropriate imagery is going to be an issue, look at other ways of conveying warmth and emotion within your brand guidelines. Perhaps commission an illustrator to create a series of illustrations that can be built upon, or reconfigured in new and interesting ways. Or look at type-led layouts. 

Another way of unifying disparate imagery is to combine elements of illustration and photography into your imagery guidelines. Flo uses a combination of photography and illustration, some full photo, some full illustration, some somewhere in between. Combined as a set, these all feel harmonious and convey the brand’s personality without the struggle to find or source the right photo every time.  This comes with its own set of resourcing problems, but if you have an in-house design team, it could work.

Flo’s Instagram feed

8. Look to the future 

Scrap the static PDF and bring your guidelines online. A fully digital, visual design language that evolves with your digital presence is a much more efficient, futureproof way of working. Starbucks’s creative expression allows them to ensure they “bring purpose and cohesion to every interaction customers have with our brand.” 

Take a look at industry leaders, such as Airbnb, Spotify, Google,or the BBC. These organisations are simplifying and refining their brands, incorporating their own unique design systems, so that they not only work for now, but can evolve and grow for tomorrow. 

“Because the system is so flexible it can go anywhere Spotify goes from screens, to print, to environments and interactive experiences”

Leyland Maschmeyer, creative director at Collins

 

We’re seeing more and more of these systems being rolled out in the charity sector. Barnado’s design system combines a pattern library with design principles and rules to follow, and RNLI’s creative toolkit provides a thorough framework for decision making that doesn’t restrict creativity. 

“We want our design system to be a living, breathing entity that grows and develops alongside us. This is the base foundation for us to improve and build on and I’m so excited to be part of it!”

Laura Pledger, Digital UX Project Lead at RNLI

 

Recently we worked with The Royal British Legion to develop a pattern library based on atomic design principles, allowing site editors the use of modular components to craft compelling brand stories which weave through the entire site, unbound by restrictive page templates.

From pattern libraries to digital brand guidelines and design systems, we can work with you and your branding agencies to realise your brand within the digital space in a way that’s appropriate for your organisation and sustainable for the future.

If you’re in an organisation who has brand guidelines that aren’t digital friendly drop us a line to talk about how we can help you to extend them to encompass your digital channels.