Aug 5 2023

The day you become a better UI designer

I went from being a bad UI designer to being a good UI designer after learning a few techniques. I couldn't believe how simple it was. I'll tell you the main techniques here so you will learn faster.

The first thing I have learned is the 6 principles. They are the foundation. It will help you to get the base right.

#1. Contrast

A way of choosing a color based on the background. Black and white paper is the first universal contrast. It's not hard to figure out what the text is.

Bad Contrast

Here is a good contrast. Which doesn't hurt your eye and is easy to differentiate the text and the background.

#2. White space

When making UI design. Some parts of the element can have a big white space and other different white spaces. The goal of white space is to let users effortlessly distinguish each part of the UI section. In other words, group similar items in the UI so users know each part is different.

The only thing we changed here is the white space and it looks awful already.

By being consistent with the white spaces of the element we can transform the UI from awful to looks nice. The colors show different amounts of white space.

#3. Visual Hierarchy

Why do you think sites have in some places bold fonts and in other places small fonts. Well they do that to get your eyeballs to see what they want you to see. The Sign Up button can be seen more quickly than Terms and Services. That's the key. You should have to differentiate in your design what the first thing the user should see and what the last thing should see.

Check this and be mindful where your eyeball first goes.

If I guess right you first see A better place to do your case studys and you probably don't notice Organize text. Which is located in the Build report paragraph. Contrast and Size matter to indicate where the user's attention goes. Designers know what the first thing the user should see and last thing should see. You got to find yours.

#4. Complexity VS Simplicity

Everything should be made as simple as possible. Users always choose simple UI. Simple UI is beautiful. It doesn't have anything unnecessary. It got all it needed. Contact us section doesn't require a home address. And it's the same idea. If you place an image and don't indicate anything. Get rid of it. If you have a shadow in your button that is complicated for your eye ? Get rid of it. Just smooth color and a bit of hover is enough.

#5. Consistency

Be consistent with your border, color, font size, font family margin and so on. If you're using your buttons 15px border radius. Use that border radius all over your design. You don't want to give your button some of them radius and some of them not.

Inconsistent font-family, border and margin.

But by giving the same radius, using the same white space, same font size we can change the design instantly.

#6. Scale

It’s the amount of difference you give to one element corresponding to the other. It kind of seems confusing but it’s not. Look into it this way. If I have a title called “The day you become a better UI designer” and some paragraph in the bottom of it. The title should be bigger relative to the paragraph to indicate it’s the blog title. If I made it smaller or closer to the paragraph it would be hard to find out what the blog title is about. Or If I made smaller paragraphs and even bigger the title. We will get lost between.

Take a look at this and you will know what I mean.

#. The Artists Way

Have you seen artists copy other creative works ? Recreating other people works. Why do they do that ? Because if you have the ability to create the same art by looking at it's not hard to create it later without looking at it. Recreating helps to pick patterns and rewire your brain to think and design in professional way. In other words the professional who takes him years, you gain the experience in days.

Go to Pinterest and Dribble. Look at designs you like. Redesign it. Use Figma or other softwares. Do this for a while. Then try to create something original by yourself. You will probably get ideas. where the button should be, what font size I should use. What colors and contrast will be a good fit.

While you recreating it you will save the pattern in your head. That makes it easy for you to be creative and retrieve creative designs for your UI design.

Have you noticed using tons of colors in your design doesn't make it amazing as you thought it would be. That is because lots of colors make the UI hard to understand. Our brain love simplicity over complexity. That's why you use 3 colors in your design. There is a rule called 60-30-10. When you design you use one color for 60% of the time, the other 30% to differentiate something and the rest 10% to indicate a bold action. Like Sign Up, Schedule a metting. Well you get the idea.

Have you noticed I use the same rule in my previous examples? Take a look at casehunt and see how I used 3 colors only.