8 Basic Principles of Web Design
8 Basic Principles of Web Design
Successful web design consists not in a beautiful picture, but in practicality. The main on the site will always be the user, because he studies the information and makes decisions. Accordingly, you need to create all the conditions for a comfortable stay on the page.
Achieving such success depends on adhering to the principles of web design. The simplification of the perception of the content offered by the site depends on this.
Focusing on the user means understanding their actions. Therefore, before studying the principles I want to draw your attention to the line of users when surfing the Internet.
Human actions are aimed at achieving results in as short a time as possible. Of course, this also applies to visiting web pages. User behavior is a lot like shopping. He clearly knows why he came, and therefore goes to specific points. At the same time, the user wants to find them as soon as possible.
In the absence of a specific goal, they are looking for something interesting. Because surfing is very fast, so there is a small fraction of the time to attract attention.
User likes quality. The location of sections, font size, image clarity - all this quickly catches the eye. One mistake in a word or a blurred picture quickly scares and provokes to press the "Back" button.
User scans. The buyer does not bypass all the shelves to find the product: he focuses on the “anchors” (cookies department, vegetable department, etc.). Similarly, a site user quickly navigates through key points of the site in search of necessary or interesting information. As already said, he wants to get what he wants in a short period of time.
User does not wait. Surfing the web should be relaxing. If the web page makes you understand the material or look for a key point for a long time, the user goes to another site.
Users rely on intuition. Almost always visitors are browsing services and not reading all the material. For example, the section "In the Spotlight" should contain the latest news or key events, rather than the benefits of working with the service. Disregarding this detail will confuse the visitor.
User loves control. When moving to the next section, no one waits for pop-ups or ads. After all, they lead to additional clicks, which are very annoying. The site visitor makes decisions and wants to immediately get the result, and not to cope with the wrong relink.
The website should not raise any questions. When studying the page, the user is not obliged to think “What if I click here?”: The button, picture or text should contain a ready answer.
The complex structure and navigation causes a lot of problems. The user simply hard to understand the system and get to the final goal. Properly named sections, visible hints and a clear arrangement of the main elements will help to quickly move between pages.
Online store Zaful has a flat design and the correct structure. The user clearly understands where to go to buy a shirt or blouse. He can quickly reach the goal (product order), since the necessary buttons are located at the top of the screen, which eliminates the need to scroll the page.
Paradox of choice. Many people think that we go to the store, where is a wider selection of goods. In fact, we buy things where the choice meets our desires. Big variety intimidates more. This is confirmed by the experiment of Sheena Iyengar and Mark Lepper. They gave the participants two tables: in one 24 types of jam, in the other - only 6. More desire to buy something appeared in the second version. When a person sees a lot of information, he gets tired and does not want to decide anything, and therefore does not want to act.
The page should lead to the implementation of a minimum of actions. The client will be able to quickly move between sections and will not get tired of the content. Moreover, it eliminates a lot of distractions and simplifies the appearance of the site. Therefore, it is much easier to deal with its structure, which means that the goal will be achieved faster.
When scanning a page, the user always concentrates his attention on key points of the screen. They depend not on the information itself, but on its location. In the photo there is a “rule of thirds”, according to which the image should be divided into 9 equal parts. This is how 4 points of power are formed, to which the main attention is riveted.
What needs to be placed in one of these points on the site? Call to action. Go to any trading platform and note that the offer of starting work or making a purchase is always in one of these four points.
At the same time, you cannot place a navigation bar at intersections. After all, it prompts not to action, but to move to another page, which still needs to be dealt with. Maybe the user will get what he wants, but the site owner is unlikely.
An F-model is used when designing websites. We are used to studying information from left to right and from bottom to top. Therefore, the most important elements should be located in the corresponding parts of the screen. Most often, in the upper left of the screen is the name of the service, and the upper right is the registration button. Exactly on this should focus the owner of the service. It almost never reaches the bottom right. As a rule, they place advertising banners, comments, or leave empty space.
We are all impatient by nature. This is especially true of surfing the Internet, where among the endless content you want to quickly find what you want. The fewer clicks a visitor needs to achieve a result, the greater the chance that he will try the service itself in action.
First of all, take care of the loading speed of each page. The Aberdeen Group conducted a study that showed that a second delay reduces conversion by 7%. To find out the download speed on the site, you can use the following services:
- Google PageSpeed Insights;
- Sucuri Loadtime Tester.
Also, do not force visitors to immediately enter some data. Moreover, leave only email and password required for registration. For the first time logging into the site, the user wants to experience it, and not to disclose their data.
Ideally, first show how your service works, and then call for action. The user must understand why he "gives e-mail". In other words, he knows why he spends time filling out all the forms.
Today it is a trend in all areas, from the interior of the room to the photo. Web design is no exception. There are two concepts: positive and negative space. The first characterizes the part of the page that contains any information. The second is an empty space, white space.
Many are afraid to leave empty space on the pages. People believe that this creates an impression of incompleteness. But this is a huge mistake, due to which many sites become unreadable.
Web design of the Apple site in this context can be considered as a reference. There is always a minimum of information on the screen, but it is enough to answer all the questions and call for action. In many ways, its design is similar to the presentation of a product of this company. There is always a big picture and one or two sentences or a list on the screen.
When visiting a page, the user conditionally divides the page according to the priority and importance of information. So it is easier for him to perceive the content and make a decision. That is why the next Apple gadget can be found in a matter of minutes.
A few tips on the proper use of empty space:
1. Large font - less space between letters and vice versa.
2. One-and-a-half linewidth (150% of the font size). When using a small font, this parameter should be higher.
3. Share information in small blocks.
4. Navigation bar, headings or slogans should be in capital letters. There should always be a lot of space between them, as they are the key elements of the site.
Color is one of the most important elements of marketing. Fast food establishments often use brighter colors that quickly put pressure on their eyesight. So the visitor subconsciously leaves faster, which increases the flow of customers. On the contrary, expensive restaurants have pastel colors that create a feeling of peace.
However, choosing a shade is only a small fraction of success. A more important element is precisely the combination of different colors. Go back to the Apple site: it’s mostly dark. However, they are ideally combined with each other. The text blocks and navigation bar are completely white.
The Adobe’s Color Wheel is the perfect assistant. When choosing one shade, the service automatically selects 4 suitable colors. You can also take a high-quality photograph or picture, which you can admire for hours and upload it to the service. An appropriate gamma will be created based on the available colors.
Important elements of the site should always be contrasting (for example, white text on a black background). So they will attract more attention, which means they will leave the user on the site.
One of the principles of psychology in web design is to make a bright first impression on a person in order to gain his attention. This is fully applicable to web design. But in this case there is no margin for error. If in 8 seconds the user is not interested, he will leave the site and will not return.
How to attract attention in 8 seconds?
- use concise, catchy headlines;
- explain the purpose of the project on the main screen;
- add relevant video and images;
- animate the call-to-action buttons;
- avoid advertising on the main page.
For many sites, there are several traditions in their design. For example, today a lot of sites have registration and authorization buttons in the upper right corner. The navigation bar is usually located at the top and is highlighted in white.
We are accustomed to such elements and subconsciously look for them in their places. Such traditions do not change. Because of this, no one will call the site monotonous, patterned or boring. On the contrary, the user will be glad that the key elements are in their places.
The best products in the world have undergone many checks. But most of them were carried out in the early stages of product creation. Moreover, almost all tests were carried out several times. This is the only way to detect all inaccuracies and correct them.
1. Test each design element several times.
2. Find an independent test assistant.
3. Repeat the test.
You need to check the web design in the first stages of creation, and before launch. Only in this case, you can achieve maximum efficiency and create a high-quality project.
Blockchain-based digital asset platform