March 24, 2016

Visual Hierarchies in Web Design

A visual hierarchy is the order in which we view information; it gives a clear identification of order and importance. When done well, visual hierarchy will direct our eyes to what is the most important element first, and then follow through to the least. Information that is organized with a visual hierarchy is more effective at communicating than information that is unorganized.

Creating a visual hierarchy will allow your users to scan your web pages to find what they are looking for with ease. This organization will establish patterns of movement and flow throughout the design. A designer who creates with visual hierarchy in mind can influence the user to view and interact with the most important elements of the design, without the users knowing they are being told to do so. It’s also a great way of breaking up overwhelmingly large blocks of text.

There are a number of design principles that can change visual hierarchy:







Whitespace, and proximity.

Here is an easy way to measure the visual hierarchy within a design.

According to importance, rate your visual assets; this is easiest to do by rating from 1-10. For example, what is the first thing you see when you look at the design? What are the primary, secondary and supporting elements?

Once they are established, take note of the content of the design. What needs to be seen first? Where do we want the users to go? What is the most important information?

The next step is to evaluate your rankings. Your most important elements should be ranked highest visually. If not, you will need to reconsider your design.