Website design: what processes take place in the head and on the monitor of a web designer when he “draws” the site

Website design: what processes take place in the head and on the monitor of a web designer when he "draws" the site

Website design creation is one of the most laborious processes in its development. Whoever says anything, design plays a leading role. When we go to the site, the first thing we see is a picture, that is, a design. The visual perception is triggered, and our user attitude depends on what it will be. And this happens everywhere.

For example, you wanted apples and went to the store. Seeing the variety of varieties, you are confused and unable to make a choice. How to understand that an apple is tasty and ripe? You need to try it! You will hardly be able to try all the varieties in the store, so it remains to be determined only by eye. If you don’t like red apples, you go for yellow ones; if you don’t want small ones, you go for large ones. Then you decide what to do with them: bake charlotte, make juice, or, finally, just eat it.

Design helps make people more loyal. We all want to eat delicious and healthy food, wear nice clothes and live in luxury homes. Is not it? =) And we also want all sites to be beautiful too, and even better beautiful and user-friendly. Therefore, when developing a website design, first of all it is worth thinking, oddly enough, not about design. Every self-respecting web designer should be an SEO analyst, UI / UX developer, and layout designer.

Don’t be alarmed. =) If you are a beginner web designer, you don’t need to be a pro in all related fields. It is important to understand the basics and how all of these areas work together. Below we have described all the points that play the most important role in creating a website design.

Analysis of the target audience (CA)

This analysis takes place at the stage UI / UX design ** UI / UX design – creating a website prototype based on user data. UI (User Interface) – a system of communication between a user and a website; UX (User Experience) – experience of interaction of the site with the user. , for a designer, it is a fulcrum, something that is worth starting from. “Design is created for people” – we keep this thought in our head throughout the entire time of work on the project. As soon as the designer has heard the theme of the future site, he must introduce those people who will use it.

How it’s done? We come up with a couple of characters (we will call them that) and objectively assess their age, place of residence, character, preferences, lifestyle and even how they look.

In this case, each character should be a prominent representative of his segment. Therefore, we make the future site equally convenient and understandable for everyone. After that, based on this, we select all the components for our site, which we will talk about below.

General style and composition

When looking at the overall design of a website, the first rule it must adhere to is integrity… All blocks on the site must be part of a single whole. It is necessary to arrange the elements on the site so that they belong to the same selected style. You cannot create incompatible components with each other.

For example, if we make a link blue and underlined, all links on the site are styled in the same way. If we make a button with a shadow on the main page, then all buttons on the site should be with a shadow. Also, it is necessary to apply a shadow to some other elements. If we added a yellow stroke with rounded edges to one picture, then we do the same with other pictures. If we used animation, then it must be present somewhere else. The main thing here is not to overdo it. Everything should be in moderation.

Correct composition

The next rule of competent composition – subordination… Any element on the site must be substantiated. Why did we choose this color? Why did we make a font this size? Why did we add that little dash over there? Etc. You must give a precise and clear answer to all these questions.

When creating a site for people, we take into account the fact that it must have such a property as vitality… All components of the site should be similar to what a person sees in real life. Everything created by nature has practically no sharp corners. Try to choose smoother shapes for your site. Or dilute too “aggressive” details with more “calm” ones.

No composition will fulfill its function without placement of accents and contrast

Accents in web design, in most cases, are buttons, headers and some kind of images. The most important thing is not to mix up all the components and rank them correctly.

If the button on the site for the main service is blue, then for additional services we make the buttons less contrasting. For example, you can leave the stroke blue, but make the button fill white:

Button design

Much the same thing happens with headlines. For more significant ones, we use a larger font (for example, for USP), we make the rest of the subheadings smaller:

Headers styling

We’ll talk more about typography below.

By accent images, we mean those images that will grab the attention of users and evoke the right emotions. In most cases, this is a picture on the main page of the site or a banner.

Color

Let’s move on to the most basic thing in web design – to color. A person perceives this whole world in color from birth. Wherever we look, everywhere we see a color picture. Therefore, visual perception is the very first thing that evokes certain associations among users. Every designer should be aware of this and “use” people’s feelings for the good of good design.

Before choosing colors, there are a few questions to ask yourself.

What is the purpose of your design?

With design we can inform user or to convince him to do any action.

The first goal is applicable to news portals, to corporate sites that carry information. The second goal is suitable for commercial sites – online stores or landing pages.

What emotions do you want to convey through the design?

Each person has a different association with color. Everyone perceives everything in their own way. There are color groups that affect the user in the same way almost always.

Red – courage, danger.

Green is the color of life, tranquility.

Blue – freshness, lightness.

Yellow – energy, joy.

White – kindness, purity.

Black – stability, confidence.

Wrong colors

Correct colors

Do not forget that the meaning of a color depends on its shade. A muted red will not be perceived as aggressive or hazardous. Dirty blue will no longer be so light and airy.

What colors are available to us?

For many companies, the main colors are the colors of the logo. Branding is developed first, then the website. If the company has its own corporate identity, we use the appropriate colors for the site.

We look at the palette that is available to us, and select an accent color for a start. It is primarily used for buttons.

Background color very important for an informative site. It should not distract the user from reading. We select a shade that will take the strain off the eyes and not annoy with our presence.

Auxiliary tone – one of the shades of the main background. Helps to visually mark up other blocks on the page. The auxiliary color shows the difference between the secondary actions and the main ones. Its main task is to separate the main color from others.

Here are two useful resources to help you color your website:

  • Material Design Palette;
  • Adobe Color.

You can also use the color wheel and match colors according to the schemes:

Color circle

Typography

Correctly selected fonts increase the usability of the site. It should not be too large and not too small, that is, it should be easy to perceive, not annoying and well read.

A large amount of information on the Internet is presented in the form of text. It is unlikely that we will be able to convey any meaning to the user without typography. Even if the site is made in a super minimalistic style, the text is still there. It may not be enough, but it is there.

Even though it is just text, it is an essential design element. Fonts have now come to the fore, replacing graphic design. There are several types of fonts:

  • Serif fonts – often used for sites related to history, fashion, architecture. They are also found on news portals, as they imitate a newspaper font.

    Serif fonts

  • Sans-Serif fonts can be safely used on sites with different topics.

    Sans serif fonts

  • Display fonts – graphic fonts, almost always used only for headings.

    Display fonts

  • Handwritten fonts – fonts that imitate handwriting. They can be used for headings and smaller paragraphs.

    Handwritten fonts

  • Symbol fonts – fonts where letters are icons.

    Symbol fonts

Each font has its own Font Family or headset… Typeface is a collection of fonts that are united by a certain style and have a different typeface.

Headset

Fonts have pin – value in points, tracking – uniform distance between letters, kerning – selective distance between letters.

When a block with text appears on the page, a leading – distance between lines of text. Sometimes it is neglected, which creates a sense of concise text that is difficult to read.

Further, we will step back from the terms and move on to the issues that worry us all so much.

What font to choose for the site?

Let’s say right away that there is no universal way: you need to think logically and connect your intuition a little. First of all, it all depends on the topic of your site. Also, the earlier analysis of the target audience will help us a little in this matter.

For example, if this is a website of a law firm, you should use strict typefaces with a clear outline. For example, a handwritten or display font will be completely inappropriate here, it should be better used for sites about creativity, art, for sites with children’s themes.

Once you’ve found the font group you want, don’t forget to apply it to all headings and subheadings. Otherwise, you risk wasting your precious time choosing a different font in the middle of the project.

Incorrect selection of fonts

Choosing the right fonts

How many fonts should I use?

You shouldn’t try to add variety to your design at the expense of text, choosing for it a hundred different variations of fonts. Using multiple headsets, you lose the user’s attention. He simply does not understand where to stop his gaze, and he is unlikely to read the entire text. For one site, we use a maximum of three fonts, preferably one in general. In this case, you need to change its style or weight.

Incorrect selection of the number of fonts

Correct selection of the number of fonts

What colors should I use for the text?

The color of the font relative to the background should be contrasting. There is one simple rule that works unconditionally: white on black, black on white. If the background is light, use dark colors for the text. If the background is dark, use light colors for the text.

Wrong color matching for fonts

Choosing the right color for fonts

How do I create a winning text layout?

In typography, there is a rule: internal ≤ external. The distance between words must be greater than the distance between letters. The space between lines must be greater than between words. The spacing between paragraphs must be greater than the spacing between lines. Everything is ingeniously simple =). See example below:

Invalid paragraph

Correct paragraph

Conclusion

Design creation is always a very difficult and responsible task. Even if you know all the above information very well, you will not always be able to hit the target. All people are different, and you can’t please everyone =). Design is an absolutely subjective thing. If everything were that simple, we would have forgotten about design a long time ago and would have used a publicly available set of laws and regulations.

All of the above in the article is the basis for the development of design for the site. But there are a number of other stages that we did not mention, but we clearly observe them in our work. To get the full range of services, you can order website development from us, or choose a separate design development. Experts will responsibly approach each stage and will take into account all your wishes.

Leave a Reply

Your email address will not be published. Required fields are marked *