Quick tips on how to use Hierarchy in design

When designing anything from a flyer to a website, you need to follow the principles of hierarchy in order for the design to be successful. Hierarchy is the way in which elements in a design are organized and put together giving importance to some more than others. As a designer, it’s in your best interest to know the principles of hierarchy. Today we will look at the best practices on how to use hierarchy in design.

Every single aspect in your designs are subject to a hierarchical position, from colors to shapes, to typography. The most important elements need to be seen fast and easily assimilated, secondary information should not overpower them. Consequently all tertiary information should be placed in a way that will not take the attention away from the primary and secondary elements.

How do people “see” visual information?

Before looking at the individual principles and practices on how to use hierarchy in design, we must first analyze how people see and absorb visual information. When someone picks up a brochure or lands on a website the first thing they will do is skim the information. They will quickly look at the cover, open it, turn it around, look at the back and only then start actually reading what it says.

When a website loads for the first time, the reader will skim the information, maybe even scroll down some. When looking at a magazine, readers will look through every page before choosing what to read.

The Z and F patterns

The way that people see visual information follows two similar patterns. They have to do with the order in which we read, from left to right, from one line to the next and from the top downwards. The Z and F patterns are two highly documented patterns studied via online heat mapping. Online heat maps record clicks on a website and these clearly show the Z and F patterns.

The F pattern is more prominent in content heavy designs like articles and blogs, while the Z pattern is more notices in landing pages or with sites that have minimal content. Knowing these two patterns will help a lot when using the principles of hierarchy in your designs.

 The Principles

Let’s look at the principles of hierarchy and the best practices for each one. An important practice that applies to every single one of these principles, is balance. Balance in the hierarchy of all elements will make or break your design. Viewers will always make visual relationships between the elements they see. When the design isn’t balanced they will not only not know where to look first, they will also be put off and ultimately leave.

Size

It is a fact that when something is bigger than other things, it will gain more attention.  The size of a header is always larger than the subheading, the subheading is always larger than the body text. Following this idea, when designing a landing page you might be tempted to make the call to action button the biggest and baddest visual element. But is that really what needs to grasp the viewer’s first and foremost attention? Probably not. What they need to see first is the product of service you offer and why they need to have it. If it’s an e-book you are selling, the graphic of the book must be bigger than the call to action button.

Color

Color differencing is a great tool for effective hierarchy. A monochrome design with an element in a complementary color will pop to the eye of the viewer and quickly make an impact. Some colors are more noticeable than others, it all depends on your color scheme. The same way that we need to know how to pair fonts together we also need to know how to pair colors. For example if you are placing text over a background, the color of the text needs to be more important than the color of the background.

Shape

Shape hierarchy is mostly about which shapes you use in relation to each other. For example if the main shapes in a design are rectangular and you add a circular shape it will become the most important element and will definitely call the attention of the viewer. On the other hand if using all shapes of the same style then a good way to set hierarchy is by overlapping shapes. The one in the front will always be more important than the one behind it.

Placement, Aligning and Spacing

The manner in which elements are placed also influence in their hierarchy. When things are placed in a line, the eyes will follow the line. When elements are aligned vertically the viewer will follow them naturally, like reading a list. The way that elements are spaced between each other also shows hierarchy. When designing a website, photos and graphics can be given a pop out effect, giving it hierarchy over everything else on the page until it falls back into place.

Over to you

How do you use design principles in your work to show hierarchy? A great way to check if your hierarchy is working is to ask a friend or colleague to tell you what calls their attention first in your design. Do not tell them what your intentions were, let them tell you what they infer. That way you will know if what you did, worked.