Creating brand design guidelines for websites and graphics

In a world were brands dominate our every day life it has become essential to stick closely to brand guidelines.

What are brand guideline?
Brand guidelines are a blueprint of how a corporate identity should be used, and how all literature and material that is produced by a company should look.

These guides form the basis of making a coherent image for a business, so that its public image is consistent.

For smaller businesses these guidelines can be formed of just a list of fonts and colours that should be used. Where as for larger businesses and corporations these can be entire document, almost like books in some cases, of positioning of ideograms with text, alternate versions of logos and when to use what colours.

This may seem a bit extreme, but in today brand saturated world it could mean the difference between being successful and falling in to obscurity.

Branding isn't limited to the design and imagery of a business, in fact it covers all aspects of the business, from how it portrays itself to and interacts with public to how its services are sold. In fact its every part of the business and how its portrayed to and perceived by the public or its market. Its the life and soul of the business, without it the company is nothing. For the purposes of this article we are focusing on the design and marketing side of branding.

Can Branding really influence people?
People prefer to buy and trust what they know. Think of any large corporation and you will imagination their brand or logo instead of what they actually do, or think of an industry and the leading companies brand will immediately entire your mind. For example, take soft drinks, first company people think of is Coca-Cola, with its iconic red and white branding.

This is the reason why it is hard for newer businesses to get their foot in the door when competing against well establish brands.

Branding isn't only for the large global companies. Every business needs it!

Whats in Brand Guideline?
Guidelines are a list of rules, and diagrams stating what should be done to make all products, advertising and literature produced for a company look the same.

The main focus is normally on the logo. These rules will usually state:
- how it is made up, listing the elements of the logo,
- what colours it uses (normally stating pantone colour reference numbers),
- which typefaces should be used, including weights and heights
- its positioning on a page
- alternate version for different situations and various coloured backgrounds,

Other things the guidelines may cover include:
- uses of Sonic Branding, the soundbite that is often used in advertising (think Intel, PlayStation, XBox)
- which typefaces are to be used in all documents
- Difference between internal and external uses of the branding
- Use of branding in different regions or countries.

Why is important to have a guide?
In many cases a business will need to use outside contractors to produce promotional material, such as web sites, advertising and promotional marketing products. In these cases a logo will be given to the contractors as a computer file and they will produce the designs and artwork required. Without a set of guidelines, the logo could be used in any number of ways, even altered to suit the situation, it is completely down to the designers interpretation of the brand. With guidelines they will receive exact instructions on what they can and can't do with the logo, and get a better idea of how the design should fit together. It also means that the company will have a better idea of how the design they receive for their project will work.

How does this work for the web?
Guidelines can strongly change the design and functionality of a website or the design of a marketing campaign. It will instruct the designer to focus on different aspects of the business and use colour and form to match the brand.

Without a guide the designer has to work on their own knowledge and perception of the brand, and also any other existing design work the business has had (which in turn could have been the result of another designers perceptions).

With a guide the designer can produce something that portrays the company image exactly, and will have a strong matching theme that will run through all material produced.

Its simple really.

How to create a brand guideline?

1. Design a corporate identity.
A strong logo that is versatile and unique. Sounds simple but this can be the first hurdle that many fall at. Remember that the logo will have a lot of uses not just looking good as a logo.

2. Design variations.
Now you have the corporate identity, you now have to think of its uses. You should design many variations of it for many different situation, including:
- for use on a light background colour
- for use on a mid background colour
- for use on a dark background colour
- a one colour version
- a solid colour version (no tints or gradients)
- a one colour solid version
- a text only version
- for use in a small area
- for use in an area with a large width and small height
- for use in an area with a large height and small width

There are many more version you could include. The idea is to try and cover as many situations as you possibly can.

3. Break it down
Breakdown the logo in to shapes, and show how it all lines up with different parts of itself. If the ideogram (shape/image part of the logo) is to the left and aligns with the begin of the text you need to show this.
Do a diagram showing all the alignments. These are usually shown using a simple dotted line that runs along the alignment line.

4. List the typefaces
You have to think what font will be used for what. Clearly label the font used in the logo. Then say what headers should be, what body text should be and so on. Remember it should apply to print and web situations.

5. Colours
Write a list of the colours used. Provide:
- Pantone Reference Numbers
- RGB references
- CMYK references
- Hexadecimal references
- the percentage of any tints/transparencies used
Also it could be beneficial if you break down the logo in to is coloured sections. One idea is to do a version made of a dotted outline, then repeat it with one section coloured in and put the information for that colour with it.

6. Think of the Web
You may be required to include information on how the brand is carried through on to the website. You will have to think of what people that work on the website will need to know. And how it will work on each page. Obviously this is hard work, but it will ensure that the developers stick to the design and brand.
Include as much information as possible, ensure that you:
- state column widths as percentages or pixels.
- Show each state of buttons/navigation (normal/over/down/clicked/visited)
- state heights of elements.
- alignments. How different objects should align
- colours, what is used with what and how.

7. Graphic Design
The uses in graphic design are endless, but you should come up with the main situations in your head. For example:
- how the logo will sit with other elements
- is overlaying the logo on an image ok, or should it be placed on solid colours only.

8. Branded Promotional Products
This is where many logos and brand guidelines fail
Look at as many different promotional products as possible... pens, rulers, keyrings, clothing (the list is endless). Look at their colours, print limitations and print areas. Do your guidelines cover every situation you are finding. Small areas, dark background, solid colours only. If you come across something you hadn't thought of add it to the list for variations to the logo.

8. Review
Now you have finished... well nearly.
Go back and read through it all. ensure you have covered all the situations and uses you can think of. This doesn't mean design something for every possible situation, just think whether your instructions demonstrate what should be done in that situation.

If there is something you want to ensure always happens, or never happen... Write it down.
Designers, developers and artworkers are not mind readers so you have to ensure your design stays as you intended.

Related Links

Bloomberg Business Week - a practical guide to branding
Wikipedia - Brand
Wikipedia - Graphic Design
Wikipedia - Web Design