Website Design Samples

We will not go into numbers and calculations, since it is impossible to determine how many sites already exist on the Internet. Every day, thousands or even hundreds of thousands of sites fail and new ones appear in their place. What is the reason for failure? Why do people visiting the site leave it immediately? The answer is simple and it lies right before your eyes - this is the design of the site.

Effect of attraction

Agree, everyone has a set of specific sites that are visited day by day. I am sure that most bookmarks have selected sites with movies, books, news, games, etc. Why, having found one site, we are not trying to find another similar one, which may be even better? The answer is simple! The sites that we have in our bookmarks are convenient to use - on such sites, as a rule, a convenient arrangement of elements, categories and a pleasant design that does not irritate the eye. This is the “effect of attraction” by visiting a correctly designed site once - you don’t want to leave it.

Consider two sites visually on the example of a trading platform:

Sample sites

Undoubtedly and indisputably, the site number 1 wants to quickly shut down, and on the site number 2, on the contrary, I want to stay. Why it happens? On the first site, in addition to the randomly located product, there is also a color glut, which can not be said about the second site. There is such a wonderful proverb: “They meet people by clothes, but they see them off by the mind”, it applies to websites, but instead of clothes there is design, and instead of the mind there is a navigation structure. The visitor, having visited the site, the first thing he sees is the color scheme, and only then he pays attention to the internal navigation and structure of the site.

Color perception

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

Safe color chart

It is called safe for the reason that all the colors displayed here will be transmitted to absolutely all users equally. These colors can be said to be the standard when creating design on the site.

Color compatibility

Each color has its own "friendly" color - this is the color with which it is combined best. There is no need to reinvent the wheel and experiment with selection; everything has long been invented and is in the public domain. To select colors, Itten's color circles are used. Below the image shows the color wheel for the selection of 2 matching colors.

Complementary color combination

That is, the color opposite to the inside of the circle is considered as combining as possible. If it is necessary to choose 3 combining colors, the color wheel is also applied, only the line of arrangement of colors will already be changed.

Triad - combination of 3 colors

And there are many such circles, you can pick up a larger number of matching colors. For example, four.

Tetrad - a combination of four colors

By choosing colors in this way through Itten's circles, the maximum combination of colors will be achieved and a website design that is pleasant for visual perception will be obtained. More color circles can be found on the Internet. We’ll move a little away from the main topic, since I want to inform you that itten’s color circles are used even by professional designers from the fashion world, that is, when creating designer clothes, this is exactly the method of color selection that is used.

The internal structure of the site

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

All navigation elements need to be thought out in advance, or better yet, written down. The structure of the site should be primarily understandable and convenient for visitors. A lot of sites lose their visitors only because the latter, visiting the site, do not understand where and what is located. No need to clutter up the mass of buttons and hang up 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 striking correct example of site design is the Fb.ru site, where all sections are located in an understandable and convenient way for the visitor.

Biggest mistake

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

Poor site navigation

Do you think it 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, the color glut and the abundance of incomprehensible navigation, which will lead any visitor into a stupor and bewilderment. In order to avoid such errors, it is necessary to group all sections and place them in a separate navigation menu, which will be understandable for each visitor.

Registration form

Another important and frightening factor on the site is the registration form. Some are trying to collect almost the data of great-great-grandmother in the registration window.

Incorrect registration form

These forms of registration were fashionable before, when the Internet was just beginning to appear in homes. Today, an 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.

The correct registration form

Even if this information is not enough, 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 reminiscent of a job application form.

Web-sites' templates

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

It is also worth mentioning about entire Internet portals that offer to deploy their own website on their basis. In this case, there are both pros and cons:

  • The first and perhaps only plus is simplicity. The framework of the site is already, as a rule, modeled on such resources by experienced designers, the design of the site is brought up to 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 newcomers. But if the site is set up for serious development and competition for the title of top-1 in search engines, then it is better to refuse such a service.
  • Of the minuses - the provided templates in most cases cannot be edited or changed, you will have to use what you provided all the time. Monotony is the most important minus, which we talked about at the very beginning, because each site should be individual and differ in appearance from others. A lot of restrictions that it will be impossible to describe, since each such service has its own.

Final part

Everything described in this material does not claim to be the “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 errors. But the most important points described here in the form of color perception and the internal structure of the site are the benchmark in the design of the site. Wrong colors will scare away any visitor who has just visited the site, and illiterate construction of categories and elements of the site will prevent him from orienting himself and finding the necessary information. These points need to be given maximum attention and, as mentioned above, you should always look at any site through the eyes of the visitor, and not through the eyes of the developer.

Source: https://habr.com/ru/post/C30101/


All Articles