Visual Hierarchy and its overview

anmol

As a designer, one is required to make a few decisions while designing, like:

Where to place the content?
What content should a user see when he/she lands on a particular page?
Which elements will get higher priority than others elements? and so on.

When a designer gets the correct answer to these questions, ‘A Good Design turns into a Great Design’.

While dealing with these questions, all the answers lead you to a term ‘Visual Hierarchy’. Visual Hierarchy is one of the most important principle of designing, and here I will be discussing about Visual Hierarchy and its application to make your designs better.  

Visual Hierarchy is the organization and prioritization of content as a means to communicate a message. Whether it is print media or digital work, visual hierarchy is required to communicate your ideas to the readers.

Why is Visual Hierarchy required?

Let us suppose, you get to read an article like this…

visual_hierarchy-01

Content Credits: Medium

What do you think it is?
Does it look boring?
Does it look flat?
Does it look ugly and difficult to read?

If your answer to above questions are Yes, then I think you have a good designing sense 🙂

Now, let us see the same article with some tweaks.

visual_hierarchy-02

Content Credits: Medium

Can you spot the difference?
Did you find this image better than the last one?
Easy to read?
Did the content draw your eye’s focus to important terms first?

The answer is YES!

So, what is making difference in both the images, even though the content is same. The difference is Visual Hierarchy, which creates the magic in second image.

  • The use of bigger heading guides reader’s eyes to heading first.
  • Using bold text in subheading takes the next attention.
  • Dividing the paragraph into points helps to reduce pressure from reader’s mind.
  • Highlighting headings in each point makes the reader understand the content he/she can expect that particular point.

In this way, Visual Hierarchy helps a designer in communicating with the user. Understanding the visual hierarchy is important, but how does a designer actually create it? Let us discuss the tools which can be used to apply visual hierarchy in a design.

Principles of Visual Design

To obtain Visual Hierarchy in any design, one should apply a few of the basic principles.

  • Reading Patterns (F-Pattern & Z-Pattern)
  • Size
  • Color and Tint
  • Contrast
  • White Space
  • Style and Texture

1) Reading Patterns: This is the most important principle of Visual Hierarchy, which every designer must know. While reading, all humans have a tendency to read from top to bottom. Most of them read from Left to right, while few read from right to left.

But, even if you know this, the job is not completely done.

Few of the studies have shown that, generally a user stays on a website for approximately 15-20 seconds, and tries to scan a page to get a sense of whether they are interested, before committing to read it. Generally, Scanning patterns tend to take one of two shapes, either “F” or  “Z,” and you can take advantage of this by placing important content at proper place.

F-Pattern:  

visual_hierarchy-f patten

Image Credits : NNGroup

F-pattern applies to text-heavy pages like articles or blog posts. A reader scans down the left side of the page, looking for interesting keywords in left-aligned headings or initial topic sentences, then stops and reads (to the right) when he or she comes across something interesting. The result looks something like an F alphabet.

Z-Pattern:

visual_hierarchy-z patternImage Credit: Awwwards

Similar to F-Patterns, Z-Patterns are also observed in all sorts of pages, like websites, advertisements etc. where content is not in block paragraphs. A Reader scans the information from top left to top right and then goes diagonally down to search for interesting content in the bottom of the page.

2) Size: As the heading says, The bigger the object, the more attention it will get. Size is an effective way of guiding a viewer’s eye to a particular section. Bold and bigger headings dominate and help in catching the viewer’s attention and vice versa.

visual_hierarchy-size

3) Color and Tint: Colors play an important role in defining Visual Hierarchy in a design. Bright and Bold colors dominate more than muted and grayscale colors. Using Bold and Contrasting colors on particular element of website will demand attention. Let’s see the previous example with some colors.

visual_hierarchy-color

4) Contrast: Contrast shows relative importance. Dramatic changes in color draws the viewer’s attention towards itself. Good contrasting text/Background pleases viewer’s eyes and draws attention. An ideal background to text ratio is 7:1 whereas any ratio below 4.5:1 is not recommended.

visual_hierarchy-contrast

5) White Space: Elements with proper space around it looks clean and draws attention. Whereas, densely packed elements look heavy and cluttered. Giving proper space around your main actions/elements adds a level of hierarchy in your design.

Check the most common example below.

visual_hierarchy-08

Image Source: Google.com

Hope you have understood how visual hierarchy helps in turning a ‘Good Design to Great Design’. Go ahead, apply these principles and make your designs beautiful. Happy Designing 🙂

 

Mobile App development

about the author

anmol