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.
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.
For example, let’s look at the following image of two text blocks:
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
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.
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.
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.
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.
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 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.
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.
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.
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:
- List the key information points that visitors are likely seeking.
- Assign values (1-10) according to their importance to the average visitor.
- Now, look at the actual design again.
- Assign values (1-10) according to the actual visual importance as you see it in the live design.
- 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:
