In the last in a series of articles, Chris Bank of UXPin explains the Blur Technique.
In this article, Chris Bank of UXPin – 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.
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 Lee Munroe offers a great method we'll call the Blurring Technique.
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/
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.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
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.
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.
