UI Design: Did you know this 7 tips formula for success?

When you start a UI Design project, you know the goal and you will probably have an idea on how to achieve it.

However, it’s very common to miss the mark due to different factors. Maybe overconfidence

When you start a user interface design project, you know the end goal and you will probably have an idea of ​​how to achieve it.
However, it is very common to lose the brand due to different factors.

Sometimes it can be overconfidence, others due to lack of time.

And very often because the work is done as a freelance and you don’t have the adequate resources required in a complex (and complete) UX process.

In this article I am going to show you a series of tips that will help your project be a success and that your talent will shine.

Tip 1: Research

As we all know, there is no UI without UX. And there is no UX without research.

Ergo, by transitive property, there is no UI if there is no research.

And when we talk about UX research (or UI Research as well), we have to keep in mind that the methods are many, and that we probably won’t be able to access ALL of them.

We may not even have access to most of them!

So this is a list of research activities that we can easily do and that will have a striking effect on our user interface.

Competitors Benchmarking

This method consists of analyzing the competence of our project. It is a good idea to ask the customer who their direct competitors are. But it’s also a good idea to add others that the customer doesn’t know about. For this, we will add those who stand out for different aspects of their interface. Once we have this list of competitors, we analyze which elements in common, and which differ. And we also look at aspects such as the usability of the interface and overall UI Design

Personas (or Proto-Personas)

If you do not know what personas are in UX, you can see our article Personas: Learn how to identify users in UX.

If you already know this, or if you have already read our article, you may say, “OK, I don’t have the resources to develop people.”

Well, start with proto-personas. It is not the same, but it is infinitely superior to working from your own subjectivity!

To create proto-personas, you can join a group of colleagues.

It is always preferable that all participants in the process are in the same place at the same time (and it is much more fun and healthy), but if you can’t … well, you can make a post on social networks or forums to seek help

Wireframes

Incredibly, the foundation of UI design is usually ignored by many novice designers. A lot of designers believe that going straight to interface design without going through wireframes is a time saver and that wireframes are unnecessary.

The reality is that wireframes are essential and will save us a lot of time and headaches.

Wireframes can be low fidelity wireframes (made with paper and pencil) or high fidelity (made on a computer with tools such as Balsamiq, Pencil, Moqups, etc.)

Other research tools

To the best of our ability, it is always a good idea to try testing with users. Even the simplest test is going to be better than nothing.

Another good idea is the use of formulas, especially Fitt’s Law, which will help us understand if an element is functional or if it has problems.

Tip 2: Accessibility

Although many do not know it, there are laws that force sites to be accessible in almost all countries. Although unfortunately they are not enforced, from time to time multimillion lawsuits arise because … it’s the law!

In any case, even if it were not a law, our task is to provide the best possible experience. And for that, accessibility is essential.

And if you don’t do it out of respect for users, do it for money: almost 20% of the population has some type of partial or total, complete or circumstantial accessibility problem.

Tip 3: Color Theory

Each product or service has intrinsic or perceivable values ​​that can in turn be represented by colors. Although the psychology of color is not an exact science, it has been shown that certain colors generate a certain type of reaction in users.

With a good understanding of the psychology of color, we can use its precepts to generate more satisfying and effective experiences. We can calm the user down or we can bring him to a state of excitement. We can provide the user with a sense of security or we can convey danger or warning.

The important thing is that we know that color is our ally and that our interface will be much richer and more effective if we use the appropriate colors for the intended purpose.

Tip 4: Use grids

Remember that your interface has to be programmed at some point, either by you or by a developer.

Furthermore, if you are asked to design an interface that is going to be implemented by another developer, you should ask him if he NEEDS some kind of grid. Or you risk having serious problems with your client

(Scientific fact: no matter the reason or circumstance, in 101% of cases where there are problems in the code, the programmers will say that “the fault lies with the designer”)

Source: Myself! 🙂

Returning to the subject, from a visual point of view, the use of grids will help you create more aesthetic and ordered appearances in your UI Design. You can even use the 8pt Grid or similar.

But in addition to the aesthetic appearance, if you use the grids of frameworks such as Boostrap, Foundation, 960, etc., you will greatly facilitate the code work.

Especially if your design is responsive and you must implement on desktop, mobile and tablet.

Keynote is: the use of grids is something that will help us in every way, and we must take it into account for our UI design

Tip 5: Design for Different Devices

A little related to the previous point, but a section in itself: how will your interface look on different devices?

Are the most important elements (such as CTA or any actionable item) visible or easily usable by the user? Or if you go from desktop to mobile, will you lose the focus of elements?

More things to consider: do you know what platform it will be developed on?

Do you know if for example the elements are required to be native to iOS or Android or if you can add elements freely?

Do you know the HIG standards for Android and iOS?

Did you ask if they don’t need to use a framework like Material Design?

The images you use … can they be used in a mobile device as well as in 4K? And if not, is the interface expected to be used on 4K or large screens?

All these questions should be asked at the beginning of the project, and the information they provide will be of great help to make your project a success and your clients very satisfied.

Tip 6: Create design systems

With the proliferation of tools like InVision, Zeplin, Sketch and others, it is very easy and dynamic to create design systems, element libraries and documentation.

Design systems allow our UI designs to share the same style. This will give us more consistency through the different screens of our interface.

It will also allow our users to do a quick visual scan that allows them to understand at a glance the affordances of an element in our UI design.

Finally, it will shorten the development time of our project, both in the design and implementation stages, since there will be no doubts about which element to use and how they should be.

Tip 7: Create a checklist

Before submitting your work to the client, it is an excellent idea to create a checklist where we can review all the work done and all the items to be delivered.

Since depending on the project there are different deliverables and different tasks performed, there is no “one size fits all” checklist, but some ideas about the items in it may be:

Review all the tips cited here 🙂

Well, it seems obvious, but … did you do everything we said? If not, why not? (You may have something better, consider it!). If so, congratulations, your UI design is probably much better than it would have been

Check spelling

We should always try to be professional and check the spelling of the interfaces we design.

Check alignment of elements

We must verify that our elements are aligned both vertically and horizontally. And this alignment must be consistent: If we decide to align to the center, all the elements of a component must be aligned to the center (or left, or right, or baseline, or whatever we have decided).

Review interactive elements

We must check that the elements work properly, whether they are only designed or implemented in code. A beautiful interface is useless if it doesn’t work.

Respect regulations and standards

Our UI design may require certain standards (for example ISO-9241) or not. But it will always require that you follow the standards of quality, usability and accessibility.

A concrete example: it is very common in designers not to use labels in forms and to use only “placeholders”.

Not using labels is an aberration in terms of UX, but if we want to do it, we can use techniques that allow us to have no visible labels, and still be present for reasons of accessibility (for example: floating labels)

Deliver assets

You have to ask the client or project manager what are the required deliverables and verify that everything is in order. The assets can be only the source files, or another type of delivery may be required, so we must confirm what exactly is required of us.

Conclusion

Following the above tips, you’ll have a solid foundation for all your present and upcoming user interface designs based on UXD frameworks.

These methods are solid, proven and used on all big companies, so make sure to internalize and naturalize them, it’s really easy and pays off!

Fabio Devin

Fabio is Bachelor in Marketing, Master in Human Computer Interaction and a UX Evangelist.

He worked for some of the biggest companies in the world. As such, he has developed entire systems and businesses for clients of all sizes.