Most Most Common Design Mistakes

6 min readAug 23, 2022

Long time no see, huh? :) Fortunately, I’m back now with new content!

This time we’re gonna have a small talk about the most common design / UI mistakes we encounter, or, unfortunately, create.

We need to know that most of them are really details, yet they tend to leave a memorably bad impression on the user as these details are crucially important.

Please keep in mind that every app & product is different and there is no special formula for success, but I hope that this list will help you pay attention to minor mistakes, and thus contribute to the delivery of better and better design.

Default Shadow Settings / Material Shadow

I don’t think that there is something that I hate more in terms of Visual aspects, but please, avoid default shadow settings or Google Material Shadow. I’m more of a person who doesn’t like shadows in-app at all, but if you really need to use them, try to:

Avoid Default Drop Shadow Settings. These are meant to be adjusted for your needs.
Consider not using them at all, if you want to use google material shadows.
Make it very subtle. Use negative values of spread, pick a color from your background and make it a little bit darker.
Avoid doing shadows directly from black (only if your KV allows that).

Consistent Iconography

You may think that they are just icons, but in fact, they are a fundamental part of interfaces. I would even say they’re equivalent to buttons. But let’s not forget that they also have a decorative function, so consistency in their appearance is a key issue here. Many times I’ve seen icons with a different weight in stroke, some of them were filled, some were not, one was bigger, one was smaller. Here are some tips:

Use vector for your icons. It’s the only way to make sure they will stay sharp across all of the devices.
Use a consistent style. Decide if you want to go with outlined or filled elements. Choose sharp or rounded edges, and keep consistent line thickness.
Make sure the icon reflects what you want to show.

Aligned elements

I know it might sound silly, but at the beginning of your UI journey, there is a possibility that you will forget about some basic things. And one of them can be the proper alignment of elements or text. Good alignment is the key to making any layout look beautiful and balanced.

Also, I recommend sticking to the 8pt or 4pt (4pt for the win!) grid.

Don’t align related items to different sides. Always try to align related elements to the same side because it connects them visually.
Use 8pt or 4pt grid to make alignment easier.
Learn auto layouts in Figma, they will auto-align your element so you don’t have to worry and look for elements that might be off.

Low contrast

Low contrast is equal to low usability. Remember that. When you have low contrast between elements, you combine them all, stack them, etc. you end up with a dull and hard-to-read design. Don’t forget about the light and dark mode, too. When your product is intended to be used outside, it’s better to go with a light contrasted approach instead of dark, because the sun will be hitting your screen and limit your visibility.

The most common mistake is using typography on the image when you don’t have 100% certainty that it will be clearly visible.

Use high contrasting elements to get the user’s attention. Your CTAs should draw attention.
Use different font types or font sizes on different elements.
Try to use contrast to separate sections of your product. You can also separate elements from the background.
If you’re not sure about contrast, you can always test it with Figma Plugin
If you’re adding text on top of the image, the idea is to add a little shape with darkish color on opacity under the text to make sure that it will be visible.
Use different colors on various elements on your page.
Use whitespace to show contrast.

Let the user know what went wrong

It is good practice to let the user know what went wrong or what he did wrong. Generalizing mistakes or errors can lead to even more confusion which ultimately results in user abandonment.

If he logs into an application or site, clearly let him know that his password or login is wrong instead of saying there was an error. Remember, on the other hand, that from a security standpoint we cannot clearly say that one of the two is wrong, in which case we must always address the error in both fields.

Make sure you clearly communicate what’s wrong.
If the form is too long, consider breaking it up into logical sections and showing a progress bar to indicate what step the user is at.
Use different colors to properly communicate errors. Some will be more important and some will be more informative.

Too much text*

Most product users don’t read, but comb through the content. Nobody has time to sift through blocks of text.

Having too much text on your product won’t serve any purpose. For one, statistics show that up to 55% of people will spend less than 15 seconds on a website page. It will either overwhelm your visitors or distract them from taking action. It may be tempting to brag about your products and services, explain how amazing they are in detail, and squeeze in as many keywords as you can, but that’s what blogs are for.

Secondly, most website users would instead skim a page than read the entire content, especially when looking for specific information.

*Does not apply to products that are used for reading

Tips?

Try to say more with fewer words.
Make sure your copy is concise, expressive, and to the point.
Ensure that your page copy has been proofread and tested for emotional impact.
Hire a Copywriter.

Wrong fonts combination

To ensure maximum pleasure in reading, using, and browsing applications, you must remember to choose the right fonts. Not every serif font will match with sans-serif, just as not every sans-serif will match with sans-serif. The wrong choice of these fonts can hinder readability.

If you don’t have enough experience to pair fonts on your own, try to use different websites such as:

Poor padding and spacing

An excellent user interface should be clean and uncluttered, making it easy for users to understand it at a glance. This is why padding and spacing are so significant. Unfortunately, this is also a common UI error.

Some user interface designs have padding or spacing that is too small. Another common spacing mistake is uneven spacing, making your site look sloppy and confusing users with your chronology. Make sure that the padding between different blocks is larger than the padding between the header and the text in the block.

Tips:

Make sure you use the grid in your project.
Stick to 4pt or 8pt measurements.
Give breath around your object when you need to.
Less place = More mess.

Conclusion

Making a product which will be intuitive and usable for users is always a big deal. Sometimes small details can ruin your whole work. However, practice makes perfect. Pick up our hints and try it on your own, to see how it works.