Errors in site design: 8 ways to spoil the site
What are the mistakes in design?
Design is very closely related to usability, they are inseparable. After all, design has a huge impact on the final perception and on the convenience of interacting with the site.
The design can cause various emotions, induce to something, pay attention to the individual elements. It is important to properly use the power of design and not to make mistakes that are present on many sites.
Let’s start the analysis of errors from the most global ones and finish with small ones, but no less serious.
1. Strictly on the grid!
The design layout of the site begins with the creation of the grid. If literally, then this is the separation of the page layout of the site by vertical and / or horizontal guides. The grid can be considered as a single frame to accommodate all elements of the site.
For work you can download the finished, for example, http://960.gs/, http://gridpak.com/.
Designers often create their own grid for each project.
How to determine whether used in the design of the grid?
Yes, very simple! If they neglected the design, then visually to the site visitors it seems that some elements seem to hang in the air, there are no interrelations with the other elements on the page.
Our brain seeks ordering, and we do not notice alignment. But we can easily see the disorder in the absence of it. Just take a look:
Neglect of the grid: elements are scattered around the page
All elements are aligned on the grid, on the page order
2. Uniformity? No have not heard
We all know the concept of style. The site also has its own style.
Separate design elements should be combined with a common style (design template), which is applied globally, for all pages of the site. This will help to achieve uniformity and facilitate the interaction of visitors with the site – they quickly get used to and understand what’s what. Communication of users with this site will be easy and relaxed, and, most likely, they will come more than once.
How to achieve uniformity in design?
Make sure that all the same type of elements on the site are decorated in the same way:
inner page headers;
subtitles in the texts;
texts;
links;
buttons;
menu;
icons;
filters and sorting;
Search.
The lack of uniformity in the design of the text and pictures on the main page
The layout (grid) of the same type pages should also be typical: the structure of product cards or blog articles.
It is good and convenient when the same type of information in the cards of the goods is presented in the same form and in the same place.
For example, the characteristics of all products are strictly on a separate tab and strictly in the form of a table.
Turning from card to card, the visitor will already know where to look for the characteristics of the product.
3. And where is the main thing?
Once on the site, the visitor often does not notice the necessary information, since it is difficult to distinguish it among other “noise”, disorder.
This problem arises due to the large number of catchy, distracting elements. Visual noise created by:
a jumble of bright graphic elements: pictures, banners;
too many functions, especially if they are not ordered, but scattered around the page;
use of more than 2 fonts in various sizes and colors;
the use of a large number of colors in the design elements;
lack of uniformity in the design of the same type of elements.
All this distracts visitors, and important elements of the site are simply lost sight of.
Help users of your site: select important information and the most important functions for them among other elements.
On the site on the left you can see that a lot of flashy elements have been used, which make it difficult to focus on one thing. We conjured a little over the site, removed all unnecessary. What happened – look at the picture on the right. Agree, it became much better.
4. Functions are primary
Almost all sites have standard functional elements, for example, buttons, input fields. Standard visual elements are used for standard functional elements.
In website design, you need to show that the button is a button, the input field is a field.
That is why in the pursuit of a unique design you should not abandon the visual templates that simplify the work with the site. For example, do not make the buttons look like pictures, as visitors may not even guess that these are buttons.
The buttons in the basket look like colored banners
“Continue shopping” button is like a banner
5. Is this a link or text?
To make it easier for visitors to navigate the site, links in the text should always be highlighted. A common reference design pattern is underlining and / or highlighting in blue. But this well-established pattern is neglected on most sites.
