Designers` Mistakes
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.
1. Incorrect layout structure
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.
2. Poor navigation
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.
- No unity
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.
- No dividing into the blocks
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:
- No sequence and priority of blocks
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
- Blocks break up visually
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.
- Troubles with the menu
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.
- Troubles with the buttons
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.
3. Bad color scheme
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.
- Brightness and motley
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.
- Monotony of colors
Low contrast makes the design boring, monotonous, without any emphasis.
- Not matching the topic
Color that doesn’t match the topic of the website is a mistake.
4. No free space
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.
5. Indentations and alignment
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.
6. Too much content
Each element should have a clear goal, for example:
- to show the product appearance
- to evoke certain emotions
- to illustrate information
- to call for action
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.
7. Mistakes in using images
- Too many images
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.
- Images don’t fit together
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.
- Using stock photos
Stock photos don’t inspire confidence and disappoint users, therefore their usage is undesirable.
- Low-quality images
Unedited photos, low-quality photos (for example, taken with the phone) look unprofessional and spoil the design.
- Poor text overlay on the image
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:
8. Mistakes in working with the text
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:
- Lack of font hierarchy
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:
- Too long title in large type
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.
- Wall of text
It’s necessary to divide continuous long text into paragraphs, separate it by images, and use fonts to highlight the main thing.
- Equal distance between headers
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.
- Variety of fonts
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:
- Text formatting
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.
- insufficient color contrast
Not enough contrasting font in combination with the background can make the text unreadable.
Wrong:
Right:
9. Icons don’t match the overall style
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.
10. Outdated effects
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.
Instead of a conclusion
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.
