Web design and its importance in a modern brand book

What does this say? That the success of today's business largely depends on being on the Internet. But it's not enough just to be present, you need to do it right. The Internet is one of your advertising «carriers». this means that you also need to position your business here, create a correct and well-perceived visual image for it.Therefore, at 3owls we recommend that you pay due attention to web design when developing a brand book for a company.Even if you are not going to create a website or «enter» social networks yet

Our experts have prepared a number of interesting facts and useful recommendations regarding web design and creating a brand book section, dedicated to him.

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.

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.

In some cases, a photo will be more convincing and effective than words. The main thing is to choose, arrange and place it correctly.

Correct saturation and contrast, people in the frame (more trust in them), colors... Most of the requirements and recommendations prescribed in the brand book apply to web design as well, but there are also “tricks” that work depending on the niche, business specifics, image placement (website, social networks, advertising). And the emphasis should be placed not only on the design of photos, but also on interaction with them.

Here are some of these «chips»:

• Full-width background or block.For example, a single image in the header of a site can tell a lot about a business.And it can be more convincing than text.
• Sliders, hover and other effects.The ability to interact with images increases the effectiveness of web design.< /li>
• For different sources and platforms where the company is present - its own photo content. When developing web design for a brand book, you need to pay attention to: group and page covers, avatars, product photos, image style for publications, stories, polls and other activities. Advertising banners, materials for the media, lead forms - all this requires special attention, the creation of rules and recommendations for the preparation of photographic materials.

With a logo for the web, everything is about the same as for other media. The only thing you need to think about is the format in which the image will be stored. It can be vector or raster graphics. The first option allows change the size of the logo without compromising the quality of the image and modify its individual components.Raster graphics allow you to create realistic images of high quality with a high degree of detail.But they can «weigh» a lot.

And the web also makes it possible to strengthen the logo for using animated effects.

The web is the right place to “voice” a brand with audio, and the same rules and guidelines that apply to voice acting in real life are quite appropriate here. What should be included in the brand book section dedicated to web design is the rules and nuances of using sounds on the Internet.The main one is that it should be played only in response to user actions . Turning on music automatically after loading a page of the site is not an idea. Another thing is the sound design in social networks and on specialized sites when the user is waiting for the sound.

When developing web design, it is important to remember that the result of the designer's work should not be a beautiful picture, but an easy-to-use and understandable interface that is pleasant to interact with. Modular grids will help to implement this. And in many cases, they are suitable graphic design solutions.

Many web designers love 12-column grids, they are very useful on the web, thanks to the ability to divide by 12, 6, 4, 3, 2, 1, which gives them flexibility. Hierarchical grids with an intuitive arrangement of blocks, without using any logical structure, also work well here.

When working on the brand book section dedicated to web design, pay attention to the possibility of using tools such as:

• QR codes.
  They can be real works of art and part of your corporate identity, and not just a set of monochrome squares.
• Using split layouts.
  The solution contributes to a better attraction
• Parallax effect, augmented reality, optical illusions -
  interesting and effective tools (if used correctly) , of course), are available specifically to web design. With their help, you can give the user something that printed materials and other sources do not give.

We see that web design is a part of the brand book that «stands apart» and at the same time is connected with other components. It is important to take into account its nuances and 'chips' in order to use the possibilities to the fullest. If you need help in creating a brand book that will cover all issues related to the positioning of your company and interaction with users (including on the Internet), please contact us. We know how to do it.