Lee Batchelor


Digital should be at the heart of visual identity

Thursday 29 Jun 2017, admin

How is it that branding agencies are still getting away with making digital an afterthought when it comes to visual identity?

Coming from a design background, I’m just as keen as the next person to create beautiful looking products. But to make designs truly beautiful you need to go beyond the aesthetic and make them useable and accessible to all.

In the same way that over the years web development has moved towards a mobile-first way of working, the time is long overdue for branding agencies to start thinking digital-first.

I’m sure there are some agencies out there who are already doing this, but I’ve lost count of the times when I’ve been presented with brand guidelines which completely disregard the online world beyond maybe a token mockup of a website homepage. If a consistent look and feel across all channels is important (and it probably should be), the practicalities of working in digital need to be thrown in the mix early on in the process.

I appreciate that branding and web development are separate disciplines and a lot of agencies will specialise in one or the other. But if you’re working in branding, whether you’ll actually be involved in the design and development of any digital products, you need to make sure you understand the considerations of working in digital. Whatever guidelines or assets are produced need to be fit for purpose to use online.

Thankfully, the tools are our disposal with regards to web development now give us infinitely more options when it comes to creativity than they did even a few years ago. There are still some important considerations that need to be taken into account.


This is probably the number one offender - brand colours that don’t offer sufficient contrast to be accessible and therefore can’t be used online.

Your nice new brand guidelines include a beautiful palette of colours to use. Unfortunately, nobody bothered to check whether any of them could be used in a combination that passes the minimum colour contrast levels recommended by the Web Content Accessibility Guidelines. As a result, all the colours you’re using online are darkened to increase contrast and pass the standards but don’t match any of your offline materials (which probably aren’t particularly user friendly either)..

Alternatively, you can take accessibility as a starting point and ensure that whatever goes in the guidelines is appropriate for all audiences. And it’s the audience that’s key here. Approximately 1 in 12 men and 1 in 20 women in the UK suffer from some form of deficiency in their colour vision. Depending on your sector, that’s a sizeable proportion of your audience that you might be alienating.

There are plenty of tools out there that will test colours against the guidelines and let you know whether your combination passes the AA or AAA standard or whether it fails.

It's also worth bearing in mind how the brand colours are going to be used online. Consistency in the colours used for elements of the page that users can interact with will help them navigate the site.


The options that are available now when it comes to typography online are almost limitless. Long gone are the days when you could only use a handful of system fonts on a website. Now, you can licence almost any font for use online, so there's a good chance that you'll be able to consistently use the same typeface across your offline and online materials. There are some important considerations though.

Every additional font used will have an impact on the performance of your site. If you've got multiple typefaces in various weights all being downloaded by users, that's going to add up to a slow site, especially for users on a slow connection.

It's also worth bearing in mind the cost of licensing the fonts. Usually, the cost for using a typeface online will depend on the number of monthly page views. For a site with a high volume of traffic that can add up. I once saw an example where the brand guidelines for a charity suggested using a particular font online. The only problem was that, given the average number of visitors to their website, the annual cost for using that font would have run to the tens of thousands of pounds - not a particularly great way of spending charitable funds.

Fortunately, there are loads of free fonts available to use online, with Google having an especially wide selection. Considering one of these options when choosing a typeface to use in your visual identity will make it more cost effective to ensure consistency of branding across all channels. They also often come with the added bonus of being able to be installed on a computer free of charge, which means that everybody in the organisation can use them without being the bank.

The accessibility of your text is also an important consideration. For users with visual impairments or learning difficulties certain typefaces are a lot harder to read than others. You should avoid large blocks of text in uppercase and any kind of design choice that means you have to have text saved on an image rather than in the page. Anybody using assistive technology like a screen reader will be unable to read the text. If you are overlaying text on images, the choice of image is important to make sure there's sufficient contrast and the text can be read.

Design elements

Brand guidelines will often include examples of printed collateral like business cards, letterheads etc. but digital elements tend to be less well represented.

It's worth thinking about how the brand will translate online, and that should go beyond a mock-up of the website homepage. Consideration should be given to things like calls to action, blockquotes and imagery. These are all elements of the page that can play a part in conveying the personality of your brand.

It's not just how your visual identity will be used on a website that you should bear in mind. There are other digital channels worth thinking about too. If you do email marketing, how can you get elements of the branding across within the limitations of html email? If you're on social media, how will the brand translate to profile images and header banners?

By considering options these things during the development of your visual identity guidelines, you can be sure that you'll end up with a brand that is easier to replicate online and ensure your smart new look is carried across all your channels.