Web design from Scratch, free online course in design for the webHome - introduction to Web Design from ScratchBasics - effective web design processTutorials - hands-on, practical lessons in designing clear web pagesCase Studies - useful examples that apply the web design principles

The Squint test

The squint test helps by giving you a quick idea of the strengths of an image when you're not looking directly at it.

Close your eyes nearly all the way, as though you were looking into bright sunshine.

As a guide, you should be able to read a newspaper headline, but not the text.

Keeping your eyes nearly shut, look at the object you want to test.

The squint test blurs edges, outline, contrast and colour.

If your logo or icon remains recognisable, it's good!


Note

When working in certain styles (e.g. metal or grunge), you may want a logo deliberately to go against these principles.

This can work fine, provided a logo will only ever feature in known formats, such as web or t-shirts.

Professional logos that are portable and recognisable in many different environments generally follow the characteristics described here.

Logos

Logos are graphical shorthand that can represent a company or product, and communicate certain characteristics.

In order for a logo to be visually effective, it must exhibit certain related fundamental design characteristics:

This article describes how to employ these simple characteristics to create a strong logo, using real-world examples.

» Example of expert logo designer: Mark Ballantyne at Eagle Imagery

Characteristic 1: Shape

A distinctive logo (or icon) has a recognisable shape, so that it is still recognisable from its outline. Your brain loves to use shape to identify things, because it can do it very quickly. (Note: this is also the main reason why white space is important).

What gives a logo distinctiveness? The outline should be simple, but not too simple, and clear. Also, meaningful elements should be clearly differentiated, with the use of white space where required.

Try the squint test on the following logos...

Examples of good shape

No matter how you treat the Apple logo, its strong outline shape is unmistakable.

Lotus's unique shape works very well, set in a circle of contrasting colour. The other meaningful shapes (word and letter-form) fit nicely inside the shape, with just enough clear space to keep the elements sharp.

Nike logo

The Nike logo ('Nike' text and symbol, or 'Nike' or symbol alone) are such recognisable shapes, that they can be displayed in almost any colour combinations.

Examples of poor shape

logo

At small scale, this logo fails in several ways. One problem is that the shape is made of a combination of thick and thin elements. On the squint test, thinner elements are the first to disappear, so the remaining shape has to be bold and clear. This shape is not bold enough, due to: a lack of 'integrity in a solid form; insufficient white space between elements; drop shadow adding visual 'dirt'.

logo

This logo also has inconsistent weight, employing thick and very thin sections together. Ignoring those, the remaining central shape is nondescript. The image is too busy, made up of several adjacent planes that don't have enough contrast to carry weight.


Characteristic 2: Presence

Your logo has good presence if it fills much of the available space with shapes that carry meaning (e.g. words, recognisable symbols). This makes it bolder and clearer, and hence more recognisable. The more space you fill with elements that don't either help recognition or add meaning, the less presence your logo will have.

Examples of good presence

Examples of poor presence

The words make up very little of this logo, only around 13% of the area. The ellipse shape is very common, and unrecognisable on its own. Note how the font used is too bold to be clear to read. The only strength of this logo is its bold colour.

The key elements "FTL" are too weak to draw the focus. The FTL letters are lacking white space to differentiate them and suggest that they are significant. The strongest forms are the spiral line and the dark oval, but neither is meaningful.


Characteristic 3: Weight

Good weight means that a logo (or icon or logotype) does not rely on fine (slim or light) features in order to be recognisable. If a logo is bold, it can be effective in more environments. The best logos have a weight of presence are recognisable when viewed alongside other strong images. (see Picadilly Circus)

The use of colour is vital to getting a clear, bold logo or icon. Too many colours, gradients, 3-d effects and complex patterns can be detrimental to your logo's weight.

Tip: Try to use as few different colours as possible.
Remember, the more colours a logo has, the harder it is to reproduce in different formats.

Tip: Avoid gratuitous 3-D effects - your logo must work without them.

Examples of good weight

In IBM's logo, the horizontal lines are a secondary feature to the main shape. The logo is still recognisable without them.

Strong weight, colour and shape make Dell's logo recognisable.


Examples of poor weight

The text is way too light, as is the other visual clue (the palette shape). The 3-d emboss effect on the text also reduces contrast and readability. What has a farm got to do with a painter's palette?


Characteristic 4: Contrast

Contrast aids shape-recognition by making the edges between elements clearer. Good logos (and icons) have lots of contrast on the edges of meaningful visual elements.

The squint test is great for checking contrast. Also consider that users may be colourblind. Another helpful test is to try desaturating your logo in a graphics application, and check whether it is still clear and recognisable.

Examples of good contrast

(See also all good logos above).
The RockShox logo uses both colour-on-white and inverse (light-on-dark) contrast together, to good effect. Great presence and strong colours make this impactful and highly recognisable.

The McDonald's logo has less tonal contrast, but the perceived contrast between strong, flat colours makes the shapes clear. Note the clear space around the text.

Examples of poor contrast

The logo shape behind the text is too light to see clearly. Also, the important "venture capital" text is too weak in light grey. On the squint test, you are quickly left with only the strong single word "Mobius", which may not be meaningful.

Text has too little edge contrast, as it's less bright than the highlight from the 3d effect.

Text is too thin for so little contrast against background.


Top ^ Next topic »
Comments
I think is an excellent article. It summarizes the major principles quickly and concisely.

I would add an additional thought about shape.
Square is good.
What do I mean?
A logo with the ratio of horizontal length to vertical length of 1:1 is good.
Significant deviations from 1:1 to are bad.
Why is this?
It matters a lot on the web (not important with print).
When you have to fit a logo into a small space on a website and the logo is very "portrait" or "landscape", then it will shrink in one dimension to unreadability. My own company's logo (www.marketingtactics.com) has this problem. I have not changed the logo because my company is small and I like it. However, knowing what I know today, I would never accept this logo again.
Logos that are much taller than wider are especially problamatic. See www.infinityio.com
Dave Barnes - 02:16 on 12 Aug 2004
Dave, you're absolutely right. I notice that nearly all the goood logo examples in this article are squarish, and none is 2:1.

I guess this ratio contributes to 'Presence'.
Ben Hunt - 02:24 on 12 Aug 2004
help me to get a logo symbolies the meainig of the word 'New'
talavaiking@yahoo.com
Karthik - 12:42 on 20 Feb 2005
this is very correct
a - 05:53 on 06 Apr 2005
i think this is very helpful but i do not believe that some are as ineffective as described. Some are suited to their target audience.
need to design a logo - 10:57 on 09 Jun 2005
This was really helpfull to me, thank you
derek - 02:31 on 15 Aug 2005
The design principles certainly are on-target. My question is more basic perhaps--about the mechanics of producing a logo that works just fine in print but that I can't seem to get to reduce legibly for web use.  I have tried numeous basic fonts with this particular one and nothing seems to stay crisp and legible in small sizes.  Started in Freehand, then imported into Photoshop and reduced to desired size and saved for web as all sorts of various gif and jpg formats, all to no avail.  (take a look at the bottom of www.rcsland.com--it's the Chamber of Commerce logo there)
sgallery - 04:32 on 26 Aug 2005
sgallery, the bottom line with that logo is that the text part needs to be much bigger, to work at low resolution. What I'd do would be to take the graphic and the text as separate entities, make them about the same height and put the text alongside the graphic instead of below.
Ben Hunt - 04:08 on 30 Aug 2005
i think you need to put more information on your info about the logo such as what effect it has on the company name and the font and everything like that. please add my opinions on to the logo information. Thank you very much . xx
Nikki - 06:03 on 21 Sep 2005