How to Establish Visual Hierarchy

by Margaret Penney | February 16, 2017

One essential element of any successful design is that it has a clear visual hierarchy. Visual hierarchy can be defined as the arrangement of elements in a design so that there is a difference between the elements, and the difference has a kind of visual order.

Visual hierarchy makes a design appear more well-organized and aesthetically appealing and improves information design. A design with clear visual hierarchy is simply easier to understand. The most important information in the design is usually larger and bolder, making it jump off the page, whereas less important details are smaller and in a different type style.

When designers are starting out, it can be confusing to know how to establish visual hierarchy considering there are so many font styles and options to choose from in a design. Visual hierarchy is actually not difficult to create if one follows these basic rules.

1. Contrast

Contrast is employed by using typographic styles that are vastly different to distinguish areas in a design. If information is closely associated, designers can use different styles of the same font to create some difference, but not too much.

2. Scale

Scale is the easiest way to establish visual hierarchy. Designers use scale to give headlines impact and to make footnotes recede in a design.

The State Theater Company uses contrast and scale to distinguish different information types.

3. Color

Color can clearly differentiate areas of information and with great effect, but one should use it carefully. Too much color can quickly make a design appear cluttered. The wrong color can have too much visual impact, or not enough. It’s important to use color theory and not overdo it when working with color.

4. Space

White space in a design separates information areas and makes it clear that they are different and not related. At the same time, grouping elements close to each other distinguishes those information units as related to one another.

A good example of this idea is if you are designing an invitation for an event you will in all likelihood group the date and time close together because people will want to know both these pieces of information in order to know when the event is going to be.

With visual hierarchy, you can use space in an intuitive way to establish the relationship between different pieces of information in your design.

Ample space is also used to distinguish areas in the design.

5. Alignment

You can also use alignment to create continuity between elements as well. Elements that are aligned left, right or even along a diagonal appear more related. The human eye unconsciously recognizes and follows lines, and creating visual ‘lines’ in your design connects those areas of information visually.

Margaret Penney is the Managing Editor of Notes on Design. Margaret is a teacher, designer, writer and new media artist and founder of Hello Creative Co.

Recent Articles

Best Graphic Design Conferences in 2024

How Much Do Graphic Designers Make? 2024 Guide