Simple steps to branding bliss
Branding is used by organisations to distinguish between products or services. Every organisation should have a current set of brand guidelines that details style and tone across each platform.
This helps the organisation communicate with their customer clearly and consistently, while promoting their ethos and values.
Branding guidelines should include a web style guide, giving specific advice for the browser. Excellent examples come from Lonely Planet, MailChimp, Uber and Gov.uk.
Key elements of branding
Brand information: An overview of the values of the brand. This may include a mission statement of brand purpose, which gives both meaning and context.
Text and tone of voice: The copy used on the website, across all channels and social media, should speak to the audience in a consistent tone of voice.
Typography: Typography has a massive role in representing a brand, and makes an immediate first impression. Good typography inspires confidence and trust. Basic typography decisions include font styles and weights, line length and line height.
Logo placement: Brand guides should advise on logo positioning, including white space guidance. The rules for the web might be different to other channels. For example, the NHS branding guidelines places the logo in the top left, while stressing a ‘top right’ position across other media.
Imagery: The choice of images - if used at all - play an important role in communicating a brand message and values. Brand guidelines should show examples of images in place.
Colours: Brands and colour are closely linked because colour offers an immediate method for conveying meaning and message without words. Good branding guidelines will specify the palette colours for different media, such as hex codes and RGB for the screen, and CMYK and Pantone for print. A few practical tips for branding web applications
Branding assets: We may need to create additional assets, such as a customised logo for an intranet. If this is the case, the graphics should be created in a quality format (high resolution bitmaps or scalable vectors), because it is likely that the assets will be needed for other channels in the future. Similarly, any stock images should be purchased in a high quality format because they need to be re-purposed further down the line.
New style guide: If we are creating a new web application or intranet, we need to create a specific style guide that shows how the branding should be applied, along with any technical guidelines specific to the app.
Custom fonts: can be included using the @font-face CSS rule. You’ll need to account for loading times, licensing agreements and browser compatibility, and provide suitable fall-backs if necessary.
CSS: A CSS pre-processor (such as Sass) can help with managing branding colours, and allowing a consistent colour palette throughout a set of stylesheets.
Text and tone of voice: Remember to pay attention to micro copy, such as instructional text, field labels and confirmations.
No brand guidelines?
It’s not a perfect world, and sometimes we need to apply branding elements to a website or intranet without an existing style guide.
In this case, we can work closely with the brand manager and comms team to figure out the basics quickly. We can examine existing web and print publications for branding clues. Colours and fonts can be sampled from print documents and website stylesheets, and we can try trawling a website for images and other documents. This can help find branding examples, plus good quality assets to repurpose.