Visual Hierarchy

When designing a website, information needs to be conveyed quickly and clearly. Deciding what you want your users to pay attention to and in what order is what we call visual hierarchy. Learning about visual hierarchy can help your site feel more organized, let your users find information faster and promote the content you feel is most important.

Reading Patterns

Recent studies show that readers first scan a page to get a sense of its content before committing to reading the content fully. Using this, most web designers have established two scanning patterns that work well on the web.

F-Patterns

F-Patterns work best on traditional, text-heavy pages like news articles and blog posts.  Readers will scan the page, looking for bold subheaders or topic sentences that relate to the content they are looking for. Anyone that has used Google has interacted with an f-pattern. You scan the bold linked headings only stopping to read the text underneath if you think that one of the results is the content you are looking for.

Z-Patterns

Z-patterns are employed when the information is not presented in block paragraphs. In this pattern, a reader’s eye first scans the top of the page, where the most 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 page.

Place the most important information in the corners and orient other important information along the top and bottom bars and connection diagonally.

facebook-zpattern

Facebook’s login page is an example of a z-pattern

Size

People will often read larger content first. Large differences in content sizing will typically override reading patterns and order. In the below example, most users will read the title “Mr.Simon Collison” first, even though there is text above it. This is a great example of using size to highlight important information. But use size sparingly. If everything on your page starts off large, it’s hard to use size to emphasize. As a rule, keep your body copy to a 12pt-14pt scale.

efba3b07898b97723883c0cdf1980980

Space 

Spacing is an important but often ignored part of creating a balanced visual hierarchy.  It’s the idea of leaving white or blank space around an element. Failing to allow some amount of blank space can leave your site looking overcrowded and confusing, drowning your users in too much information. Using white space allows your users’ eye a place to rest and a path to travel through the design. Leaving space allows you separate and organize elements on your site. Good spacing allows you to group elements together and isolate focal points. In the example below, the designer leaves plenty of space between and around each section, creating a clean and balanced design.

spacing-visual-hierarchy

Color

People love color. Our eye is drawn to certain colors ensuring the content is hard to miss. Clever use of color on your site can help highlight important information and be a visually interesting way to differentiate between elements on a page. Your brain naturally enjoys things that contrast, so your eyes will focus on objects that stand out due to their difference in color from the surrounding objects.

 

Highlighting-in-UI-Design

 

Fonts

Typographic hierarchy is its own discipline. The way you handle your copy has a big impact on the overall design of your site.  Different aspects of the fonts can really make or break the design such as the category used, decorative, script, sans-serif, serif or script or even the use of uppercase, lowercase, bold or italic, the width of the strokes, etc. In the example below, the designer uses different font weights and italicization to draw the eye to the words “the perfect teas to keep you warm.” This combined with good word placement creates a more dynamic reading experience.  
teafactory

When designing a website, an understanding of visual hierarchy will not only allow you to create a visually appealing design, it will also help you determine how to group information, determine what is important and overall improve the flow and usability of your site.