8 Beginner Mistakes To Avoid As A UI Designer

8 Beginner Mistakes To Avoid As A UI Designer
8 Beginner Mistakes To Avoid As A UI Designer

Introduction

A UI designer is responsible for ensuring that the best is delivered when it comes to preparing layouts for technological applications. While the development team makes sure that the features are running smoothly, it is the responsibility of the UI designer to make certain that the users are being presented with those features in a seamless manner providing them with a wholesome experience.

While many designers keep working on and upskilling their strategies, there are some who are bound to make mistakes and eventually may lose this wonderful career for good. While working as a designer, even one misalignment, even one ounce of bad typography can make you lose your credibility as a designer. 

When you are beginning to work with UI designs, you need to have an open mind and welcome all the criticisms and suggestions you are provided with. Remember, perfection comes with practice. 

Understand the difference between UI, UX, and CX in this article.

Mistake 1: The Grid Format

Beginner UI designers like to jump straight into the nitty gritty’s of using tools like Figma, Sketch and Adobe XD by mixing up fonts, illustrations to create their UI designs. In this process, often the grid format is overlooked. The grid format is a format where the designers imagine the screen to consist of invisible 8 or 12 or 16 columns. This grid format helps designers to arrange their elements on the screen with ease and the design does not look messy. 

As a beginner designer, it is rather a good practice for you to follow the grid format and align and size your elements to perfection! 

Mistake 2: Resolution & Screen Size

Often UI designers when creating a web application overlook the fact that their website is going to be developed for all kinds of screen sizes. Let us assume that the beginner designer started to design the website desktop-first, now the design might look extremely pretty on his device but as soon as the user logs in with a phone or a tablet, all the efforts and hard work put into the designing of the website goes down the drain. 

In another scenario, let’s assume the designer has taken care of different device sizes, but now the problem arises with different screen resolutions. It is important to understand that there are hundreds and thousands of smart devices available in the market from where your user might access your web or mobile application. 

It therefore becomes imperative to test your designs against different screen sizes and resolutions.

Mistake 3: Wrong Contrast

The beauty of design is that every element is a separate entity for which you have to think of separately and create it separately while ensuring everything seems connected. Ask yourself this question, do the background element and the elements on your background are supposed to blend in or are they supposed to complement each other? 

Green background + Gradient Green Buttons? Nightmare, isn’t it? 

blog banner 1

What is happening here is that the background color and the buttons do not have a high differentiation in terms of contrast which makes the design look ugly and full of noise. 

Green background + White Buttons? Ah, now it feels better. 

Now what changed here is that there is a high contrast difference between the green background and the white buttons so that the two separate elements look connected to each other and still give a feel of them being separate elements and voila, your design has automatically become beautiful. 

Mistake 4: Rushing into Shadows

Shadows offer a realistic look to your images and if you have any 3D designs in your draft. When a three-dimensional object exists, it is only fair to create a shadow for it to offer it a more realistic feel. However, there is something that even experienced designers struggle with – where and how do we place the shadows? 

As we all learnt in our elementary science classes – a shadow is formed when an opaque object blocks light rays emitted from a light source in front of it. What happens here is that the shadow falls opposite to the light source. Often beginner designers make the shadows go in all kinds of directions (how is that even possible realistically). 

To understand where and how much you need to put your drop shadows, you need to imagine your object in real lighting and visualise the shadows. You can also study sketching of 3D objects which will help you understand shadows even better. 

Mistake 5: Respecting the White Space

Even the white space surrounding your elements is a part of your visual design and is considered to be a separate element altogether. The white space in your design offers a clean, minimal and aesthetic feel to your applications. Moreover, using white as the colour for your whitespace offers the design a professional look and feel. 

Beginner designers tend to clutter their application with too many buttons, icons and illustrations. That should be avoided at all costs.

Mistake 6: Information on Click Animations

When you are making an element clickable the user should know that the element is clickable. This can be done in various ways, you can offer a hover functionality, a border, some drop shadow etc. You also need to take care of how the buttons and clickable items will behave on click and after the element is clicked. 

Keep in mind that everything must seem to be connected, offer the users a wholesome experience and runs smoothly on the application. 

Mistake 7: Inconsistent Sizes

Often designers start using inconsistent sizes for buttons, icons, text etc. to fit in all the elements in a particular screen. This is a huge blunder in the world of design. It seems like you were in a hurry and did not pay heed to the fact that your designs should look proper, professional and interconnected. 

To avoid making this mistake, keep a separate page where you can put the icons and button sizes for reference and keep copying it whenever you wish to create a new one. 

Mistake 8: Too much information

As a beginner designer, the feeling of including too many things on your web or mobile application to show how talented you are and how much you know things is inevitable. However, doing so will only make you get a bad reputation in the design world. 

When it comes to the user’s psychology, he only wants to see what he needs, not more not less. Therefore, you should make sure that you are offering information that is not cluttered and does not cause stress and confusion on the part of the user. 

Frequently Asked Questions

What are the 10 rules of good UI design?

The 10 thumb rules of good UI design as suggested by Nielsen and Molich include – visibility of system status, match between system and the real world, user control and freedom, consistency and standards, error prevention, recognition rather than recall, flexibility and efficiency of use, aesthetic and minimalist design, help users recognise diagnose and recover from errors and help and documentation.

What are some common application design mistakes?

Some common application design mistakes include – forgetting to use responsive design, disordered content layout, forgetting about actual design elements, not taking loading time into account, design isn’t screen resolution friendly, call to actions are missing, target audience is overlooked, advertisements are placed in the wrong place etc.

What does a UI designer need to know?

A UI designer is expected to be well versed with the components of UI design – responsive visual interface design, layouts and grid systems, visual hierarchy, typography, colour theory, animation, accessibility and A/B testing.

What is a bad UI?

Making any common mistakes as stated in the above blog are a part of bad UI design. A UI is considered to be bad if your application takes longer loading time, not visually responsive, confuses the users and is too complicated with different elements, features and information.

Is UI design hard?

Hard is relative. If you are really into something there is no way it is going to seem difficult for you, rather, you’ll find yourself enjoying every moment of it.

Does a UI designer need to code?

UI designers rarely code their applications however knowing how to code is absolutely a cherry on the cake because then the designer will be aware of the feasibility of their design solutions and would not be too much of a burden on the development team.

Is UI design a good career?

UI designers are currently in large demand and the job is pretty enjoyable as well.

Where can I find UI design inspiration?

You can check out websites like Behance, Dribble, Awards and check out blogs by Muzli.

Conclusion

The term user interface consists of ‘user’ and that is what makes your target audience or your target users an integral part of your design process. What differentiates a beginner designer from an expert one is the fact where the experienced designers have worked with and studied users more than beginner designers. 

While not following the rules might seem daring and out of the box, going by the book is always safe when you are starting out in the field of UI designing. Make sure you are taking all the principles of user interface design into consideration. 

Happy Learning

By Pooja Gera