Logo Design Workshop - 2

by Joe Gillespie — Nov 1, 2000

The process of creating a good logo takes a fair amount of skill and awareness of visual communication. Remember that what communicates quality and solidity to you might garner a different reaction from other people who have a closer, or more distant, relationship with the company. It is essential that you don't keep your head in the sand when designing logos, get other people's opinions and reactions - communication is a two-way thing. Obviously, the client has to be comfortable with it, but so too has the potential clientèle.

Many of the logos that I have designed have been subjected to consumer research. It's amazing what can be thrown up in focus groups, the process becomes quite an eye-opener about popular tastes. Let's just say that it is better to use such research to confirm the success of a design or to narrow down optional concepts than to allow it to force a direction or stifle creativity.


Tip: Photoshop 6 has much improved text handling over previous versions and a host of whizzy text effects but effects, whether graphical, musical or in the cinema, are never a substitute for ideas and usually, as Seven-of-Nine would say, irrelevant.

Most of my designs start out on a piece of paper. I believe that it is important to arrive at a concept without being lead down a particular path by the tools. A computer can become a barrier to creativity and will force you to think in a way that is 'in the groove' of the software you are using. You should have an idea in mind before sitting down at the screen and then use the computer to implement that idea, not generate it.

When it come to drawing up a logo, it is better to use a vector graphics program. I use Adobe Illustrator but Macromedia Freehand or CorelDRAW are equally suitable - whatever you are happiest with. The reason for using a vector graphics program, even for Web logos which inevitably end up as GIFs, will become clearer later.

Tip: In a simple logo like this the finer points of spacing and kerning are more important than ever. Never trust a program to get the kerning right, it can only be done by eye. If it looks right, it is right! Look closely at each set of three adjacent characters in turn for evenness of spacing and make any adjustments necessary.

It is always easier to spot uneven letter spacing if you turn the logo upside down! I find it easier to rotate the text 180° on the screen than to stand on my head!

The first thing you have to consider is the typeface. If you don't have the skills to create your own typeface from scratch, then you can start with an existing one. The choice of typeface is very important because the basic letterform establishes the overall character of the logo. Sans serif faces suggest modernity whereas serif faces say something about establishment. Script faces can either be formal or very informal and then there are all kinds of weird and wacky typestyles - if that is what you want to communicate about the company. There's a new set of links to free font sites in the resources section this month.

Above is a straight setting of a word in Frutiger Bold. Frutiger has more character than Helvetica or Arial, but it is still much too ordinary to be a logo by itself. I don't have any particular message to convey about a company or product in this example, this is just about basic principles.

Having chosen a suitable typeface, look at it in different ways. Caps, lower case, upper and lower. Look for interesting letter pairs or combinations that can be exploited to make the logo more distinctive and memorable.

Selecting individual anchor points and nudging them with the arrow keys allows fine adjustment of letters.

One trick is to join up certain letters in the word. In the past, type designers produced ligatures to give their fonts more character but very few digital fonts have the luxury of alternative 'expert' characters. Many low cost or free fonts don't even have full regular character sets.

Natural candidates to join in this word are the 't' and 'y' which can be run together very easily. This is where the vector program comes into its own. It is just a matter of selecting two anchor points and nudging them sideways with the arrow keys. Whether you are manipulating straight lines or curves, fine adjustments like these are much more difficult to achieve in a bitmap-based program. The beziers or splines in the vector program will help keep your curves smooth too.

'Outline stroke' converts a stroke to a filled area that can then be merged with the original type body.

Almost any logo will benefit from being 'beefed-up'. Here, a stroke has been added to the basic fill outline giving a bolder, stronger, feel to the logo. I've increased the stroke width gradually until the letters 'kiss' but be careful, too much, and readability can be compromised. Never underestimate the value of negative space.

Having established the optimal stroke thickness, the stroke and fill are merged to produce a single vector outline version of the original typeface. It is now no longer editable from the keyboard but can be further modified by adjusting anchor points.

Tip: Sticking to Web-safe colours is not generally as essential as it used to be, but using them for logos will still give the most consistent and predictable results across different browsers and colour depths.

Colour is also a very important factor in logo design. It might well be that your logo has to work in monochrome in some situations - gold printing on a give-away pen, etched glass on a foyer door. Fortunately, there aren't many restrictions about using colour for Web-based logos.

Individual colours can be distinctive, but colour combinations are even more so. It is interesting to note that all the 'famous' logos I showed last month featured red and blue as their main colours. Well, you can't go far wrong with red and blue but remember also what I said about being different. Some colours are harsh and unrelenting, some are soft and gentle - what are you trying to communicate? Use colours that are appropriate to your message.

Tip: Peculiarities such as clipping the characters, as I've done here, goes a long way to making the logo less 'ordinary' - and that is the whole point of the exercise!

If a logo is likely to be applied to fussy backgrounds, like patterns or photographs, it should be separated from the confusion of the background in the same way that a picture frame and surround makes a painting or print stand out from wallpaper.

Here, I've put the logo inside a dark coloured lozenge, sometimes referred to as a 'control field'. This shape controls the presentation of the logo by visually separating it from the background, but the 'field' has a distinctive shape of its own that becomes part of the identity - just in the same way that the Ford cars oval and the Heinz 'tombstone' do.

This logo uses a very elegant and classical typeface - Trajan - which, on its own provides that 'timeless' feel. If you are trying to communicate 'establishment', serif capitals with a little letter-spacing usually do the trick because it is evocative of times gone by.

To counter the formality of the serif typeface, I've superimposed it on a very informal, exaggerated italic face in a receding colour. The two typefaces play-off against each other to add vitality and distinction.

Tip: Before you start to design a logo, make a simple word list of the attributes that it needs to communicate - dynamic, modern, established, traditional, friendly, monolithic - then keep comparing your design to what you have written.

This example is another off-the-shelf typeface - Hamlet - which is very 'Star Trek' in feel and helps communicate 'futuristic'. The 'go-fast' stripes are another way of suggesting dynamism being associated with fast cars and sport. There are other little visual tricks all around you in everyday life - mnemonics that trigger signals in the viewer's mind which you can put to good use in a logo to say something above and beyond what the words alone say.

But, as I pointed out last time, some of these visual tricks are grossly overused, become clichés and can do more harm than good. You know how you groan deep inside when someone starts to tell a joke that you've heard many times before? Clichés communicate naivety.

Putting some of these principles into action, this is a logo I designed a while back for a company that produces computer stationery. The main part of the word is written in a 'classic' serif typeface and letterspaced. This provides the 'established' element and says something about the quality of the company and its products.

The substitution of the two pixelated numerals for letters, the digital zero and one for 'O' and 'I', say something about the company's activities. Had the whole logo been written in the pixelated typeface, it would have been just another computer oriented company, computer typefaces are not particularly unique! If the company had any other name, the trick would not have worked.

It's this kind of 'happenstance' that you have to look for - hard - to create a logo that is truly unique. No Photoshop filter will do this for you!

This company makes electronic motor controllers and wanted to project a high tech 'precision' image. Their products take the form of rack-mounted modules, there could be one or many of them in a horizontal row. Sometimes the modules have knobs and switches, some are just blank panels. As is often the case with logos, this one had to be adaptable, it had to work on one module or on a whole row. The dots, of course, can be infinitely extended to fit any usage situation. It is not a good idea to simply repeat a logo because then it becomes a pattern. Instead of strengthening images, patterns have the opposite effect, that of devaluing their component parts.

I've created this letterform from scratch. The rounded ends of the strokes are typical of 'engineering' typefaces that have been routed into metal. I've substituted a plus sign for the 'T' in the company name and reinforced it with a strap-line, 'Positive Control Solutions'. This is another example of 'happenstance' where you find something unique about a company's name and exploit it.

Next month, I'll show some more examples and discuss the more emotive aspects of what they are saying.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float