top of page

Power of  Hierarchy

What is it?

  • Hierarchy is the control over visual information in an arrangement.
  • Hierarchy of Alphabet's subsidiary companies.

Hierarchy in Graphic Design

  • Hierarchy is a visual technique that can help the viewer navigate your work.
YOUR EYE IS HERE
Then Here
Finally Here
  • The hierarchy should rank each design element by its importance.
Then move to the next dominant things.
A viewer will start with the most dominant feature of the graphics.
  • Here is an example with and without a hierarchy of a web page.
  • No visual weight given to any area
  • No idea which part  is important
  • Clear visual hierarchy
  • Help viewer to navigate 
NO HIERARCHY
WITH HIERARCHY
  • Makes complex message simple

Why Hierarchy?

  • Hierarchy helps the viewers to go through the design in a systematic flow.
  • It helps to define different elements based on :
  • A weight of the fonts
  • Size of elements
  • Colors
  • Alignment
  • Space
  • Contrast
  • Here is an example of how the viewer's eye flow through in a website.
Viewer's eye flow
1
2
3
4
5

Basic Types of Hierarchy Design

  • Highest contrast being noticed first
  • Hierarchy in color
  • Hierarchy in depth
  • In different size
Beauty
Nature

Uses

  • We can find hierarchy in many fields like:
  • Magazines
  • Bussiness Card
  • Web design
  • Graphics design
  • Packaging
  • Brochures
  • Newspaper, etc

  • The example in Magazine with Power of Hierarchy.

Art
3rd-  on Topic
4th-  Article
5th-  Sub Topic
2nd - On  Magazine title
1st -  Eye goes to      Magazine cover photo
Life

  • An example in Website with Power of Hierarchy.

Logo Desing
1st-  Heading
3rd-  Menu
2nd-  Articles

  • An example in Magazine with Power of Hierarchy.

HIERARCHY
  • Add structure
  • Creates visual information in an arrangement
  • Help viewer navigate
  • Digest information easy.
bottom of page