Designer’s mistakes aren’t always harmless and easily fixable. Some of them can make the website dysfunctional. We have brought together the most common mistakes a designer must avoid.
The most serious and irrevocable mistake is a poor layout. This is a typical mistake of designers who care only about the aesthetic side of design. If the page structure is not thought out and organized, the user can’t find way around. They don’t understand where they got and what they are offered here, and as a result, they leave quickly.
Design isn’t a goal in itself. This is a tool that helps to make the website more functional, convenient, and illustrative. The layout should be understandable and clearly structured. The user should see the most important information right away, and not look for it in the corners. Creativity should never harm usability.
Designers who don’t take into account marketing researches and aren’t interested in the details of the product and their target audience, also obtain a poor layout structure.
Poor navigation also belongs to layout mistakes, but for different reasons. There may be obstacles on the way of the user, associated not only with an unbethought structure.
Lack of integrity leads to difficulties in navigation. This is a non-uniform design, different color schemes, and usage of different styles. The lack of integrity confuses the user and introduces chaos into the project.
The navigation on each page shouldn’t change its location. All shapes and buttons should be the same. Icons should be made in the same style; information blocks should be separated by the same indentations.
Information is better perceived when it’s divided into blocks with indentations between them from 120 to 180 px. Different background colors also help to separate blocks.
Wrong:
Right:
Each block must contain certain information and lead the user to the desired goal, or the next block. The placing of blocks must have internal logic. Just making a few heaps and calling them blocks is the way to failure. One piece of information should logically follow another. For example, it’s impermissible to let the visitor see the order form first, and the product description only after that.
The lack of priority is also a mistake. It happens due to the monotony of the design or when it’s overloaded with elements. The priority of the blocks can be shown with the help of emphasis, brightness, and saturation of the color, typography. The visitor must immediately see the most important things and understand that they are important.
Emphasis in Design. How to Draw Attention
The image inserted after the text looks like a separate block. They should be united by a common background, border, or other design methods to restore integrity to the block. Large spaces between the elements also “break up” the block.
A missing menu or a hidden one that doesn’t have an arrow to return to the top of the page is a mistake. The hidden menu should also be noticeable enough to not have to search for it.
If the menu has too many positions, this turns off the visitors. They have no time to delve through large lists. This reduces attention and distracts from the main target. Therefore, you need to try to cut away all the unnecessary things. 5–7 menu items are enough.
Absence of buttons or, conversely, too many of them are bad for conversion. The more tasks you need to solve on one page, the more complicated and intrusive it looks, and the faster the user will run away from such a page.
Colors are perceived by people intuitively and instantly. A poor color scheme can frighten the visitor, and they will leave the website before they want to delve into the information. This is especially true for motley and jarring shades.
Many different colors create difficulty for perception and don’t allow us to see the main thing. To emphasize the accents, 1–2 colors are enough.
Low contrast makes the design boring, monotonous, without any emphasis.
Color that doesn’t match the topic of the website is a mistake.
The small distance between the elements, the absence of negative space creates an unpleasant feeling of “gripping” and tightness. This affects the perception of information.
The free space around the element works as an accent and helps to make it noticeable. Tightness visually “sticks together” the elements and turns them into one continuous mess.
Too much emptiness in the effort to make a minimalistic design is also poorly perceived visually and annoys the users.
The spaces between the semantic blocks, as well as the indentation between the elements inside the block, should be the same. If the indentation is too small, the content looks like a blind wall. Too large indentations destroy the unity within the block.
Wrong:
Right:
Alignment is the placement of an element or group of elements in regard to other objects. It helps to understand which elements are interconnected, makes information more clear. Mistakes in the alignment violate the structure of the page, make it inaccurate and unprofessional.
Each element should have a clear goal, for example:
Get rid of all unnecessary things, if possible. Design elements that don’t bring sense and functional value clutter up the design and distract users from their goals. Any creativity should be functionally justified.
This is a special case of a mistake with a pile of content. Too many photos and illustrations turn a page into a photo gallery. The user’s attention is distracted and lost.
The mistake is to use images and photographs of different qualities and styles that don’t harmonize with each other or violate the overall style and unity of design.
Stock photos don’t inspire confidence and disappoint users, therefore their usage is undesirable.
Unedited photos, low-quality photos (for example, taken with the phone) look unprofessional and spoil the design.
The mistake is to overlay text on an important part of the image or small details of the image. As a result, the text is not readable, the image is not visible.
Wrong:
Right:
The most important thing is to make the text easy to read and arrange it according to the semantic hierarchy. Bad typography turns the users away. Common mistakes are as follows:
The font size and thickness of the letters should clearly show what is important and what is secondary. H1 is always bigger than H2, and H2 is bigger than H3. The thickness of the letters, their color and brightness should also be subordinated to the principles of priority.
Wrong:
Right:
Such a title doesn’t look good, is difficult to perceive and draws all the emphases to itself. Large font is only good for short phrases.
It’s necessary to divide continuous long text into paragraphs, separate it by images, and use fonts to highlight the main thing.
The headers refer to the paragraph following it, so it should be closer to it than to the previous paragraph. Otherwise, the text block will visually break up. The distance from the header to the beginning of the text should be approximately equal to the distance between paragraphs.
It’s a mistake to use many different fonts in the text. Using more than 3 different fonts destroys the structure of the text, makes it poorly readable and unprofessional.
Wrong:
Right:
Formatting mistakes are a frequent occurrence. For example, a lot of text information with center alignment looks bad.
Wrong:
Right:
Too small or too large line spacing worsens the perception of the text. Line spacing should be 30% bigger than the character height.
The width of the lines should be determined not by design, but by the readability. You can offer to read the text to a non-designer, and they will tell you whether the text is well readable.
Not enough contrasting font in combination with the background can make the text unreadable.
Wrong:
Right:
Icons shouldn’t stylistically stand out of the general style and violate the design concept. For example, if the logo has rounded corners, then square icons may not look harmonious.
Any designers’ tricks that are out of fashion and are no longer in trend are a mistake. Outdated design disappoints users and reduces site conversion.
Of course, this is not a complete list of mistakes made by designers. According to the experience of the designers of our team, not the one who does nothing, makes no mistakes. The one who isn’t interested in the work of others doesn’t seek to learn and apply knowledge in practice, is mistaken.
We wish everyone more knowledge, useful practice, and fewer mistakes.
The Outcrowd team.
