Design Foundations – A Guide to Visual Hierarchy (with Infographic)
Understanding and implementing visual hierarchy principles gives designers an advantage in creating persuasive designs that convey necessary information while creating a delightful user experience.
Understanding and implementing visual hierarchy principles gives designers an advantage in creating persuasive designs that convey necessary information while creating a delightful user experience.
Cameron Chapman
Cameron comes from a design background and is the author of two web design books: Color for Web Design and The Smashing Idea Book.
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.
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.
Further Reading on the Toptal Blog:
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.
What is visual hierarchy in design?
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.
What is the purpose for using hierarchy in design?
Visual hierarchy guides people through content being presented. It gives visual cues about which content is most important, which content to focus on first, and how the content presented is organized into related sections or categories.
How do you show hierarchy?
Visual hierarchy is shown through differences in elements that denote importance. For example, while red and blue fonts are different, there’s no real way to tell if one is more important than the other. With bold and regular weight fonts, however, it’s easy to see bold text as more important, creating hierarchy.
Why is establishing a visual hierarchy important to communication?
Without visual hierarchy, information appears as a giant wall with no guideposts for the viewer. By creating a hierarchy of visual elements, designers can guide users through the information being presented, improving the user experience.