Modern and quality web design: what it is

The goal of design is to achieve the goals you want to achieve with the site. Let's figure out what is what right away. UI (User Interface) is responsible for how the interface looks. That is, it's about colors , legibility of fonts and all sorts of other «decorations». UX (User Experience) is the user experience. It is responsible for the impressions and feelings that a visitor receives when interacting with your site. Which is more important? About 50:50. Both beauty and convenience are important. Although, to be honest, convenience is still a little more important, as evidenced by the numerous examples of craigslist.com sites that are “like from the 90s” design, which are popular with visitors because it is simply convenient. craigslist.com message board is ranked 191 globally as of May 2020. It's safe to assume that this is due to the advantageous combination of UI and UX.

You shouldn't start drawing the layout and developing the design right away. First, the target audience of your site is analyzed. A certain portrait of the user is drawn up. On its basis, you can project the visitor's behavior in different situations, predict his reaction, etc. Based on this At this stage, we involve specialists from different fields: marketers, SEO, psychologists and other experts.

After drawing up a portrait and defining the role of the user, you need to understand how he will behave when visiting the developed site. There are 2 ways to go.

There is a specialized Good UI project. Its creators collect website building templates that are A/B tested and show good conversion results. As they say: «Take it and do it.» Examples of popular patterns: < span>Z-pattern. Its essence boils down to the fact that the user studies the first screen, moving along a trajectory resembling the letter Z: the upper left corner, the upper right, the part of the screen in the middle part, shifted to the left, and the lower right corner Schematically, it looks like this, with the user paying special attention to the first three points.

F-pattern. It is recommended to apply to text content, placing it on the page along an abstract grid resembling an F symbol. If you look at the figure, you can understand that the logic of the pattern regarding places attention is similar to the previous one.IMPORTANT!It only works for the desktop version of the site.Gutenberg diagram.Describes user behavior in the corners of the screen.The site visitor always looks at the top left.The top right corner is treated as an area of ​​additional information. It is recommended to place forms or contacts here.The lower right corner is the so-called decision zone.This is a good place for the «Order» button and other important elements.But the lower left corner in most cases is left unattended.Something important to place here There are a lot of such patterns (there are more than 100 of them on the resource indicated above. The main thing is to choose the right one for your target audience.

Templates are good. But they are templates. And in some cases, questions may arise about their applicability to a particular project. If in doubt, it is better to conduct your own A / B tests. Yes, it takes longer. Yes , it can be more expensive.But the experience of many 3owls customers shows that it is worth it.There are many tools for testing.Popular examples are Visual Website Optimizer, Optimizely and Unbounce.In general, we recommend that you combine these 2 paths (approaches) whenever possible. Patterns and A/B testing will give you a ready foundation for UX/UI.You will understand where to place which elements, how to guide the user through the page, and even already have an idea about the color scheme.A little more work remains and the design will be ready.

We've got the basics out of the way. Now let's take a look at popular and working tips for creating quality web design.

Colors

In theory, the human eye is able to distinguish about 10,000,000 colors and shades, but in practice, the “ordinary” user distinguishes about 100, and the professional (whose work is related to design, drawing, etc.) - about 150. But even these 100 colors are more than enough to create effective combinations and cool designs.Color theory is a vast field that can take a very long time to understand.Let's look at a couple of basic points to consider when developing web design.Colors have their own semantics and evoke certain moods, for example, red, yellow, and orange motivate a person to take action, they are recommended for designing buttons and other important elements, green and blue are relaxing, often they prevail in the design so that the design does not “press on the brain.” Gray is associated with Really strictness and rigor. With it, you can emphasize the status of the site owner and the seriousness of the business. It is also important to consider the symbolism of colors in different cultures around the world. This advice is acceptable for those who create a site for a foreign audience. In general, there is where to roam. And it is better to deal with this issue together with specialists.

As of the first half of 2020, about 67% of Internet users in the world access the web from mobile devices. Against this background, more and more specialists are «drown» for the Mobile-first approach when designing web applications and sites It involves mobile-to-desktop development, i.e. based on a mobile layout where blocks and elements are added as the screen gets bigger, the goal of this approach is to provide the user with a “uniform” experience on all devices, if the vast majority of potential visitors to your site - mobile users and the specifics of the project, that it was originally designed for mobile platforms, of course, use the Mobile-first approach.But Desktop-first has its advantages.For example, with this approach, you do not have to return to the layout: all elements and the blocks are already laid out and they only need to be styled when the screen is reduced.This approach speeds up development in some cases.And in terms of design, Desktop-first or Mobile-first there is no fundamental difference. If the design is developed with high quality, with knowledge of the matter, then which approach you choose does not play any super special role. It's a matter of taste, convenience for the developer and a bit of SEO.

2-7 years... This is the approximate shelf life of a modern website design. Agree, the gap between 'from' and 'to is significant. Well, as it is, it is. The frequency of design updates depends on the area where you work, the specifics of the website, and a number of other factors.For example, if you analyze the TOP 100 marketing sites from the same Alexa rating, judging by the data from the archives, the average time interval between large-scale redesigns here is about 2 years and 7 months. Someone, but the big players in the marketing market know a lot about this. How to understand when design is needed? Analytics to help you. Monitor behavioral factors, take into account trends in web development, evaluate changes in the preferences of the target audience and you will be happy .Relevant design = quality and attractive to users.

Obviously, in order to create a modern and high-quality website design, a considerable amount of work is required. And not only designers, but also marketers, SEO specialists and specialists from other fields should take part in them. We are at 3owls we adhere to this approach and, you know, none of the clients complained.