Top 10 UI Design Principles that You Can’t Afford to Miss

1. Always Start with the User

Whether is a client or an entire team that you’re meeting with, when working on a new project, you have to have a pen and paper to take notes. You cannot begin without understanding the people you are designing for. Ask questions, and find out what their needs, motivations, and fears are. Long story short:

This is the process every ux designer should follow. I strongly recommend taking a course or reading articles from these guys.

And What We See in The Real World

Ui Designers fixate too much on the artistic side of an interface and sometimes they hide features or push them below just for the sake of receiving validation and appreciation from a beautiful result.

On the other hand, ux designers don’t care at all about aesthetics, but rather on functionality. Anyways, I don’t know what’s the big deal with these two terms, so many people use them in the wrong context. Let me put it simply:

UI is part of the UX.

You cannot afford to say that I am more into the esthetic part of a product, neither that it doesn’t matter how it looks as long as it works. Find the middle ground, but put functionality prioritar.

You have to come through every stage of the process and each one of it is equal important no matter what the order is. You will finally gain insights, learn about your users and offer them a solution to their problem.

2. Think More, Design Less

This one I’ve learned it the hard way. Late nights spent and failing in creating something beautiful and functional at the same time. Whenever I have this problem, I’ve got to take a step back and reflect on the idea, talk with my wife or a friend to liberate myself, or you can do any other activity that I love.

Projects come and go, you will fail some and win many others. Knowing how to balance and understand yourself in the creating process is key, and over stressing with the thought of failing will not be productive or healthy on the long term.

Whenever you feel overwhelmed with a complex task that you don’t know how to solve it yet, just do this:

• Question Everything. Go and gather the team and ask questions until you find the root cause of the problem. I strongly recommend The Five Whys Method, by Taiichi Ohno who founded Toyota Industries.
• Make Sure Developers Have no Limitations regarding the implementation of the solution. There is nothing more frustrating than designing something and finally finding out that it can’t be done.
• Research and Ask for Help. As always whether you like it or not, there are people better than you at some skills, as you are better than others at others and that’s ok. Talk with other designers, see how they approach the problem, wireframe a lot, and go to your team to see what they think.
• Finally, Start Ideating. Now that you have a clear view and gathered all the requirements, it is time for the fun part. Open up Sketch, Figma, or Xd and start designing. Just trust yourself and enjoy the process. You will succeed.

3. Stick to Simplicity

A clean dashboard by Ayush Jangra

Even if you end up with a complicated design that has multiple features on it, you still can make it look simple, yes you can. This situation is called featuritis. First of all, who says design it’s easy? No one in the right mind, I hope.

If you’re working on a large enterprise, a product becomes complex with every release, and what seemed a clean and easy-to-use interface in the early days, is no longer available now. Only a tiny minority of expert users can fully understand its capabilities. We don’t wanna do that.

How do you overcome featuritis?

Let’s look at Gmail for example. What do we see here?

A lot of nav links, and some buttons, but somehow the information is well structured, the layout is still balanced, your eyes feel comfortable and you get the message right away. Here’s a method they have used.

Displaying options depending on interaction, nowadays called progressive disclosure.

If we want to delete an item you can check the checkbox near to it and some action buttons will appear above.

Also, make sure your app has red routes.

Let’s look at a UI part of a design. Now, break down the key elements that make the design. What do you see?

I know that you might be thinking why I decided to start with them. We all know that the first elements that draw our attention right away are the images UI designers pick to create a great impact.

Believe it or not, they will do anything to match a high-quality photo with the chosen colors, that together depict a spectacular output among their work.

It doesn’t mimic the real-world apps that we use in order to satisfy our needs, but, when you make a presentation on Dribbble or Behance, it certainly does the trick. If you don’t know yet what I am referring to, let’s take a look at this example:

You can buy this UI kit from here

This is a mobile coffee concept that I have been working on lately. I don’t try to promote my shot, just that I don’t want to critique someone else’s work.

The accent color here is a combination of orange and brown or something in between. Its official name is Di Serria. Now, this color will go well with light cream, white, and dark brown, basically coffee colors. The images that I’ve used, have these colors in their composition, as you can see. Overall, it looks pretty clean, modern, and pleasant to the eye (can I praise my work, more?).

Let’s add an ordinary product image as we see in a live mobile app, where coffee shop owners don’t spend a lifetime picking the right photo and putting it together.

I think we all agree that the image on the bottom matches better in this particular case than the one on the top. The photos in both are great, but in my case, I will stick to the one on the right.

You don’t need to spend too much time finding the perfect image, as long as you prioritize usability over aesthetics you’re still on the right path. But why not usable and beautiful at the same time?

The details are not details. They make the design. Charles Eames

5. Typography

Amazing typography by Benjamin Oberemok

I want you to keep focusing on details. What else do you see when you look at a great design? First of all, how do you recognize it? Is it crowded? Of course not. Can you see long paragraphs crossing side to side, many font styles, with low visibility? I think not.

At first glance, a clean interface is well balanced with hierarchized and visible typography pleasant to the eye, that communicates well the purpose and the intent of the product/service.

A correctly built typography offers the base for creating a harmonious user interface. If possible stick with one or two typefaces in order to give your text unmatched legibility, clarity, and consistency through all of the pages.

We have a great article on how to make typography the right way.

I’ve played a bit on a mockup to showcase the difference between bad and good typography.

In the above photo, we barely read the paragraph due to poor contrast. Maybe a white bg underneath the entire content will increase readability. Let’s see:

This is better in my opinion. As you can see, a small change can provoke a big difference.

I can go further and present some other tips for designers when dealing with typos, but this is a complex subject, so I strongly recommend this article.

6. Geometric Shapes

Designers often do anything to stay up to date with the latest design trends by adding that ‘spark of magic’ to their layout. I think this is ok as long as usability is not sacrificed for aesthetics.

There is a thin line we don’t want to cross when using these graphic elements that serve no purpose but to make a pleasant layout. We should delight our users with them, that’s why we should keep them ‘quiet’.

Before you add these details to an interface just make sure:

• The user still can perform his desired actions quickly and easily.
• Developers can easily implement your design.
• These non-functional shapes are not that prominent and don’t overlap with the main components of your layout.
• Don’t overuse them. We don’t want to distract our users from the main actions. Keep it simple.

7. White Space

Another key aspect that contributes to a successful design is the white space or negative space. We all know how stakeholders and clients want to add complex features to their products in order to accommodate users’ needs. We still have to maintain that clean aspect.

According to Mark Boulton, the white space represents the empty space between the elements of your designed website.

Take advantage of your space by offering it real use and don’t try to squeeze or disperse your content. Find the middle ground; white spaces give an elegant and peaceful note which relax the eyes while emphasizing the main message.

8. Components

So many designers waste their time creating the same components over and over again on every new project. Consider using ui kits to reinforce your creative process, or create your own set of elements that create consistency throughout the pages and depict a better overall look.

You can reuse them on future projects by applying different styles. This is how you build a toolkit.

By using common elements and patterns that leave no skeptical feelings, users will feel comfortable and happy to use your product and will encourage their friends to utilize it. What this have to do with anything?

I see some designers trying to alter basic elements like buttons for instance. A button is still a button, with straight or rounded corners, covered by a simple color or a gradient. Don’t try to be too creative, you don’t want your users stuck, wondering what an element is.

9. Illustrations

Laboratory Illustration by Matus

Although I am not a big fan of illustrations, they are quite fancy & fashionable at the time. I can’t deny it.

Designers love to create all kinds of illustrations, especially 3D ones, with bright and vivid or warm colors, that convey a strong feeling of originality that makes your clients differentiate from competitors.

Why use them? Here are some highlights:

• It brings that stain of uniqueness that sets you apart.
• They are fun & memorable and connect the user on a visual and artistic level.
• Overall illustrations ignite the entire look and feel of an app or website by bringing emotion, joy and why not, a smile to people’s faces.
• Have a significant impact and create a better user experience.
• Easy to customize

Why am I not a big fan of them? A few reasons:

• They’re not for everybody. If they are not designed well, the chances of being seen as a pro, decrease significantly.
• Sometimes a good photo transfers the message way better than an illustration, quicker and cheaper.
• Designers copy from one another and you risk seeing your illustrations used elsewhere, or a at least good copy of them.
• Creation time gets increased.

10. Practice, Practice, Practice

You can read articles, tutorials, and even books, but if you don’t practice a lot, all the information will be forgotten. You must strive for progress, not for perfection.

Don’t try to be a perfectionist, just try to be better than yesterday.

If you take a look at any designer’s work, start from bottom to top. You will see a history of progress, hard work, and dedication. There are no shortcuts.

The Take Away

In essence, creating a good design is something you can’t achieve in a month. Working in several companies, I have noticed designers at work and saw how they managed some of the challenging projects, and guess what, it always comes out to a human-centered approach. Behind every app, there are people, not users.

Continuous learning and practicing need to be a constant in a UX designer’s career. Doing ‘good work’ is not enough. You need to be curious and challenge yourself, step out of your comfort zone to become the best designer you could be.

Thanks for reading! Maybe you would like these articles:

How can you stay creative as a designer, when multi-tasking? Here’s what I’ve learned

7 Ways to Improve Efficiency as a Designer

How to Create a Style Guide From Scratch. Tips & Tricks