Samples of site design

Table of contents:

Samples of site design
Samples of site design
Anonim

Let's not go into numbers and calculations, since it is impossible to determine how many sites already exist on the Internet. Every day, thousands, if not hundreds of thousands of sites fail and new ones appear in their place. What is the reason for the failures? Why do people go to the site and immediately leave it? The answer is simple and right in front of your eyes - this is the design of the site.

Attraction effect

Agree, everyone has a set of certain sites that are visited day after day. I'm sure that most of the bookmarked are favorite sites with movies, books, news, games, etc. Why, after finding one site, we do not try to find another similar one, which may be even better? The answer is simple! The sites that we bookmark are convenient to use - such sites usually have a convenient arrangement of elements, categories and a pleasant design that does not irritate the eye. This is the "attraction effect", visiting a properly designed site once - leaving itno longer want to.

Let's look at the example of the trading platform two sites:

Example sites
Example sites

Undoubtedly and indisputably, site number 1 wants to be closed as soon as possible, and site number 2, on the contrary, wants to linger. Why is this happening? On the first site, in addition to a randomly located product, there is also a color oversaturation, which cannot be said about the second site. There is such a wonderful proverb: “They meet by their clothes, but see them off by their mind”, it is also applicable to sites, only instead of clothes there is a design, and instead of a mind there is a navigation structure. The visitor, having entered the site, the first thing he sees is the color scheme, and only then pays attention to the internal navigation and site structure.

Color perception

The main rule when choosing colors is not to overdo it. Sometimes even two or three correctly selected colors are more than enough, a vivid example of this is the site fb.ru. Many web designers use a table of "safe" colors to design their html site.

Table of safe colors
Table of safe colors

Safe it is called for the reason that all the colors displayed here will be transmitted by absolutely all users in the same way. These colors can be said to be the standard when creating the design on the site.

Color Compatibility

Each color has its own "friendly" color - this is the color with which it goes best. There is no need to reinvent the wheel and experiment with selection, everything has long been invented and is in the public domain. Color wheels are used to select colors. Itten. The image below shows a color wheel for matching 2 matching colors.

Complementary color combination
Complementary color combination

T. i.e. the opposite color inside the circle is considered to be the most compatible. If you need to select 3 matching colors, the color wheel is also used, only the color arrangement line will already be changed.

Triad - a combination of 3 colors
Triad - a combination of 3 colors

And there are many such circles, you can pick up more matching colors. For example, four.

Tetrad - a combination of four colors
Tetrad - a combination of four colors

Selecting colors in this way through Itten's circles, the maximum combination of colors will be achieved and a visually pleasing design of the site will be obtained. More color circles can be found online. Let's deviate a little from the main topic, because I want to inform you that these Itten color wheels are used even by professional designers from the fashion world, i.e. when creating designer clothes, this color matching method is used.

Internal site structure

If more or less everything became clear with color perception, then there remains one more important indicator as the internal structure of the site or in other words - "usability". It is not enough just to choose the right colors on the site, as practice shows - on the beautiful design of the site you will not go far. The correct structure of the site is like the frame of a house, if it is not planned correctly, then it will be inconvenient to navigate around it.

All navigation elements need to be thought out in advance, and even better - written down. StructureThe site should be, first of all, understandable and convenient for visitors. A lot of sites lose their visitors just because the latter, when entering the site, do not understand where and what is located. No need to clutter up with a mass of buttons and hang a bunch of functionality. You always need to look through the eyes of the visitor, if the user does not need some function, then it is better to remove it. Again, a bright and correct example of site design is the Fb.ru site, on which all sections are located in a way that is understandable and convenient for the visitor.

The biggest mistake

According to the average analysis, a user who cannot find the necessary section or information on the site within 15-30 seconds believes that this section or information is not on the site and leaves the resource. In most cases forever. A prime example of a site with terrible navigation:

Bad site navigation
Bad site navigation

Do you think it is possible to find the necessary information on such a resource by going not from the search, but simply to the main page? I think no. Again, color oversaturation and an abundance of incomprehensible navigation, which will put any visitor into a stupor and bewilderment. To avoid such mistakes, it is necessary to group all sections and put them in a separate navigation menu, which will be understandable for every visitor.

Registration form

Another important and frightening factor on the site is the registration form. Some try to collect almost great-great-grandmother's data in the registration window.

Wrong registration form
Wrong registration form

Such registration formswere fashionable before, when the Internet only began to appear in homes. Today, the Internet user wants to find the information he needs as soon as possible, and long registration forms, despite the excellent design of the site, will be 99% likely to repel. The ideal registration form by today's standards is shown below.

Correct registration form
Correct registration form

Even if this information is not enough, then no one bothers to request it later from the visitor, after the registration process. This approach is considered more loyal and friendly than the registration form, which is more like a job application form.

Website Templates

Many sites are now being created on modern CMS-systems that provide free site design. But free design (templates) does not carry any visual design, so if the site owner does not try to change it in any way, then such a site disappears in the search.

It is also worth mentioning the whole Internet portals that offer to deploy your own website based on them. In this case, there are both pros and cons:

  • The first and perhaps the only plus is simplicity. The site frame is already, as a rule, modeled on such resources by experienced designers, the design of the site is brought under certain requirements and rules. It remains only to fill it with thematic material and wait for the first visitors. Therefore, the simplicity and convenience of such services attracts beginners. But if the site is set up for serious development and competition fortop-1 in search engines, then it is better to refuse such a service.
  • From the minuses - the provided templates in most cases cannot be edited or changed, you will have to use the one provided all the time. Monotony is the main disadvantage, which we talked about at the very beginning, because each site must be individual and differ in appearance from others. A lot of restrictions that will be impossible to describe, since each such service has its own.

Final part

Everything described in this material does not pretend to be a "main instruction", you can always and even need to do everything in your own way - this is just a set of the most common rules and mistakes. But the most important points, described here in the form of color perception and the internal structure of the site, are the standard for designing the site. Incorrectly chosen colors will scare away any visitor who has just entered the site, and illiterate design of categories and site elements will not allow him to navigate and find the necessary information. These points should be given maximum attention and, as mentioned above, you should always look at any site through the eyes of a visitor, and not through the eyes of a developer.

Recommended: