6 principles of visual hierarchy for designers

Frist there were stone tablets, papyrus scrolls and paper. Then came computer screens and electronic tablets. As the technology to display a page evolves, it remains the designer’s job to arrange the content clearly. But what’s the best way? In short, visual hierarchy.

Amazon Gift Card

Here’s a definition of visual hierarchy: Visual hierarchy is the arrangement of graphic elements in a design in order of importance of each element. The visual weight defines the importance of an element in a design’s hierarchy, communicating to a viewer’s eyes what to focus on and in what order.

It’s an increasingly important question, as responsive frameworks force designers to think about many different pages at once. Faced with dense text and short attention spans, designers developed 6 principles to guide the reader’s eyes to the most important information.

These 6 principles of visual hierarchy will help you design everything from brochures to apps, guaranteeing a positive reading experience for the end-user.

1. Reading patterns
_

All cultures read from the top down and most cultures read from left to right. But while that knowledge is important for page design, designers know the task is much more complex.

Recent studies have shown that people first scan a page to get a sense of whether they are interested, before committing to read it. Scanning patterns tend to take one of two shapes, “F” and “Z,” and you can take advantage of this in your design.

F-Patterns

F-patterns apply to traditional, text-heavy pages like articles or blog posts. A reader scans down the left side of the page, looking for interesting key words in left-aligned headings or initial topic sentences, then stopping and reading (to the right) when he or she comes to something interesting. The result looks something like an F (or E, or something with even more horizontal bars; but the “F” term has stuck).

How can you utilize this? Align your important information left and make use of short, bolded headlines, bullet points and other such attention-grabbers to break up paragraph blocks.

Z-patterns

Z-patterns apply to other sorts of pages, like ads or websites, where information is not necessarily presented in block paragraphs. A reader’s eye first scans across the top of the page, where important information is likely to be found, then shoots down to the opposite corner at a diagonal and does the same thing across the lower part of the page.

Web designers commonly construct their pages to conform explicitly to this behavior, placing the most important information in the corners and orienting other important information along the top and bottom bars and connecting diagonal.

In the below design for the 2010 Build conference, important elements include the logo (upper left), “register now” button (upper right), and speakers list (across the bottom), all of which are strategically placed at the sweet spots of the Z-pattern.