The term describes the way of content arrangement, as well as relations between design elements. Dealing with the interface, the user notices visual hierarchy, understanding that the first element taken the attention is the most important one. The following elements have subordinate relations with each other.


Here are some basic principles of building up the hierarchy in UI:


  1. The size
    The huger element gets the bigger attention
  2. The color
    Brighter objects are likely to be first seen
  3. Contrast
    Two elements of dramatic contrast will catch the eye faster
  4. Alignment
    The high-priority of data is always closer to the top
  5. Repetition
    Using same style for repeated elements lets the user determine relative elements at a glance
  6. Proximity
    Less is the space between the elements, higher is the relatedness between them


Clear Visual Hierarchy
Clear Visual Hierarchy by Toptal Designers

share the term