Design 101: Branding
Posted in Design on: Friday, August 27, 2004 by Paul Boag
There are lots of articles on usability, accessibility, technical development and sales techniques for your web site but precious little on how to make your site aesthetically pleasing. I therefore want to post a series of articles on the basics of good graphical design. Today we will start with branding.
If you are responsible for your organisation’s web site the issue of branding is certain to have come up. How do you ensure that your web site reflects your offline brand identity? Well here are a few things to take into consideration:
The web is not the same as print
A degree of flexibility is required when portraying brand identity online. It is not always possible to accurately reflect branding in the same way online as in print material. The following issues can often cause a problem:
Fonts
Organisations often have corporate fonts which they expect to see reflected online. However not all fonts work well on screen. Serif fonts can be much harder to read online than in print and so should normally be avoided unless they are being used at a larger size for headings. Also it is important to remember that the majority of text will be dynamic and not graphical. This means that every PC which views that web page will have to have that font installed on their machine in order to be able to view it. To ensure that a user has the particular typeface the web designer will be forced to work with a very limited number of fonts. If your corporate typeface doesn’t fall into this set of universal fonts then it is best to avoid using it for anything other than graphical headings.
Colour
It is also important to note that a colour which works well in print won’t necessarily work well on the web. Colour in print is shown using ink on paper while colour on the web is displayed as projected light on a screen. Just this simple difference can dramatically alter the way the same colour appears. Combine with this the fact that printed colours are made up of CMYK while a monitor uses RGB to show your chosen colour. Finally it is important to remember that every monitor and PC graphic card will display your site with different brightness, contrast and saturation. This means your corporate colour might look fine on your monitor but appears almost black on another. It is important to take all of these factors into account when choosing how closely you stick to your corporate colour palette online.
Lost detail
Another difference between the web and print is the loss of fine detail online. I have already spoken about the problems with some fonts but it can also be a problem with logos too. The reason for this is to do with the number of dots per inch a monitor can show. When you look at a printed brochure your logo is made up of hundreds of tiny dots packed together. In fact the dots are so tiny and so close together that you cant see them. On average a piece of print work is made up of about 300 dots per inch. Now a computer monitor works on a similar principle however it can only show 72 dpi. This means that a lot of the finer detail is lost.
This can prove a real problem with complex logos that are being shown at a small size on screen. You might wish to look at ways of simplifying your logo in order to make it more web friendly.
Positioning
There is a general principle which you should be aware of when looking at how to apply your corporate branding to your web site. Users have come to expect to find the logo in the top left of the web site. This is a good idea not only because of users expectations but also because this is the first part of the screen the user will look at. Users will scan a web site from the top left to the bottom right (the same way we read a book – left to right, top to bottom).
The importance of tag lines
Your corporate branding online should also be accompanied by a tag line that clearly explains what you offer. Unlike when people read a brochure, users of your web site are much less likely to know anything about your organisation. In many cases they will have found you via a search engine and might not clearly understand what you offer. A tag line closely associated with your logo will make this immediately clear.
Find a web design company that can produce a range of styles
Finally make sure you find a web design company that can produce a site that reflects your corporate style. It is surprising how many web design companies have a very strong "house style" and find it hard to tailor their graphical style to match yours. Make sure your web designer has a broad portfolio of different styles or that their "house style" is inline with what you need.
Next time we will look at colour palette and how to go about choosing the right colour palette for your web site.
