Skip to main content

A quick trick to test your site's visual hierarchy

In this article, Chris Bank of UXPin (opens in new tab) – the wireframing & prototyping app – explains how to use the Blur Technique. For analysis of UI examples from over 33 companies, check out the free ebook Web UI Best Practices (opens in new tab).

In the first two articles in this series, How the human eye reads a website (opens in new tab) and 4 key ways to create visual hierarchy (opens in new tab), I examined how to create the appropriate visual hierarchy in your web UI design.

Now that we've discussed how different interface elements affect visual prioritization, let's look at a simple way to test your hierarchy. Designer at Rackspace (opens in new tab) Lee Munroe offers a great method we'll call the Blurring Technique (opens in new tab).

Blurring Technique

Basically, look at a blurred version of your site (like the one below) and see what elements stand out. If it's not what you want to stand out, it's time to go back and make some revisions.

The blurred version will present a bare bones representation of your visual hierarchy, allowing you to evaluate your interface fresh without any distractions.

To spare your eyesight (or a trip to the bar), take a screenshot of your site and add a 5-10 px Gaussian blur in Photoshop.

Look at blurred version of your homepage and see whether its hierarchy still works. Source: http://www.leemunroe.com/visual-hierarchy/

Look at blurred version of your homepage and see whether its hierarchy still works. Source: http://www.leemunroe.com/visual-hierarchy/

Wufoo's homepage (above) passes the blur test because the prominent items are the sign up and product feature buttons, both of which should be priorities on any homepage.

The shape of the sign up bar makes it stand out, while the white space around the features buttons draws the eye by creating "breathing room".

Conclusions

Understanding visual hierarchy and applying design patterns are two of the most important skills in good web UI design. They are fundamental and interconnected: once you know how to visually prioritize information, you'll have a better grasp of how to apply existing design patterns.

Prioritize your interface based on how people scan for information (opens in new tab). Then, apply colour, contrast, color, size and spacing (opens in new tab) for further accentuation. To help shorten the learning curve, you can also turn to UI pattern resources like UI Patterns (opens in new tab) and PatternTap (opens in new tab).

For practical advice on building web interfaces based on examples from top companies like AirBnB, Wufoo, Linkedin, and more, check out Web UI Best Practices (opens in new tab).

Words: Chris Bank (opens in new tab)

Chris Bank (opens in new tab) is the growth lead at UXPin (opens in new tab), a UX design app that creates responsive interactive wireframes and prototypes.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.