Monthly Archives: March 2010

Explaining visual hierarchy

Just playing around with some images and verbage to explain visual hierarchy and the subtle things that can have a big impact. I appreciate that I may be stating the obvious, but I’d appreciate any thoughts/comments on the following as a teaching tool.

Lets start off with this boring fella!

Impossible/difficult to say if any of the boxes attracts more or less of our attention. You could argue that top left may grab a bit more attention, but overall a pretty dull looking image.

What about this…

Have I given you a headache? What grabbed your attention most? Difficult hey. Too many top of the tree colours competing for your attention. If there is too much shouting at you it becomes difficult to know what to look at.

What about this…

Much easier eh! We can all agree that we’ll be spending more time looking at that big red box than any of the other boxes. And this simple technique can work on a much smaller scale…

It is the red one that wins again isn’t it, but don’t you notice yourself drawn to those other boxes a bit as well. So now we have established three levels of visual hierarchy – and you can guarantee that most people will be drawn to the red box and the area around it first. Good eh!

What is better is that this subtlety works when you remove things.

The absence of a box draws attention too!

As does slight differences in the boxes…

A little twist makes one box stand out so much.

So with all this subtle power at our disposal, why do we ever feel the need to create things that look like this?

So many websites (particularly home pages) have too many things shouting and fighting against each other for our attention. The more you need to accommodate, the more subtle the techniques you need to engage to highlight the different elements, or else you run the risk of overwhelming people.


Who is this sign for?

(not the Grey Street one!)