Five Common UX Mistakes Web Designers Make

It’s been a while since I wrote an article about common UX mistakes web designers make, but I failed to inform you, the reader. So here you go, the article is live on Toptal and it’s called Are All Trends Worth It? Top 5 Most Common UX Mistakes That Designers Make. The article expands on the subjects I wrote about here, on my blog, and goes into detail how the mistakes in question can be avoided. I hope you’ll enjoy the read. As always, feedback is more than welcome.

UI Snacks

Fellow Croatian designer Marko Stupić is nearing the end of his amazing Icon-a-day project. He wrote about the experience in his article How to become an awesome designer in 365 days. I found Marko’s journey so inspiring that I’ve started a similar challenge a couple of days ago. I’m calling it UI Snacks and my aim is also to create something every day for 365 days. Each day, I will fire up Sketch app and produce an illustration of some kind. I’m super curious to see how my skills will evolve.

Bulletproof Front-End Modules

While developing front-end modules, try to play out different scenarios for each and every module. Try to think two steps ahead and communicate with your team members what might happen when the module comes alive on a website.

Here’s what you might want to keep in mind:

  • Interactivity — If you’ve got a design which is missing some parts, do your best to prepare the missing styles. For instance, if your UI designer gave you a static mock up a navigation without the hover and active states, style them anyway. Another thing to keep in mind during development are the links — do they have large enough tap areas for mobile browsing? The size of the link area needs to be bigger for mobile users. Test the tap areas in different scenarios and in different environments. When you notice the UI is broken, fix it.
  • Viewport issues — When developing a module, keep in mind to test and style for various resolutions. A module is almost never the same for smartphone, tablet and desktop resolutions (and everything in between). On a desktop resolution, it might not need a bottom margin, while on a smartphone, it might. Test out as many resolutions as you can. Once the module breaks, fix it.
  • Content issues — If you create a module with a small amount of text (imagine a navigation, or a list of some kind, or a title), test it with different content and try to break it with a large amount of text to see what happens. When it breaks, fix it.

Remember, always try to keep things flexible and make each module bulletproof.