Visual hierarchy is a key design principle. When creating digital or print pieces, content needs to be well organized in a layout. One has to be more than just creative. One must consider the subtleties of a composition, including choice of color, size, contrast, direction, placement, type, and most of all what to leave in and out of a layout. Visual hierarchy is how content is organized and prioritized to best communicate a message to the public.

As designers, we must make calculated decisions concerning how content is prioritized. We must consider the huge quantity of information to be presented and the time it takes a user on a website to make a first impression.  If the message is not placed as a thought form, it will not have the desired impact. Designers must guide users, creating pathways to lead them in the desired direction. We must pay attention to the weight of graphic elements and distribute them accordingly to lead users in the desired direction.

Understanding the six principles of visual hierarchy will enable you to best communicate the information while providing a premier user experience.

  1. Page Viewing Standards

All cultures read from top to bottom and most from left to right. But it takes more than just understanding how information influences a page’s creation. Recent studies show that people first scan the page completely before they begin reading.  Display patterns tend to take two forms: “F” and “Z”.

Apply “F” standards on heavier pages with long amounts of text, like articles or blog posts. The reader scans the left side of the page, searching for interesting keywords in left-aligned titles or in the initial topics of sentences, then, when they find something of interest, they read on (towards the right).

f_reading_pattern_eyetracking

Above Image:  An eye-tracking study from the Nielsen Norman Group.

F-patterns

Above: Example of “F” usage patterns.

To use this principle in design, align important information to the left and use bolded short titles, text markers, and other means to draw attention and break paragraphs in a text.

To other pages, such as ads or websites where information is not necessarily presented in paragraphs blocks, apply “Z” standards. The reader’s eyes first scan the top of the page where important information is usually found, and then head down diagonally to the opposite corner, and do the same across the bottom.

310

  1. Size

This is the simplest, most direct rule possible: People read the big things first.

Captura-de-ecrã-2015-04-1-às-18.59.31

Take the Google Creative Lab website.  It is highly likely that the words “HAPPY PARTY” first captured your attention. This is intentional and aligns with the main message the company wants to communicate.

Size, especially for text, is a powerful tool in that it circumvents traditional rules of reading from left to right and top to bottom. This means that a great word or phrase can be placed at the bottom right and be the first thing a person reads. Furthermore, size can emphasize a message or piece of content, increasing its importance.

site-smart

  1. Space and Texture

Another way to bring attention to content is to give it ample space to vent. If substantial negative space is left around a button or if lines of a text block are well spaced, these elements will become more legible for the reader.

Captura-de-ecrã-2015-04-2-às-00.16.31

In creating a website that deals with large dimensions, spacing can be an elegant alternative or addition. Reducing visual noise will create a clearer proof of concept for your creation. White space will also render your content more readable to users.

A study conducted in 2004 found that ample use of white space between paragraphs and right and left margins increased reader understanding by 20%, as they found it was easier to focus on content.

Texture refers to the overall arrangement and standard spacing of text and other elements in creating a website.

  1. Typography

The choice of typefaces is essential to establishing good visual hierarchy. Among the most important attributes, one can select weight – the width of the traits that make up a character – and style, either with or sans serif. Other modifications such as italics can be important as well.

Captura-de-ecrã-2015-04-1-às-20.21.29

  1. Color

Here’s another simple and effective working rule: bright colors stand out more than smooth colors or grayscale. You can exploit this to draw the user’s attention where you want. In addition, certain colors help to set the mood of a site (blue is quiet; red, more aggressive, etc.).

fitbit

The Fitbit site uses colors within the “Z ” layout pattern intelligently.  Bright magenta puts immediate attention to the top of the visual hierarchy while linking it to the “Get Active” button, indicating that the two concepts are related.

  1. Direction

Page layouts are typically designed according to vertical and horizontal grids, both by convention and to increase readability. In this system, a new form of hierarchy emerges, breaking the existing grids. Texts placed on curves or diagonally will automatically stand out against the rest of the layout in text blocks. This has been an effective strategy in building both ads and websites.

Captura-de-ecrã-2015-04-2-às-00.11.41

Sources: Creative Block | Form Function | Luke Wroblewski

Further reading: Technical Visual Hierarchy