Blog Single Page

Understanding Visual Hierarchy in Web Design

By on 15 March 2019

Understanding Visual Hierarchy in Web Design

Visual hierarchy is one of the most important principles behind effective web design. This article will examine why developing a visual hierarchy is crucial on the web, the theory behind it, and how you can use some very basic exercises in your own designs to put these principles into practice.

Density and Whitespace

Densely packing elements into a space makes it feel “heavy” and cluttered; When elements are spaced out too much, they may lose the relationships to one another. When a page is designed “just right”, the eye will easily recognize when elements are related and when they aren’t.

visual hierarchy in web design

By spacing elements out and keeping plenty of whitespace on the page, this design makes it easier for people to roam around and find the small, densely packed boxes of content.

Style and Texture

Perhaps the most open-ended tool in the Hierarchists Toolbox, style can be used to impart a form of hierarchy that both embraces and transcends the other tools. For instance: a flat gray background will “feel” different than an asphalt textured background.This style or personality given by the designer will naturally play a role in how different visual relationships are made.

It’s worth mentioning that style is also one of the most dangerous tools that a designer can use. Just like a carpenter cutting his finger off on a band-saw, a designer can easily mislead people by over-emphasizing certain elements through style. Imagine a heavily textured, heavily designed site element that demands so much attention that it distracts instead of informing. This same idea extends to typefaces, buttons, tabs, and other elements. Be considerate of the impact on an overall design when you choose to add extra style and polish to an element.

visual hierarchy in web design

Jeff Finley’s site does a great job of combining a lot of the tools that we discussed here, but his use of originally styled elements over the standard UI fodder are what gives the entire design sense of intentional hierarchy. Jeff manages to add just enough style to make his site feel personal without it going overboard.

Failed Hierarchy

Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters, it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.

As I just suggested in the last section, it’s important to note that hierarchy can be used for both good and evil. Think of all the annoying Flash advertisements, popup windows, glitter banners, etc. that the web has been plagued with over the years! While these ads succeed in grabbing attention, they ultimately fail the site owner and the viewer by breaking the visual hierarchy within a site. Similarly, if a designer builds a visual hierarchy such that certain key pieces of information are nearly impossible to find, the designer will have failed at his task. Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters, it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.

Why Hierarchy is Especially Relevant to Web Designers

“Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.”—Jeffery Veen, The Art and Science of Web Design

Jeffrey Veen wrote those words in 2001, but they still hold a lot of power today where “information overload” seems to be commonplace. As people, we’ve always had a keen sense for visual organization. However, as a society we’ve been being barraged with a veritable tsunami of visual information over the last couple decades; as a result, people nowadays are hyper-sensitive to visual hierarchy. This is especially the case on the web where studies have proven that regular web surfers have learned to “scan” content innately; automatically seeking information that is relevant to their interests and discarding/disregarding information that doesn’t.

Because of this, becoming a master of visual hierarchy isn’t optional, it’s mandatory. As the typical web-surfing platforms expand from the traditional monitor to phones, tablets, even televisions, it’s becoming ever more important that we use strong, clear visual systems to communicate with web surfers.

An Exercise to Test Visual Hierarchy

To conclude, I’d like to end with a very simple exercise. As the example, we’ll use a website that you frequent, or a project that you’ve worked on recently; The exercise goes like this:

  1. List the key information points that visitors are likely seeking.
  2. Assign values (1-10) according to their importance to the average visitor.
  3. Now, look at the actual design again.
  4. Assign values (1-10) according to the actual visual importance as you see it in the live design.
  5. Consider: Does the expected importance match up with the actual designed importance?

In most cases, the answer will include shades of “no”. There are lots of reasons for this – client demands, inexperienced designers, design-by-committee – or a hundred other reasons that you’ve probably read. Heck, in some cases, the designer may want to mislead the viewer (consider a “free” site that’s trying to guide users to paid content). Whatever the reason, understanding visual hierarchy and trying to interpret it is a way to improve the way that you see web design in a whole new light. Hopefully it’ll help inform your own work as well!

0 Replies to “Understanding Visual Hierarchy in Web Design”

Leave a Reply

Your email address will not be published. Required fields are marked *

five × 3 =