Fundamentals of Hierarchy in Interface Design

Visual hierarchy is the order in which the user process information by importance. In interface design, like in any other form of design, this concept is necessary to be functional at sight. With the correct use of hierarchy, the mind can group and prioritize elements to give them a specific order, which facilitates the understanding of what you want to communicate and the sense of achievement by the user.

Talks about seven resources to take into account to create a correct hierarchy:

  1. Size: The larger the element, the more it will attract attention.
  2. Color: Bright colors stand out more than muted tones.
  3. Proximity: Elements close to each other attract more attention than distant elements.
  4. Alignment: Any element that separates from the alignment of the others will attract attention.
  5. Repetition: Repeated styles give the impression that the elements are related.
  6. Negative Space: The more space around the element, the more attention it generates.
  7. Texture: Varied and complex textures attract more attention than flat ones.

Fundamentals of Hierarchy in Interface Design →

💵 This article is stuck behind Medium’s metered paywall … open the link in an incognito window to bypass that limit.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.