Visual hierarchy is the difference between a site that strategically influences user flow and decisions, and a site that just “looks nice”. It is the process of setting up the conten on each page in a way that will attract audiences in altering amounts to different detailes depending on their importance/relevance to the page. If you have something like a heading (which is important as it is needed to section off content), then you need to make sure audiences will see it more prominently than oter pieces of information.
Below, we’ll describe five of the most basic elements, the essential building blocks necessary to support simple or complex hierarchies.
In general, being bigger means that something is more noticeable, but that is not always better. The simplest way to explain it is that your most important elements should be the biggest, but it’s when we delve into the details that it becomes more complicated. One of the principles of Fitts’s Law is that objects with a bigger size – specifically clickable range – are easier to engage with. In other words, the user exerts less effort to click bigger items. This holds especially true for calls-to-action, where you want to leave no question as to where the user should go.
Your choice of colour, even if it’s just monochromes, will have an enormous influence on how users perceive your site. For starters, each colour has its own psychological connections – colours themselves have their own hierarchy, where blacks and reds will more readily draw attention, while soft yellows and creams may take a backseat.
However, those effects can be enhanced – and even reversed – by the use of contrast. Contrasting colours against their natural opposite (known as complementary colours) draws greater attention to both. This has an enormous impact on visual hierarchy, as placing a yellow call-to-action (CTA) against a blue background may produce better results than a red CTA for example.
Your website interface’s layout is one of the most direct ways to control your visual hierarchy – you can literally place an element at the top of the visual hierarchy by placing it front-and-center. But there’s more at play than just positional height on the screen. One of these factors are “prime pixels”, as noted in another principle of Fitt’s Law. We’ve briefly described this previously, but it essentially means you should take advantage of the locations within easiest reach. In web design these are, amongst others, the corners and border of the screen, as “throwing” the cursor to sides requires less mouse control than a fixed point in the middle.
In relation to layout, the spacing within your interface guides the eye and, under the right circumstances, explains or suggests function. Spacing impacts your visual hierarchy in two distinct ways: proximity and negative space. Proximity is a powerful tool for a web designer as it can suggest an element’s meaning and functionality using only visuals. The Gestalt principles, from the visual-psychological school of thought from the early twentieth century, led to the discovery that users tends to perceive elements placed close together as having similar functions.
We don’t mean to give the impression that web design is a quantifiable practice with only one way of doing things. Personal style, such as the use of textures, graphics, and the type of imagery (e.g. icon or photo-heavy), all affect the visual hierarchy and allow you to express an individual design persona. One of the most powerful stylistic tools is texture. When used properly, texture enjoys the same advantages of size and colour (in terms of aesthetic appeal) while adding depth and atmosphere.