The design is a form of communication, its purpose is to communicate a message to a certain audience. For this purpose use various visual elements and implement various design fundamentals. These fundamentals of design are the visual hierarchy that allows designers to organise items and information for the main message reaches its recipient without problems.
In this article, we explain briefly what is the visual hierarchy and what are the tools to create it.
What is the visual hierarchy?
Every time you organise items according to a certain order of importance, we are creating a hierarchy. If this structure is organised visually is called visual hierarchy and is an essential foundation in the area of design. In the visual elements differ hierarchy based on the way how they look, their appearance is an indicator of their order of importance and its relation to other elements.
For this reason, the hierarchy is an important foundation design. If it is given more weight to certain elements, these become more important. This way, you can communicate more easily with your visitors because the hierarchy helps that the information is processed more easily.
How to create a visual hierarchy?
There are different techniques to create visual hierarchy. Usually, not only one is employed but are combined. Basically, there are six: size, contrast, colour, proximity, alignment and repetition. These design principles are your best weapons to generate visual hierarchy. We elaborate on each of them below:
The larger items capture your attention faster. In addition, the size indicates the importance of each element. This technique is excellent for guiding the attention of your users and is one of the most used too.
If all items were of the same size it is difficult for the user to detect which element is more important. Not to mention it is quite monotonous and boring for users.
Create visual hierarchy based on size is one of the first techniques you learn as a designer. Of course, as you know, in the web design not only the size is used to indicate the importance of the elements, but combined with other basic techniques, which we will explore in this article.
The contrast also has an effect on the hierarchy and contrast can be applied on any item, for example, by choosing a colour palette. The impact is generated based on changes between one element and another, the more dramatic is the change, the better. So in a web design, colours contrast mode generate an impact and draw attention are chosen.
The colour is one of the most powerful ways to capture the attention of your users. Not only it serves you to organise and create visual hierarchy but to style and personality to your website. Perhaps, for this reason, the colour is a double-edged sword because it must take into account the brand personality and target audience, while at the same time, try to create a harmonious combination of colours.
Is likely to colour selection is a long process and is achieved by trial and error. That is, testing how the colours look each other up to the ideal combination of your web design.
Usually, vibrant colours tend to highlight, while pastel often invisible if placed next to a saturated colour. Of course, there are also successful cases of use of pastel colours on the web and saturated colours, but it is not an easy task to accomplish. And in many cases, you need some accent colour.
Proximity is a way to separate and group elements. The closer is considered as a group and can be identified as sub-hierarchies. The proximity serves to group similar items and separates those who are different, so it is very important when designing a website.
Group serves to organise your site and help the user identify sections or elements common areas. For example, in a blog, the sidebar usually contains widgets, each with a title and own content. Each element works individually, but they are also recognised as a group.
The location of the elements may also indicate importance. Following the example above, we know that the items located in the sidebar are minor elements that are located in the centre because occupy more space. Similarly, items that are placed on top are usually more important, why this place is common to the menu bar and logo. In an online store, the shopping cart is also usually placed on top.
You can also use alignment and movement to generate interest in your website. As usual, like elements are generally aligned equally. But if you want an impact in an area, you could change the alignment of certain elements.
Repetition is an element that also serves to group elements. If we take as an example the text within a webpage we see that each paragraph has a fountain and a score equal. This allows the user to easily recognise similar elements.
Although repetition is important, it is also essential to know how to break this repetition to generate interest, otherwise, the page would be too static and boring. Taking as an example the text, we see that every few paragraphs a caption is placed, usually higher score or boldface type or some other format that paragraph. This caption functions as an element that generates visual break.