Next up in our Principles of Information Design series is Hierarchy. This is a fundamental principle to graphic communication as a whole, not just EGD. Clear visual hierarchy affects legibility, comprehension and usability of any visual piece.

What is Hierarchy?

According to Wikipedia, a hierarchy “is an arrangement of items (objects, names, values, categories, etc.) in which the items are represented as being ‘above,’ ‘below,’ or ‘at the same level as’ one another and with only one ‘neighbor’ above and below each level.” In terms of graphic design, hierarchy refers to the ordering of visual and typographical information based on relative importance. This can apply to any form of visual communication — brochures, websites or interpretive displays.

Why is Hierarchy Important?

Clear visual hierarchy provides a number of important benefits. It clearly organizes complex information and provides a method of guiding the viewer through the content by way of importance. Legibility is also an important factor, as well designed information hierarchy allows viewers to skim and scan large amounts of information without having to read every single word. The viewer is then able to quickly gain understanding of the content based on importance and determine what is useful, usable or relevant to their needs.

Getting Started

Developing stronger, more effective visual hierarchies requires designers to have a solid understanding of the core content they’re working with. In order to do this, it’s critical that you have near-final content before you even start designing! Start by reading through and familiarizing yourself with the information that needs to be designed. Once you have a solid understanding of the information, it’s easy to organize and arrange content by importance. Keep in mind both viewers that will be taking a quick glance as well as those who’ll choose to stay and study the information for longer periods.

There are many different elements that can be used to create hierarchy:

• Color and contrast
• Spacing, including negative space
• Position
• Typography
• Grid structure
• Grouping
• Weight and scale
• Graphic elements such as bullet points, icons, rules, etc.

Combining elements, such as weight and scale with color and type styling, can clarify a complex visual hierarchy.

Have thoughts on hierarchy in information design that you’d like to share? Leave them in the comments below!