Beginner Mistakes to Avoid in UI Design

Experimenting and making mistakes is an important part of learning. Each day in my work as a Design Mentor, I see new design students making the same sorts of mistakes in their web/mobile design work. Hopefully by identifying those issues here, we can better learn to avoid them.

1- Not following a grid.

Grids help designers align elements on the page in relation to each other which often produces a neater, more logical design.
Although the grid-lines are invisible, most professional designers align their work to a strict grid, often made up of eight, 12 or 16 thin vertical columns. A well-implemented grid is a bit like a fairy godmother, it can transform your design from something average to something clean, clear and effective. Check out the same design and how the elements look aligned with a grid, and they look random and messy without it.

2- Consider the Fold and the different resolutions when you design a UI.

Keeping resolution consciously in mind when creating a new Interface will ensure less updating in the future and more success in maximizing visibility. I can't count the number of times I have seen designers test their design only in their monitor, and when their design is published then they notice it looks wrong in all the other monitors/resolutions. And even worst, it looks bad in the client monitor.

Based on solid research, viewers do not like to scroll. Design your website so viewers obtain the majority, or preferably all, of their information from the upper-most part of the fold. The “fold” is where the screen gets cut off and a scroll bar is needed to see the bottom of the site. Think of most newspaper layouts. If you design with the fold in mind, your website will be successful in allowing viewers to get the information they need at a faster rate.

3- Not having a high contrast between your background and figures.

Elements are perceived as either figures (distinct elements of focus) or ground (the background or landscape on which the figures rest). A low contrast between these two results in a noisy design. The background competes with the content and the result is a messy and distracting look. See for reference:

4- Drop Shadows.

When adding a drop shadow into your elements make sure to do it in a “realistic way”. How does a realistic drop-shadow looks like you might ask? It has to be soft and blend with the background, and to achieve that it is vital that you don't use Black for your drop- shadows. Shadows in real life are not black, they are darkened versions of whatever they sit on top of, because there is less light. See this image for reference:

If you were trying to recreate that, I don't think black at any opacity level would get it just right. If your object is sitting over an orange background use a dark orange, but not black with opacity!

5- Not Utilizing White Space.

Using white space helps to create focus, guide the eye in a particular direction, and create a clear visual hierarchy. By utilizing white space, you’ll avoid the ‘cluttered’ look that can impede your efforts to communicate with your audience.

Poor use of space around the elements just compounds the problem and the result is a cluttered mess with no clear purpose.

Don’t let text run up against the edge of an element. Give it space!

6-When Clickable Items Don’t Look Clickable

If you want a site visitor to click on an element, you have to make it obvious that the element is actually clickable. If it’s a link, either change the color or add an underline, and if it’s a button — don’t forget to use a contrasting color to the webpage. Also don't forget to add a hover state, specially in the Menu Links: It's a must for menu items to become highlighted when a user hovers over them.

7- Inconsistent icons.

When you mix squared corners with rounded corners, you don’t have a consistent look.
When you use a different color for each icon in your design, you don´t have a consistent look.
If you are designing symmetrical icons, make them all symmetrical and don´t mix them with asymmetrical ones.

In Conclusion.

User Interface design can be tough for a lot of reasons, but the biggest challenge is probably that there are so many ways to approach a problem. If you are starting your career in design, I would suggest to first dominate the basics: learn all the rules to later break them and go into more creative and complex layouts.

If you avoid these simple UI mistakes, your interface will be more focused, clean, and usable. If all else fails, remember, simpler is usually better. Happy designing!

If you want to read more about the best UI-UX practices give this article a heart. You can also follow me on twitter or in my blog: www.designtalk.io