Hierarchy is a principle of design used to organize a structure of different levels of authority to show the importance of a page or screen’s graphical elements. A design’s hierarchy is built by adjusting or changing characteristics such as size, color, contrast, texture, style, proximity, alignment, and whitespace.
Certain characteristics draw a reader’s eyes more than others and can send different messages. Take whitespace, for example; the more space left around graphical elements, the more the eye is pulled towards them.
Looking at proximity, elements that are placed close together seem related. The size of an element such as a large header can say to the audience that “I am important.”
To create a strong visual hierarchy, designers need to consider what draws readers’ attention and what doesn’t. The Nielsen Norman Group found that most of the culture read from the top down and left to right.
In addition, readers typically scan the page beforehand to see if they are willing to commit to reading the page.
The Two Scanning Patterns Readers Have Are:
- The “F” pattern used for text laden pages such as blog posts
- The “Z” pattern utilized on pages without large, block paragraphs such as web pages
This assists graphic and web designers to have the ability to strategically conform their designs based on this behavior and put important information in the corners, top bars, and bottom bars.
These general reading and scanning patterns can become interrupted by the design. For example, a typeface emphasized by its weight or pairing set in the center of a page could become the first element the reader is drawn to.
Size is another aspect that steals the reader’s attention as the bigger things are read first. An additional case is with colors. Brighter colors stand out more than muted colors.