Establishing a Hierarchy in Design

Hierarchy in design is arrangement of different elements so that the most important information is the most visible and the least important information is the least visible. It is a way of ordering content that allows the viewer to scan a text. Through use of the various elements of design, both separately and in tandem, you can create a hierarchy that makes it much easier to consume information.

Scale

This humorous example shows the power of hierarchy to change the meaning of text. The billboard reads “The naked truth about our waitresses is that they will flirt with you to get a better tip.” The designer varied the size of the text dramatically so that a new message appears.

Using scale is one way to create a hierarchy. Larger items are perceived as more important and will grab more attention than smaller items. You could use scale to make certain text stand out more, like in the previous example, or use scale to highlight one image more than another.

Space

Hierarchy can also be established through the use of space. The more empty space (also called white space) surrounding an element of design the more emphasis it receives. Take this example. In the first design, the article heading is grouped with the text. The text is set at the same size and at a glance it is difficult to tell what is the heading. In the second variation only the position of the title has changed. Because it has moved into the white space your eye is naturally drawn to it. The white space actually pushes your eye towards what is in it. Without changing the size of the text, only by giving space around an element is hierarchy created.

Color

Another excellent way to create a hierarchy is through the use of color. Take these two pages of text. In the first example, all of the text is uniform. In the second example, color has been used to highlight the beginning of new sections of text. The size and weight remains the same, but the introduction of color immediately draws your eye to specific words, creating hierarchy.

These aren’t the only methods available to create hierarchy. As we continue through the course we will touch on other design theories that contribute to hierarchy.

Tags: , , ,