Hierarchy by standard definition is a system in which members of an organization or society are ranked according to relative status or authority. Meaning hierarchy represents the relative importance. Now taking changing the general context, to something, you know what’s the very basic thing that is expected out of a design? The message you’re trying to convey should delivered efficiently, without any confusions in users’ head. You must’ve understood by now, that I’m talking about ‘Visual Hierarchy’ in Design here.
Good Design is a lot like clear thinking made visual! – Edward Tufte
Visual Hierarchy in design primarily focuses on carefully controlling on what users perceive while looking at your design. This motive is achieved by using the right design elements in right amount, at appropriate position and other factors that I’ll quickly talk about in this blog.
Meanwhile please keep in mind that we’re primarily focusing on the following phase(based on the marketing hierarchy) that your users will go through, it won’t be a brief amount of time but to deliver the exact message you’re trying to, each of these hold importance:
- Attract
- Interest
- Deliver
Factors to consider while creating visual hierarchy in design:
| Postion
What did you read first in the page, was it the subheading above what I just wrote right now, or this very sentence. No it wasn’t any of that. You don’t read something first that is at the middle of the page. This is the primary reason behind keeping the logos, vision etc on top and most of the times on left side. Because our natural instincts roll our firstly at the very top. Given this human behaviors these are the classic reading patterns that most of the users follow and see how you can make good use of it in your design:
- Gutenberg Diagram
- Z-Pattern
- F-Pattern
Heat map from Nielsen Norman Group
You can read about this patterns at length in this insightful article by Steven Bradley.
Moreover, The other factors that you should also focus while working on position of design elements are alignment, proximity and repetition to display relative importance.
| Size
The size of your element will be the major deciding factor that it’s getting emphasized or de-emphasized, because it clearly depicts the importance visually. Bigger the element, it’ll get more attention.
| Contrast With Colors
There are several things you can try to drive user’s attention. A contrasting element in design can easily drive your gaze. Use the appropriate colors to reflect the mood and essence of the message, just make sure you don’t use too much of that so that it turns out to be rainbow.
| Type
While reading any form of design newspaper, magazine or a website you must’ve noticed that certain types due to their size and font styles catches your attention. It’s in fact because of the implied typographical hierarchy that designer has created. The size of it will help you create relative importance and the style/typeface will allow you to control the intensity and tone of what you’re trying to convey.
| Balance With Space
Space be it negative or white space it allows your users some breathing time and make it easier for them to comprehend the message. This way it also controls the flow in which user read through your design. Thus it play a major role in creating the visual hierarchy and balance for easy navigation and meaningful implication. Read more about the role of space in graphic design from my previous blog.
| Rule of Thirds
This rule stats that initially divide your design into 3 distinct rows and column(2 lines basically. Now the meeting point of any of these 2 lines will be the prime focal point. This where you should put your design element which need more focus.
| Golden ratio
The golden in any field represents crafting a sense of beauty using the concepts of proportion and harmony. It was recognized centuries ago. One of the classic example of it is Pyramids in Giza. Even our face and bodies also follow the same concept. For more examples in real life and brief discussion about the topic you can follow this article on canva.com
