Design Basics: Hierarchy

Designing hierarchy means deciding what the viewer is going to look at first and why. It can be used to explain something more completely or exploited to trick the viewer like a magician performing sleight of hand.

Notice your eyes go from the photo, to the name, to the title, and so on.

Graphic design has two main purposes:

explaining and selling.

Anything you create needs to do most of both. Sometimes it can be artsy or emotional, and sometimes it needs to be text-heavy and dense, but it always needs to communicate well. This is where hierarchy comes into play.

There are 7 ways to show hierarchy.

1) Size

This one is pretty intuitive. If something is larger it is more important. In the spread above the most eye-catching part is the photo that takes up half of the space. It is an easy way to show what the rest of the information is about.

Big = close = important.

2) Proximity/ Position

Information grouped together will be read together, usually because they are related. Images and objects grouped together will also be thought of as relating to each other, more than objects that are clearly distanced.

Size is still important here but notice the pull quote on the right is noticed after the (smaller) text under "The Voice" because of its proximity and color.

This is closely related to position, which is the idea that cultures approach any page the same way e.g. left-to-right, right-to-left, etc. Western culture views from left-to-right, which is also they way we read.

3) Negative Space

One of the least understood and one of the most powerful ways to show importance is through negative space. This goes directly against a natural instinct to fill any space you're designing as much as possible, however, if you learn to use negative space, you will have a much more effective design.

You often see this approach in web design, a successful reaction to the jumbled websites of the past. It works just as well in print, however, it's harder to justify when you're paying by the square inch.

4) Color

Color is interesting because there are several ways to use it, and it's almost always a critical part of anything visual, even the lack of it is usually a deliberate decision to exclude it for a purpose.

Saturation

The contrast between the saturated objects and the de-saturated objects adds emphasis, however, this effect can be quickly overdone, be careful.

The lack of color in most of the image draws your eye to the color.

Hue

Hue is an interesting way to bring objects to the forefront in a more subtle (read professional) way.

This shows what's important with color in a intuitive way.

5) Contrast

You may notice that all of these techniques rely on contrast. The idea that one thing is different from the rest, in one or more ways. The other way to accomplish this is to group everything else together.

6) Repetition

Repetition is another way of grouping elements together. When you understand one element of a group, you have a head start on understanding the other elements in the group. Often this is done with icons on websites and with typography in print.

7) Alignment

It's also clear in the above example that elements are related through alignment. The three icons are related because of their horizontal alignment. Each of the icons is related to the text below through vertical alignment.

The main idea

The idea is to attract and inform on different levels. First, you want to attract the viewer, which by definition means you need little to no information. In the real world this means large interesting pictures or a provoking headline. Something eye-catching that doesn't have a lot of text.

Lastly, you have to make sure to provide the necessary information. Without this everything else you've done was pointless. You have to make sure there is a payoff for those who want it. In the real world this means don't just do pretty pictures or funny headlines without giving real information, or it feels like a waste of time for the viewer. Think of the over the top perfume commercials, or luxury car commercials that are supposed to seem inspiring, but always come off as excluding the viewer.

Everything in-between should be levels of compromise between the two.

To learn more about hierarchy and the "Attract, Interest, Deliver a Message" approach to design, check out zeven design:

https://zevendesign.com/designers-guide-to-visual-hierarchy/