Taking a brand online
Posted in Design on: Friday, July 6, 2007 by Paul Boag
“and here is our style guide”… thump! A huge tome lands on the desk in front of you. When it is written entirely for print, how do you begin to turn it into something that will work on the web?
Of course not all style guides are “huge tomes”. Some are nothing more than a logo and some colours. However, with only a few rare exceptions, they all tend to be written with print in mind. Sizes are set in millimeters and not pixels, logos don’t display well at 72 dpi and colours often just don’t work well on screen.
Many designers feel that style guides limit their creativity, but I would argue that actually you have to be extremely creative to get some guides to work for the web! Below are 4 areas that can be particularly challenging and a few pointers about how I deal with each of them.
Typography
Style guides often set fonts and rarely are those fonts as universal as those found on the web. Generally speaking there is not much you can do about it except explain the limitations to the client. Normally speaking the client will accept the inevitable.
However, once in a blue moon you come across a client who starts insisting. He talks about having headings as images so you can set the font.
Although it is possible to work around the limitations of web fonts using techniques such as sIFR you also need to consider legibility.
The trouble is that often the fonts selected in style guides are picked because they look good in print. However, not all fonts that look good at print resolution, work when reduced to the screen. They often pixelate and become difficult to read especially at smaller sizes.
If you do use corporate fonts make sure they are used at a reasonable size in order to maintain legibility.
Layout
Layout can be another tricky area that is often included in a style guide. The guide might suggest a 3 column layout or stipulate the position of the logo. Although where possible it is good to stick with these recommendations, you should not do so when they conflict with web conventions.
For example I recently worked on a project where the style guide specified the logo should be positioned top right. Unfortunately it has become a convention on the web to display the logo top left and the search top right. Both myself and the client agreed that conforming to this web convention was more important that sticking rigidly to the guidelines.This decision was made easier by the fact that we had stuck very closely to the guidelines in other areas.
Another thing to be wary of in regards to layout is that guidelines often have a bias towards A4 portrait style layout. It also works on the assumption that you have pixel perfect control over positioning. Neither of these assumptions are correct when it comes to the web.
In short I think guidelines about layout need to be taken with a huge pinch of salt. It is extremely hard to replicate them faithfully on the web and as long as other areas of branding are better represented then their absence will not damage the brand online.
Logos
Unfortunately, where you maybe able to get away with changes to layout, you rarely can when it comes to the logo. This can prove an incredible challenge when the logo wasn’t produced with the web in mind. A poorly designed logo can often become illegible when reduced down in size.
Although I sympathize with designers who have to deal with “bad” logos, I would argue that a logo is so central to an overall brand identity (which extends way beyond the web) that changing it is out of the question.
However, although you cannot “change” the logo as such, minor tweaks to correct poor web rendering is possible. I have been known to tweak font size, weighting and spacing in order to aid legibility at smaller sizes. I have also been known to make minor changes to colour which brings us nicely onto…
Colour
Gone are the days when we worried about the web safe palette. However, that does not mean we can now apply colour guidelines without a second thought. There are still 2 major considerations to take into account when working with colour guidelines.
The first is the differences you see in how colour is displayed. I have spoken about colour display numerous times before so I wont repeat myself here. However, the fact that colour can often appear either lighter or darker on some monitors does mean that certain colours that look great in print (where its displayed is carefully controlled) will look terrible to some users.
The only solution to this problem is to manually adjust colours so that they sit nearer the middle of the brightness range. Light colours are made darker and darker colours lighter.
Another aspect of colour I have talked about before is colour bleed. This is explained brilliantly in a 24 ways article by Jason Santa Maria. In essence it means the smaller the text the more the colour of that text is influenced by its surrounding colour. Text on a white background becomes lighter and text on a black background becomes darker.
Again in order to counteract this problem it maybe necessary to manually adjust the brightness of a colour when used on smaller text. You cannot rely solely on the pantone numbers supplied in the style guide.
In conclusion
The key to successfully bring a brand online is to pick and choose your battles. Keep in mind the ultimate aim, which is to associate the website with other marketing collateral in the minds of the target audience. Making this association does not require compliance with every aspect of a style guide. If you comply closely in some areas, this can give you more flexibility in another area without significantly damaging the brand.
2 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Paul as I was reading this it occurred to me that these headings – Typography, Layout, Logos, Colour – would make good sections heading if I was to try and write a style guide for a web site.
Are there any other headings needed? Can you point me towards a well structured template for a web style guide?
Thanks!
I enjoyed reading this. I’m a subscriber to your podcast as well and have found your material useful for my online marketing firm. I’ve linked to your post in my blog as well.
Actually, clients of mine have been impressed when I present examples of online style guides. It has on many occasions, helped me ink the deal (though not to be confused with the developers who started popping aspirin at the mention of it lol)