Blog Design: Layout Workshop
The topic of today's post is blog design. We will have a practical lesson, so get ready for independent work, there is no planned vacation :) Why is the master…

Continue reading →

Does web design need education?
The profession of web designer is now becoming one of the most sought after. Every month, thousands of new people with burning eyes appear who think that this is their…

Continue reading →

Changing the site design: quick restart of your project
I wrote many times that the web design master must be creative, must look for new solutions to everyday situations, keep an eye on fashion ... But unfortunately, fashion is…

Continue reading →

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.

Clearing space
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.

Custom CSS Properties
A Ashley Nolan poll in November 2016 showed that 84% of front-end developers use a CSS preprocessor. At the same time, developers consider variables to be the most useful preprocessor…

...

How does website design development begin?
Before you begin your journey to the top of your career as a web designer, you need to understand the basic principles of creating such projects. Do not immediately run…

...

Layout adaptive menu
Adaptive menus collapsing into a hamburger on mobile devices can now be seen on almost any site. In this lesson we will learn to make up such menus. In the…

...

Web Design 2016: Chrome attacks!
From the author: The year 2016 has ended, it is always interesting to go back and see how much the workflow has improved over the previous 12 months. It's amazing…

...