​

These principles of visual hierarchy will help you

design everything from brochures to apps, guaranteeing

a positive reading experience for the end-user.

​

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:  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.

• Z-Patterns:  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.
   

Size

This one is simple enough: people read bigger things first.

White Space

Another way of drawing attention is to give content ample room to breathe.  Overcrowding of page content reduces readability.

​

Font Weight 

Differences in type weight and italicization, in addition to word placement, produce a more dynamic, less linear, reading experience.

Color 

Bright colors stand out from muted colors or grayscale, while lighter tints appear more “distant” and thus fall lower on the hierarchy than richer, darker ones. 

Direction

Page layouts are typically designed according to a grid of vertical and horizontal lines, both by convention and because this is the most legible format. In such a system, a new way to establish hierarchy emerges: break the grid.

​

​

Visual Hierarchy