< 5 min read

Design Foundations – A Guide to Visual Hierarchy (with Infographic)

View all articles

The internet has made virtually any information a person could want accessible with just a few keystrokes. But in practice, this has been both a blessing and a curse—so much of the information available is difficult to absorb due to bad design.

The biggest, most detrimental information design transgression is also one of the easiest to understand and fix: visual hierarchy.

Visual hierarchy is the way that information is structured and prioritized in a design. Things like how titles are given more visual weight than headings or body text are one example of typographic design hierarchy. But there are also other ways designers can present visual hierarchy.

The most basic rules of visual hierarchy come from the Gestalt principles of design. These basic psychological theories about design and how individuals perceive design elements form the basis of creating visual hierarchy. These principles include things like symmetry, closure, similarity, proximity, and more.

Example of no visual hierarchy to website design.

Website design with no visual hierarchy.

Why Visual Hierarchy Is Important

Visual hierarchy, at the most basic level, guides a person through the content presented. It signals to them which content is the most important, how that content is organized into related sections or categories, and which content they should focus on first. This is true whether the content is text, images, video, or something else.

Information comprehension is another important function of visual hierarchy. By creating visual relationships between pieces of content, those viewing that content are given clues as to how to interpret the information.

By increasing comprehension and guiding the person consuming the information being presented, the message the design is presenting is reinforced. Without visual hierarchy, it can all come across as clutter.

But knowing the importance of visual hierarchy and knowing how to actually create it are different things. This infographic presents the basic ways to create hierarchy in a design—concepts like size and scale, typographic hierarchy, repetition, leading lines, and balance—along with examples showing them in practice.

Understanding and implementing these principles gives UX designers an advantage in creating persuasive designs that convey the necessary information while creating a delightful user experience.

Visual hierarchy guide infographic.

• • •

Further reading on the Toptal Design Blog:

  1. Design Principles: Introduction To Hierarchy
  2. Exploring the Gestalt Principles of Design
  3. The Principles of Design and Their Importance
  4. The Comprehensive Guide to Information Architecture
  5. Boost Your UX with Clear Visual Hierarchy

Understanding the Basics

What are the principles of hierarchy?

The basic principles of visual hierarchy largely originate with the Gestalt principles of design. They include size and scale, color and contrast, spacing and proximity, negative space, alignment, repetition, leading lines, the Golden Ratio, perspective, randomness, texture, and the visual triangle.

Hiring? Meet the Top 10 Freelance UX Designers for Hire in April 2019
Don't miss out.
Get the latest updates first.
No spam. Just great articles & insights.
Don't miss out.
Get the latest updates first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.


comments powered by Disqus