A quick trick to test your site’s 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. Words: Chris Bank
Chris Bank is the growth lead at UXPin, a UX design app that creates responsive interactive wireframes and prototypes. 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. 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”. For analysis of UI examples from over 33 companies, check out the free ebook Web UI Best Practices. In the first two articles in this series, How the human eye reads a website and 4 key ways to create visual hierarchy, I examined how to create the appropriate visual hierarchy in your 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. 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. Prioritize your interface based on how people scan for information. Conclusions
Understanding visual hierarchy and applying design patterns are two of the most important skills in good web UI design. Blurring Technique
Basically, look at a blurred version of your site (like the one below) and see what elements stand out. Then, apply colour, contrast, color, size and spacing for further accentuation.

Updated: 08.12.2014 — 22:17