Web design and its importance in a modern brand book

According to the International Institute for Marketing and Social Research and Yandex.Market, at the beginning of 2020, the share of Russians ordering goods via the Internet was 42% (against 37% in the previous year).

Colors in web design

Colors on a monitor and printed media are perceived differently. In the first case, we are talking about emitted light (monitors emit it themselves), in the second, about reflected light. In addition, the difference also contributes to this between the representation of colors on a monitor (RGB) and printed media (CMYK).

Because of this, the image on a computer (smartphone, tablet and other device) may differ significantly from that printed on paper. cases when the so-called «border» colors are used in the design.

Therefore, in order to avoid strong discrepancies, when choosing colors for print and web design, you need to imitate the color of the print on the monitor, and not vice versa.< /p>

But this is not enough.Colors can also look different in different browsers, operating systems and on different monitors.To avoid «embarrassment», when working on web design, it makes sense to consider using the so-called . «safe colors» (there are 256 of them in the palette).

In general, approaches to choosing colors for web design and printed products differ. And this must be taken into account. That’s what we do at 3owls.

Fonts and typography

As with colors, fonts can be displayed differently depending on the browser, device type, and platform. Therefore, when working with web design, here are some guidelines to follow:

• Use no more than 3 weights. These can be the same or different fonts.
• Use alternative fonts to display information in different browsers and on different devices. Tests are needed for this, because one browser can render text , using GDI technology, the second is DirectWrite, the third is CoreText.And with non-standard fonts, there may be problems.
• The optimal line length is 600 px.If the content part is wider, it is perceived more difficult (you can just lose the line) If you need to stretch content over a wider area, it makes sense to break it into 2 columns.
• Choose the «correct» font size. It is recommended that it be at least 12 px. The optimal range is 14-18 px .
• Use those contrasting fonts. But at the same time, you need to be careful about reversible ones. Because the result may be unexpected. For example, one study showed the following results on the readability of reverse fonts: black letters on a white background: 70% good, 19% fair, 11% bad. And the opposite is white text on a black background: 0% good, 12% fair, 88% bad.

And that’s not all. Correct line-height, alignment, leading, styles… There are many other factors that play an important role when choosing web fonts.