The organization guides the user in the contemplation of a web page. Technical and practical explanations on the visual hierarchy of elements to achieve a balanced web design.
In all graphic composition an adequate visual hierarchy must be created, so that the most important elements of the same are properly accentuated.
Through an adequate design, a visual path can be established that leads the viewer’s eye and shows him the information contained in the composition in an organized, logical and reliable way, directing his perception along the most suitable route.
The person who contemplates a graphic work first appreciates a complete set of shapes and colors, with the elements located in the foreground contrasting with the background of the composition. Only after this first global observation, and if his curiosity has been aroused, will the viewer begin to analyze the individual parts of the whole, beginning with the pure graphic elements, and then continuing with the textual elements, which are more difficult to interpret, since one has to read them word for word.
In Western countries we read documents from left to right and from the top to the bottom, this way of proceeding has been extended to all those activities in which we need to visualize something (when we look at a person, we generally start from the left side of the page). his head).
This can be used to organize the content of a composition logically, placing the most important elements in the upper left area of the composition, the next most important ones on the left side, the next ones in the central body and the least relevant ones on the bottom. bottom.
This way of proceeding is common not only in brochures, documents or advertising posters created with a classic design, but also in web pages, which follow this hierarchical structure in 95% of the sites, which, moreover, are the ones with the best acceptance. have for the public.
Visual hierarchy by web page positioning
Another system to establish a hierarchy in the contents is the use of colors. We can emphasize certain areas of the composition using highly saturated primary colors, which irresistibly attract the attention of viewers, always taking care that the texts contained in them contrast clearly with the background, so that they can be read with comfort. In this case, you have to be careful not to abuse these “strong” colors, allocating them only to small special areas, since they overload the view excessively, especially yellow.
For the second order areas we can use less saturated, secondary or tertiary colors, being a good option those present in nature, since they are more natural and better accepted by the spectators. Finally, we can not color the less important areas or do it very subtly, so that they do not excessively attract the eye.
This chromatic variation is not unique, since any game of colors that manages to establish an adequate visual hierarchy can be used.
We can also resort to establishing ranges of visual importance to contrasts. If we place two areas of complementary or highly contrasting colors close or superimposed, the importance of both in the composition is reinforced, especially if the contrasting areas are not many.
Visual hierarchy by color contrasts (blue, orange and white)
On the contrary, if the areas are of similar colors, belonging to the same range, the importance of both is diminished, even if they are bright colors, since an area of attraction will be distinguished, but its elements will appear faded, with little relevance.
As for the textual elements, to which the color and contrast methods are also applicable, we can establish a hierarchy in them through their relative sizes. The page titles, the headers or the headlines of a news item or section can be highlighted by increasing their size according to their importance in the composition or web page. This method is always advisable, since it logically organizes the textual content and breaks the intrinsic monotony of the texts.
Visual hierarchy in textual elements
An element to always avoid in a composition, unless its use is convenient for us, are visually impressive graphic decorations, such as areas of intense color without meaning, icons that stand out excessively, loud horizontal lines, animations that provide little information, etc. Their presence attracts the viewer’s eye, without offering them anything in return and diverting their interest from the textual and graphic elements that do provide real information.
This does not mean that they cannot be used. They are sometimes very useful to break the monotony of a composition by introducing elements that provide visual freshness, but they must always be used sparingly.
Excessively large text sizes are also a factor to take into account. A page or section header should stand out enough from the rest of the textual content, but should never be disproportionate or excessively attract the user’s attention. Regarding the abundance of them, it must always be taken into account that a couple of larger headers establish convenient levels of importance, but a multitude of large texts add confusion to a composition, since the user loses references to what is important in it.
Summarizing: It is very important to establish a hierarchical organization of the contents of our composition, being able to use different design techniques, but taking into account that the misuse or abuse of them can turn the composition into something that does not arouse the interest of the audience. wearer or in “clown pants”, where everything is loud and nothing stands out clearly.
Remember that we have an entire section dedicated to talking about balance in design, which will add more information to what has been discussed in this article.
Facebook Comments
Disqus