I know what you're thinking – that headline sounds like something you should have been reading 10 years ago, right? But how many times have you started working with a new client and been sent the outdated brand guidelines PDF to review?
We've all been there. 98 pages of print-focused layout rules, logo exclusion zones, CMYK references … Then right at the back, you'll find it tucked away: 'Digital usage'. Normally consisting of two pages of inadequate information, leaving you asking many questions.
It seems crazy that in this day and age the digital environment is still considered secondary to above-the-line communication when it comes to providing guidance on how a brand should be visually represented. Digital channels are at the heart of most brand communication nowadays, and are certainly the places where higher volumes of people will encounter a brand. Providing some guidance on how that brand should live and breathe online is essential.
Are they really needed?
Most creatively minded folk would argue that the lack of rules and guides is no bad thing, but from a brand's perspective it can be damaging to have so much inconsistency across its digital output. At Delete, many of the global brands we work with have a roster of digital agencies they often work with. This only reinforces the need to establish some base-line guides for people to work from.
So why is digital commonly neglected? Brand guidelines have traditionally been the output of branding agencies and design firms where digital communication is not a focus. This means the digital 'section' of a style guide is often not fit for purpose for the multi-device, multichannel world.
Just think about the multitude of places that exist online where a brand can be visually presented: a web page, mobile page, mobile app, email footer, Facebook ad, display banner, social post ... the list is endless. Of course, we're not just talking about a static presentation either. There's animation, audio, transitions – none of which can be delivered in a PDF document.
What can we do about it?
It's up to us, as digitally minded creatives, to challenge the traditional approach. There will always be an opportunity to have this discussion with your client early on. A few simple questions should soon make them realise work is required: “How should the logo behave at different responsive breakpoints? Is there an icon fallback for small screens? What are your web typography standards?” Clients will likely be looking to you for guidance on these issues.
Producing digitally focused guidelines is an opportunity for you to grow your relationship with a client, as you will be essentially operating as a digital brand guardian. If you're involved in a redesign project or even a one-off campaign, it's worth pitching this as a key deliverable.
So how should you approach these digital brand guides? Well, for a start they shouldn't sit inside a PDF document! It's essential the information is displayed in the medium in which it will exist. A simple HTML framework will allow you to categorise your elements clearly and provide code snippets where possible, to reduce the margin for error.
Things to consider include: logo usage (dimensions, colours, padding), responsive logo views, logo icons (app icon, favicon), RGB colour references, CSS typography styles, the standard masthead and footer, iconography, buttons (primary CTA, secondary), patterns (overlays, backgrounds), grid structures, form styles, animation examples, video opening and closing frames, social post examples and accessibility standards.
Providing examples of usage will also help any agency or external partner understand the dos and don'ts. Downloadable digital assets will also prove handy: PNGs, SVGs, font files and so on.
Ideally, rather than ending up with two sets of brand guidelines, you want to have the print-focused guides accessible from this web page, too. That way you ensure there is one central point for accessing this information, which can be updated as required.
Picture this – you start working with a new client and you receive the link to its online brand guidelines. A slick, responsive style guide containing all the basic rules, code snippets and digital assets you need. And then down at the bottom, you'll find a downloadable PDF containing a few pages of print rules. Now that would be nice.
Words: Tom Dougherty
Tom is UX director and partner at Delete, where he works with clients including Red Bull, Expedia, IKEA and Unibet. This article originally appeared in issue 267 of net magazine (opens in new tab).
Liked this? Read these!
- Why you should be using Lean style guides
- The best photo editors
- The designer's guide to working from home