Visual Hierarchy


The Most Important Factors of Visual Hierarchy in Website Design

Plenty of websites look nice, but not all of them have visual hierarchy. This hierarchy is needed in order to influence user interactions and decisions. There are other reasons to use this design element as well: to promote specific content, influence call-to-actions, encourage user signups, etc.

There is no single way to build a concrete hierarchy, so innovative designers must either invent new techniques or perfect existing ones in order to stay ahead.

Some hierarchies are simple and some are more complex. Here are the essential building blocks required for any visual hierarchy, according to various visual-psychological schools of thought.


Typically, the most important elements on a page should be the largest, but there are always considerations. For instance, objects that need to be clicked on should be big enough that the user can easily tap on them or click on them. This is particularly true for calls-to-action. The call-to-action should not be 10x bigger than everything else as you still want a bit of subtlety on the page. Sometimes no copy is required to tell users that they need to engage with a certain element or product, as the image itself is the call-to-action.

Size affects typography, including the title, subheadings, and the content body. Keep contrast in mind as well. In some instances, the font size should be smaller so that it does not take attention away from the key visuals.


The layout of a website also plays a huge role in its visual hierarchy. It’s also important for usability. There are a couple of principles you can go by, including those of “Fitt’s Law”, which involves taking advantage of the locations on the screen that are within the easiest reach. The border of the screen and corners, for instance, are easier to get to with a mouse than a fixed point in the middle.

There is also Hicks law, which explains that the more decisions an individual, has, the longer it will take for him or her to make the decision. Thus, it’s ideal that you don’t give your users too many options on the page, although you don’t want to restrict them too much, either.

Colour and contrast

It’s no secret that colours have emotional connections, individually and when used together. The psychological effects can be enhanced or even reversed by means of contrast. When contrasting different colours against their complementary colours on your webpage, more attention is drawn to both. For example, a yellow call-to-action button or font being placed against a blue background may product more impressive results than a CTA of another colour.

Style elements

Adding a touch of your own personality with the use of certain graphics, imagery, and textures, enhances the design and affects the visual hierarchy. When used correctly, texture allows for the same benefits of the right colour and size. With a textured background, the non-textured elements in the foreground stand out more. However, you don’t want to go overboard with it.

As for graphics and imagery, you will want to come with a creative logo, unique icons, and photos that will pop out. The idea is to create an aesthetically pleasing environment that will draw people in.

Spacing and proximity

Users tend to perceive elements that are placed together as having a similar function, according to the Gestalt principles. Elements that are related to a central image are typically placed right beneath it. Related navigation options pertaining to a website’s content are grouped together, usually on the right.

There is also white space to consider. One mistake that bad web designers make is trying to add unnecessary elements to white space just to fill it out, rather than view it as a design tool on its own. There should be a sufficient amount of white space between important elements in order to keep those elements the center of attention. When it comes to text, white space in margins and between paragraphs improves comprehension. 


Additional Articles About Web Design: