Composition in web design, or what Photoshop tutorials are silent about
Surely, you often have to visit sites that, at first glance, seem to be like nothing – both the pictures are beautiful and the text is folding, however, they lack some kind of logic, completeness, or something. And all because the owners of such sites, most likely, did not bother with the laws of composition – the art of organizing the elements of the site, combining and arranging them in their places.
Oh, that brain …
Our brain has the ability to instantly perceive information and create visual connections. I will explain with examples. Below you see two circles.
You immediately found a way to distinguish between them, right? But the task is more complicated for you.
Despite such a variety of objects, you can definitely describe any of them.
What does web design, balance, the basics of composition have to do with it? – you ask. The thing is that our brain has a unique ability to instantly classify information. It can group visually similar objects into groups. Using the simplest visual tools, you can transmit a large amount of information to users and manage their attention.
Composition is a certain combination of website elements.
Harmony in the proportions of the parts of the whole, beauty and the logic of construction are inherent not only in human creations. Signs of composition can be found in the structure of the universe, animal organisms and plants, and natural forms. Therefore, the term “composition” can be equally applied to the structure of the website, the description of the flower and the characterization of public speaking.
The easiest way to talk about composition in web design is when it is not followed. Each of us intuitively feels its presence / absence: are the elements in a harmonious interaction, are they subordinate to the main idea of the site, picture, photograph.
To make your website design look natural and harmonious, without falling apart into separate components, follow the basic design principles, the description of which I give in this article.
Choosing the right colors
The choice of color depends on how people perceive your site, and at the same time, your product. The muffled colors seem relaxed and calm to us, and the bright and contrasting ones are vigorous and energetic.
Think about what emotion you want to arouse in a visitor to your site, and then select the appropriate color scheme. A good example is the fresh Orangina website design, highlighting the brand’s image:
To attract attention, color accents should be used. In contrasting colors you can, for example, design the most important buttons – “Buy” and “Contact us”. I will introduce you to some of the most important principles for choosing and combining colors.
1. Complementary colors. All opposites on the color wheel create a strong contrast, so you can use them, but only carefully.
2. Analog colors. Such “neighbors” in the color wheel do not have a strong contrast.
3. The triad. An almost win-win combination is an isosceles triangle.
4. Tetrad. Two pairs of complementary colors should be used very carefully so as not to cause chaos in the cold.
The rule of thirds – where to put it?
The rule of thirds refers to the basics of composition in web design. It arose as a result of the interpretation of the golden ratio rule (maybe, remember, Leonardo da Vinci still used it in his paintings).
At first, I wanted to show you the picture “The Vitruvian Man,” for example, but because of his overly frank outfit, or rather, his absence, I decided that I would not. Suddenly, the children are reading an article here 🙂 Therefore, admire the Madonna:
Mentally draw two vertical and two horizontal lines on the page, dividing the area into nine equal parts. It is believed that most people focus their eyes on the points of intersection of these lines. Remember the rule of thirds every time you think about where to place, for example, a call to action button.
In general, it is pretty funny that such a mathematical rule applies to something as subjective as web design. This is a kind of aesthetic compromise, which creates a sense of balance on the screen, without overloading it, but without making it too static.
Surely in childhood, your parents asked you to clean up your room, because (I quote) “there is no free space.” Oh, golden words … Empty space, or, as designers say, “air” – this is the basis of the web design composition. Sometimes it is even more important than content. Therefore, if there is not enough free space, do a general “cleaning” and do not give in to the temptation to add as much text, icons, pictures, etc.
The site should not be overloaded, otherwise people will ripple in their eyes, and they will not be able to “catch” the thought that you tried to convey to them.