Visual hierarchy is one of the most important principles behind effective web design. I say this because the goal of a web page is to communicate, and that is essentially the same goal of good visual design.
How you organize and prioritize your elements conveys valuable information about their relative importance. Visual hierarchy aids comprehension, reinforces your message and guides your visitor through your story.
Take a look at the image below to get a feel of the general idea.
The image above compares a site layout with no differentiation on the left to one with a thoughtful hierarchy on the right.
Which of the two designs is more inviting? Which will you most likely read? Which will more effectively communicate with your visitors?
Importance of Visual Hierarchy
Web pages and websites have a lot of information to communicate. When we land on a new page we immediately have some questions we need to answer.
Is what I’m looking for on this page?Where is it?How do I complete my task?
By creating visual hierarchies, designers enable pages to be scanned and make information easier to understand.
Achieving Visual Hierarchy
Implementing something similar to the image above is very easy to do.
You want to start by building the basic structure of the page using empty semantic HTML elements that are appropriately sized and positioned. Think about all the elements on the page and how you want them to be grouped.
Think about where your eye would get drawn to first, second, and third on the page. What elements on the page should carry the greatest visual weight?
Now make the background colours of those divs different shades of grey which correspond to their visual weight on the page. If you squint your eyes and look at the page, does your eye gets drawn to the places you want? are you satisfied with the outcome of your newly generated “heat-map”?
If you are satisfied with the outcome, then congratulations! You have attained visual hierarchy!
Conclusion
The hierarchies help to give order. Prioritize articles and help in communication. Visual hierarchies organize, prioritize and communicate visually by modifying the visual weights that the different elements carry.
It is important to remember that before you design, we spend more time thinking about our content and what can be seen on the page than is necessary.
Your hierarchy should begin with thoughtful consideration of the content and goals of the page. Only after you’ve decided intellectually the hierarchy of your page that you should try to customize the process.