Designers are the artists of the development world. Without them, we would all have plain, boring, and misaligned websites and mobile apps like it’s still 1998. Nevertheless, just like we highlighted the Top 10 Mistakes Frontend Developers Make and the Top 10 Mistakes Backend Developers Make, we now turn our attention to designers.
Designers are humans just like the rest of us, and hence they are prone to make mistakes no matter how good they are or their amount of experience. So, today we will discuss the top 10 mistakes designers make, and how to avoid them in the future.
1. Poor planning
Let’s be realistic here. Clients change their minds about 5000 times before a project goes live. So, the planning task falls upon the designer. They are responsible for finding edge cases and be ready for anything their clients throw at them. But this is not an easy task. Therefore, many times frustration or inexperience makes designers isolate themselves from their clients. And, without communication, the final products will look nothing like the client hoped for.
Avoid creating a UI that doesn’t meet your client’s expectations, or doesn’t match their products and company identity. Ask questions about their vision, mission, products, and learn as much as possible about them. Ultimately, you are their “voice”. But remember to also keep it simple and straight. Users are already bombarded by information every day, so one extra image or too much text will overwhelm them.
Also, plan properly your repeating blocks. If you’re showing products or article previews, 2-3 lines of text are enough. Align that in a three-column grid and you are set. But, if you are presenting something more detailed, maybe consider a slider. That makes long blocks of text easier to read. And finally, remember to make your design with scalability in mind.
2. Not describing design elements
Speaking about how communication is key, designers are also responsible for how frontend developers read and understand the designs. But, many designers get wrapped up in their work and forget that. The reality is that what seems logical and intuitive for a designer, may not be that clear for a developer or project manager.
Avoid this by adding notes in your designs. Tools like Adobe XD and Zeplin allows tagging each element and leaving comments. So use the tools available to you and further explain f.ex. what a button should do or what page does a hyperlink connect with.
But more importantly, explain how different design elements look when interacted with, as this is an “unseen” design feature. Such as, how do buttons or links look like when hovered over or when becoming active.
3. Bad or missing error messages
Users need intuitive and self-explanatory designs. If they get stuck and confused, they will leave your platform in a heartbeat. However, we often find that designers under-think specific elements like login boxes assuming users will naturally know what to do. As a result, they either forget to add error messages that warn users when they added the wrong information. Other times they add messages, but they are either more frustrating or even rude.
Be proactive and put yourself in your user’s shoes. Don’t assume they will intuitively know what to do. And, don’t assume developers will add these messages for you. Developers usually will do it, but it’s probably be something like in the second picture from our example above. Also, one nice, polite line of text can be the difference between a new customer or an active user and a bounce.
4. Not thinking about empty states
Empty states or empty screens are edge case situations when we get errors like 404 – Page not found, or any kind of server 500 errors. This relates a bit with the previous point since designers might omit this error state assuming developers will fix it.
Do not assume anything and give your users a perfect experience to the T. Spend a bit of time for error state pages, like the 404 page or different server-side errors. Your users will understand better what is going on and will appreciate that you put that bit of extra effort in there.
5. No or bad typography hierarchy
We’ve covered the importance of typography hierarchy when we were discussing common frontend mistakes. Not only that it will look bad, but it’s also bad for SEO and your conversion rate. However, just like some developers, many designers forget there are reasons why we have these rules.
More importantly, it’s not the developer’s job to set the hierarchy, to begin with. So, follow the good practices of typography and set your headings and text styling before you start building the designs. It will be easier for you in the long run, and it will save developers a lot of time. Not to mention that the UX/UI of the final product is going to be so much better.
Also, remember to only use a maximum of two typeface families in your designs, one for headings and one for body text. And be consistent! Usually, you should use complementary families like a Serif type for headings and a Sans Serif for text. There are free online tools like FontPair or Reliable that can help with finding that perfect pair.
6. Poorly set spacing and padding
Padding and spacing are all about how clean your layout is and how easy it is for users to navigate a specific page. It also adds a pleasant symmetry to your layout, making each block stand out on its own, while still blending in nicely with the rest of the elements.
The simplest way to avoid this messy situation is to once again follow the hierarchy rules. Padding between each block needs to be larger than padding between the title and text within the block. Make it clear for your users what elements belong together, and what elements are separate. It’s all about visuals. And remember to be consistent.
7. Icons inconsistency
Icons need to match each other ad the designs in both color and styling. However, creating icons from scratch is a lengthy process many designers can’t afford. So instead, they do what we all do and go to sites like FlatIcon. And understandably so. The icons on sites like that are beautiful, professionally made, and free. Why reinvent the wheel when you can download it as a .svg file and personalize it however you want? The only problem here is that many times the icons we need don’t come in complete sets.
Icons need to be the same size, thickness, style, and general shape. So, spend a bit of time either finding matching icons or customizing the set manually. If you really have no other choice, don’t compromise your users UX, built the icons yourself. It will take longer, but the end results will be stellar.
8. Bad contrast
We’ve all seen examples on different sites where the text and the background were basically merging together, making it impossible to read. The same goes for icons. We’ve also seen sites where the two elements – text vs background or icons vs background – had such a huge contrast, it actually hurt our eyes.
Use tools like Adobe’s Color Wheel to find complementary colors. From there, create your color palette of a maximum of 5 colors and use them consistently throughout your design. Remember all of the rules you’ve learned above, keep hierarchy in mind, and showcase important blocks or elements using each color and keep it simple.
9. Forgetting about responsive design
We’ve said this before, we’ll say it again. Responsiveness should not be a question in your mind, it’s a must-have! Nevertheless, designers sometimes only make designs for a desktop screen. Other times, they only do designs for mobile and forget desktop. Either way, it’s not good practice.
As seen in the picture above, each screen size shows UI differently. And while developers usually fix the responsiveness in their work, it’s best if they have guidelines. So next time you create designs for a new platform, remember to do two sets, one for desktop, one for mobile. This will help your developers visualize how the UI changes from one platform to another and it will save them a lot of time.
10. Over-designing
This last point is closely connected to contrast and hierarchy, but mostly it covers all the above mentioned common mistakes. Similar to over-engineering things, over-designing things are a common problem. And experienced designers might fall into this trap every now and then as well. But, it’s mostly beginner designers that tend to overdo it. This usually happens when trying to highlight important blocks or separate different sections.
As you can see in the bad example above, too much color doesn’t actually make elements pop. Instead, it distracts and confuses the user. They won’t know where to look or what is actually the point of the page and will leave your site frustrated and exhausted. On the right, you have a good example, where everything has nice crisp contrast, and only the actually important elements pop up. Users understand the hierarchy and importance of each block and can easily follow the flow of the page. In other words, it’s elegant and simple, just as it should be.
Conclusion
Designers are wizards but also still human. Each and every point from our list of top 10 common mistakes designers make is mostly caused by miscommunication, a tight deadline, or inexperience. And they are understandable mistakes. Designers are under pressure from their clients, their project managers, their development team, and their users. However, this doesn’t mean they shouldn’t strive to create the best UI/UX with each project.
That being said, we hope today’s list helps you in your design work if you are a designer. And, if you are a passing user or a client with a project, we hope you now understand your designer better and will communicate more with them. Tell them what your pains are, but also listen to what their advice is. They are, after all, the experts.
