Visual hierarchy in design – part I

Recently visual hierarchy has been popping up in my life. First at the Drupalcon in Chicago where Jared Ponchot held a great and inspiring session on the topic. And later on Smashing Magazine in the interesting article about proximity by David Cole. The blog post your about to read owes a hughely to Jared Ponchot’s presentation both in wording and illustration. 

Visual hierarchy is the emphasis and classification of elements according to 

a) relative importance within the composition as a whole 

b) parent, child and sibling relationships

One definition of this could be that visual hierarchy refers to a visual system of relative importance within a defined space or context.

Why is visual hierarchy important?

We all agree that clutter is bad. All pieces of information can’t be a headline or marked with red or positioned in a <blink>-tag. It makes a design impotent of conveying it’s message or makes it difficult for the user to carry out the task he or she is supposed to.  Something has to be more important. Usually this means reducing information and focusing on what is important. Now think of a Boeing 777 cockpit. It is cramped with switches and dials all of which are there for a specific, and presumably, important reason. Hence as a designer it is not always possible to create a ”good”, functioning design simply by taking stuff out and simplifying. This is where hierarchy comes into play. By creating a hierarchy of importance and using the tools that allow us to signal the importance of things we can if not create the perfect design, at least vastly improve a design. 

So visual hierarchy is important because: 

• It can help create order out of seeming chaos
• It can help create a more meaningful communication
• It helps you avoid goofy mistakes

A lot of the things that will be mentioned here is pretty basic and intuitive stuff. The interesting part is actually analysing how the principles come into play when design does not work and do it’s job. I. e. when the strength of these ”laws” and/or the designer’s lack of awareness or regard for them make a design dysfunctional.

Important to remember is that you can’t utilise visual hierarchy without knowing the actual hierarchy of something. You need to know the order of importance for different elements. So if you have a client who thinks all things are really important and must be shown with a headline and a <blink>-tag, then you are kind of back to square one. You still have deicide an order of imprtance for the messages or elements of the design.

There is a ton of different blog posts about Visual Hierarchy. I haven’t read them all, but browsed a few. The point being that there are a lot of different ”subsets”. More less everyone agrees that the starting point for theorising around Visual Hierarchy is the Gestalt principles of perception which originate in the Gestalt Psychology school founded by Max Wertheimer in 1912 and expanded upon by others like Kurt Kofka. Gestalt psychology is based on the observation that we often experience things that are not a part of our simple sensations. In this blog post we will stick to a different set of principles which include most of the gestalt principles and leave some out. This set of definitions comes from Jared Ponchot mentioned above:

• position
• proportion
• proximity
• symmetry
• similarity
• alignment
• contrast
• color
• unity
• pause

In the next blog post we'll start dissecting these principles.