4 key ways to create visual hierarchy

In this article, Brandon Jones looks at how the use of colour and size affect first impressions of objects in an interface. That means a large word or phrase in the bottom right-hand corner might be the first thing a person reads. A 2004 study found that strategic use of white space improved comprehension by almost 20 per cent. Contrast
Contrast is the occurrence of two different elements positioned close together. As you can see above, the large content margin, padding, and paragraph spacing used by Houzz makes the content easier to read (and encourages interaction with links and sidebars). In my earlier post, How the human eye reads a website, I examined the importance of creating visual hierarchy in web UI design. This political site – http://getactive.sj-stmk.org/ – uses size to make its point clearWhen it comes to the size of text, a typography study conducted by Smashing Magazine on 50 popular website interfaces found that headings usually stay between 18 and 29 pixels with body copy ranging between 12 and 14 pixels. In web UI design, these elements can be colours, textures, shapes, direction, or size, to name the important ones. Houzz uses space to make the content easier to readWhile spacing didn’t affect how people performed on the website, it did affect user satisfaction and experience (which is equally, if not more, important). 04. Using the below image as an example, most people won’t just see two circles on first glance – instead, they’ll likely see “a black circle and a smaller red circle”. It’s important that your web interface has breathing room and that you space everything out. Reducing the amount of “visual noise” will make the points you want to keep even stronger. Space
As discussed in Web UI Best Practices, one of the most important tricks in making something pretty is the absolute absence of something pretty. Moreover, size can add emphasis to the actual message or content, making it more significant. I’ll focus on some of the most powerful visual tools in your arsenal. I’ll look at all three of these in this article, but first let’s start with another useful tool, contrast… Fitbit combines strong use of colour with a classic Z-patternFitbit’s use of colour in their Z-pattern interface above is especially clever. In fact, Dmitry Fadeyev, founder of Usaura, advises that white space actually improves comprehension. Source: Communicating with Visual Hierarchy; http://static.lukew.com/pageheirarchy_lukew_03192008.pdfAlternating between different sized fonts and colours creates an instant hierarchy to your interface. This may seem obvious, but the important takeaway is its application: you can exploit this to draw your user’s attention where you want. Cluttering too many attractive images together is a quick way to ruin them all. Size
Size, particularly for text, is a powerful tool in that it circumvents the traditional rules of left-to-right and up-to-down reading. Of course, this is just a guideline (and will apply more to content-heavy sites), but shows that you still want to maintain a sense of proportion. Source: Understanding Visual Hierarchy in Design; http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in…In this sense, contrast in interface items is very powerful since differentiation is the default human response. Contrast is used to give hierarchy to the Constant Contact homepageCombined with the Z-pattern of the site, the treatment provides a clear visual hierarchy that highlights the email submission form followed by the mid-page navigation menu. 03.

Updated: 02.12.2014 — 22:12