Most Most Common Design Mistakes

Default Shadow Settings / Material Shadow

  • 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

  • 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

  • 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

  • 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

  • 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*

  • 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

Poor padding and spacing

  • 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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
iteo

iteo

iteo is an international technology consultancy & software engineering company, founded in Poland. Visit us on www.iteo.com