Advertisement
  1. Web Design
  2. Design Theory

Understanding Visual Hierarchy in Web Design

Scroll to top
Read Time: 7 min
This post is part of a series called Web Design Theory.
Designing for the New Fold: Web Design Post Monitorism

Visual hierarchy in web design is one of the most important principles behind effective websites. Developing a visual hierarchy in design is crucial for a successful user experience. In this article we’ll cover the theory behind it and go over basic exercises to put these principles into practice.

Design as a Communication Tool

At its core, design is all about visual communication. An effective design clearly communicates ideas to viewers.

According to data gathered by Hubspot in 2022, 84.6% of web designers find crowded web design a common mistake made by small businesses. Most people are inherently visual thinkers, not data processors. If you give them a massive block of information, chances are most people won’t bother to read it. 

Visual hierarchy in web design is all about communicating visual information. It’s about understanding that people will see our designs in terms of relationships is crucial to becoming a more effective designer.

Belton – Minimal HTML5 Black & White MultipurposeBelton – Minimal HTML5 Black & White MultipurposeBelton – Minimal HTML5 Black & White Multipurpose

Images, colors, and videos are the some visual elements that help communicate values and messages on a website. When adding those to our design, we can play with differences in scale to suggest that one object is closer to us than another or that one is more dominant than the other.

Variations in color might also suggest that one object holds a unique personality that sets it apart from the other object. A lot of information can be delivered in just a single image by using some very rudimentary tools.

As web designers, our task is to break down that raw information into delicious little chunks of visually relevant information. Information must be easy on the eyes, and more importantly, effective at communicating the message behind a webpage.

Let’s dive in to learn more about visual hierarchy in web design! 

What is Visual Hierarchy?

Visual hierarchy is the principle of arranging elements to show their order of importance.

We’ll start by understanding design principles on hierarchy. As explained by the Interaction Design Foundation, structuring visual characteristics is a way of controlling the delivery of the user’s experience.

Hierarchy is also a visual design principle that follows the way our brains categorizes information. It’s in our inherent nature as humans to group similar visual elements to organize them into meaningful patterns.

Information organized with a hierarchy in mind will always be more effective at communicating.

For example, let’s look at the following image of two text blocks:

visual hierarchy in web designvisual hierarchy in web designvisual hierarchy in web design

This is the most rudimentary form of a visual hierarchy system applied to text. Each example has the exact amount of information. The difference is in how the structure has been broken up dramatically.

Proximity, scale, and similarity of the text formatting allows a reader to organize the lower example into titles and paragraphs. This hierarchy gives the titles more meaning than the other information, and makes it easier to scan.

We’ve got some design principles on hierarchy down, so it’s time to take a dive into some deeper examples.

A Visual Toolbox For Designers

Understanding visual hierarchy in design is key to design successful UI and UX proposal. Let’s go over some basic tools you can should consider when designing for web.

Size

Objects that are bigger demand more attention. 

Using size as a hierarchal tool is an effective way of guiding a viewer’s eye to a particular portion of the page. The biggest elements should be the most important in most cases; the smallest elements should be the least important.

Hintio - Coming Soon & Landing Page TemplateHintio - Coming Soon & Landing Page TemplateHintio - Coming Soon & Landing Page Template

For example, the use of BIG, bold type adds a level of order to this design. The eye should naturally move from big elements down to the smaller elements.

Color

Color can function as both an organizational tool as well as a personality tool. Bold, contrasting colors on a particular element of a website will demand attention. It can be used to highlight and contrast buttons, error messages or hyperlinks.

Color can affect everything from a websites brand (ie. CocaCola Red) to symbolism (ie. cool, subdued colors). Advanced applications of color can even be used to classify information within a hierarchy.

Use color to highlight sections or as a background to emphasise elements. Use color to highlight sections or as a background to emphasise elements. Use color to highlight sections or as a background to emphasise elements.

This site uses the band’s color to highlight selected areas and as background for images. This way it’s easy to find a particular type of information based on the color key.

Contrast

Shifts in text-size or color will show that something is different or requires attention. Changing from a light background color to a dark background color can quickly separate the core content of a page from the footer.

Create good contrast between different sections of your web design.Create good contrast between different sections of your web design.Create good contrast between different sections of your web design.

The contrast between the dark image for the fold and the white background to show more information when scrolling down creates a distinct hierarchy of information.

Alignment

Alignment creates order between elements. It can be as simple as the difference between a "content column" and a "sidebar column". It’s key to add some information hierarchy for all elements on screen.

Alignment can also take on more complex hierarchical roles. Consider, for instance, the power of information placed in the top-right of an eCommerce website. Users usually expect to see profiles, accounts, shopping carts, etc.

Align basic information at the top-right of an eCommerce website.Align basic information at the top-right of an eCommerce website.Align basic information at the top-right of an eCommerce website.

Repetition

Repetition assigns relative meaning to elements. If all "paragraph" text is grey, when users see a new block of grey text, they can assume it’s another basic paragraph. When the users encounter a blue link or a black title, they can safely assume it is different from the grey text.

This site creates repetitive elements like paragraph text, then breaks the repetition when it wants to draw attention.This site creates repetitive elements like paragraph text, then breaks the repetition when it wants to draw attention.This site creates repetitive elements like paragraph text, then breaks the repetition when it wants to draw attention.

This site creates repetitive elements like paragraph text, then breaks the repetition to divide information into different categories.

Proximity

Proximity separates elements from each other and creates sub-hierarchies. Within a page there might be widgets that are separated from each other by space. At the same time, those widgets show a new information hierarchy: title, subtitle, and content.

This is a good example of proximity. This is a good example of proximity. This is a good example of proximity.

Proximity is also the quickest way to associate similar content. 

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.

A good example on how to play with density and whitespace. A good example on how to play with density and whitespace. A good example on how to play with density and whitespace.

By spacing elements out and keeping plenty of whitespace on the page, design makes it easier for users to roam around.

Style and Texture

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 a colorful and textured background. Style influences how different visual relationships are made.

This web design shows a subtle yet smart use of style and texture.This web design shows a subtle yet smart use of style and texture.This web design shows a subtle yet smart use of style and texture.

It’s worth mentioning that style is also one of the most dangerous tools that a designer can use. It can easily mislead people by over-emphasizing certain elements through style. Be considerate of the impact on an overall design when you choose to add extra style and polish to an element.

A Quick Exercise to Test Visual Hierarchy

To conclude, I’d like to end with a very simple exercise. Use a website that you visit frequently, or a project that you’re working on. 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. Ask yourself: Does the expected importance match up with the actual designed importance?

Try out this quick exercise and then adjust the areas that got a bit of room for improvement. This will help you create functional and visually appealing navigation experiences for the users you’re designing for. 

Conclusion

It’s a wrap! Now you know the importance of understanding visual hierarchy in design and trying to interpret it is a way to improve the way you see web design. It’s an open window to see UI and UX design in a whole new light. Hopefully this tutorial helps inform your own work as well!

Learn More Design Principles With Tuts+

Keep learning about the latest in design theory. Check out our free courses covering design principles that could definitely be applied to web and UX design: 

Editorial Note: This post has been updated with contributions from Janila Castañeda. Janila is a staff writer with Envato Tuts+.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.