Do you want to learn UI design?
or, Do you want to improve your UI design skills?
Searching all over the internet, are you just getting the theory of UI design, not any specific way which can help you to improve?
Well, when I started designing in 2012, I was alone. All I got some theory of design, no continues way of learning UI Design. After that, till now I have learned all the things by myself.
But you are not alone!
For you, I have started this series called Learn UI Design.
This series is for beginners and mid-level designers who want to learn and improve their UI design skills in a better way.
I am going to share what I have learnt in these six years as a UI Designer, which mistakes I made and what you can do to avoid those mistakes and how can you learn UI Design faster.
So, let’s get started Chapter 01.
First of all, all the beginner designers make a few common mistakes while doing UI designs. I am not going to share all in this post.
But one of the most common mistakes beginner designers make is they give lots of attention to the “unnecessary” things while starting any design. Yes, I did it too for a long time!
Let me ask you this question. If you are designing a landing page, how do you normally start your work?
I bet most of the designers start the visual design directly. And then they get lost with lots of questions and confusions.
How should my Hero area look like?
Where should I place the logo and the menu?
Should I place a form in the hero area?
Which image should I choose?
Which typeface should I use?
What should be my colors?
… And many more things!!
Lots of confusions, right?
Trust me or not, these are the things which are dragging you back and making you slow in the process.
Do you feel the same now?
To help people like you, I am going to share 6 powerful steps which can help you to make your design process 10x faster and you will see the results immediately!
1. Design is a solution:
Always keep this in mind that design is a solution you are providing to the customers.
When it comes to designing a new UI, many designers think it like a presentation of color and typography without any specific goals. As Steve Jobs said,
Design is not just what it looks like and feels like. Design is how it works.
Every time you are designing something, you are actually providing a solution. To start a new design, start with a solution. More specifically, start with a function.
As you probably have made a sketch for your project. Now you have a plan what to do or what not to do. This is the time you jump into the visuals.
3 things you should never do when you start your visuals:
- Don’t search for the perfect image
- Don’t think about the fonts. Start with the basic fonts like Roboto, Helvetica or whatever you like most.
- Don’t get panic about choosing colors.
If you can avoid these three things in the first place, your design process will be faster like a rocket.
2. Start with a rough sketch:
I know, some of you may ask, sketching is a part of UX (User Experience) Design, not UI Design. I cannot deny that at some point.
But, sketching is not just a job of UX Designers. Rough sketching actually helps any designer to reveal the ideas which are dying to come outside of your brain! It really helps!
Our brain works very fast than our hands. When we are doing direct visual designs on the computer, we are limiting ourselves with ideas because it makes our brain slower and fixed with a single idea until it’s visual on the screen.
But when you are using a pen and paper and you are doing rough sketches, you are not thinking about any tools. The only tool you have is a pen and you are just drawing what’s coming in your mind. That is faster than any computer work!
Now maybe you are thinking, I am not good at drawing or sketch, how can I do that?
Ok, let me tell you, you don’t need to be an artist to sketch your ideas for an app or website.
Yes, you heard me right.
Another thing is, you don’t need to make a perfect sketch for your project. For example, if you are doing a sketch for a business landing page with 7-8 sections, you should take only 2-3 minutes to finish that!
Yes, only 2-3 minutes. The reason is you need to keep your brain working faster so that you get different ideas. If you do a sketch taking 15 minutes, your brain won’t provide any more ideas! Don’t believe me? Try it!
Why don’t we start with a demo project so that you understand things better? That’s a good idea, right?
Say, we need to design a landing page for an online product which helps the people to build a mobile app without any coding knowledge and the company needs customers emails for marketing.
Here, 3 things we need to focus on.
- The goal is to collect emails.
- People need to understand that this is a mobile app builder
- It should be straight forward and easy to start.
Here are a few tips for you before we jump in:
- Spend less time thinking about new ideas
- Keep it basic. Don’t go for details.
- Use basic shapes to sketch.
- Do not use text or color. It kills time.
- Never jump into the visual design with one sketch. Make more than one versions.
Now where to start?
We will start with the Hero area (or, some people understands it with the banner area) for this post. If we go for a complete page, this post will be huge (which you wouldn’t like!)
So, we can start like this:
These are the hand sketch done by me. You can see that I didn’t focus on any detail here. The lines are not straight which tells you I have done it very quickly. I think the only person who understands this specific sketch is me because I have done this! No one needs to understand this if you understand your plan. And that’s actually the right way to do the sketch. Think less, draw more.
Let’s select one sketch from these to start the visual.
3. Limit the choices:
Now, since we have our plan ready (I meant sketch), we can jump into the visual design. You can use any popular UI Design tools like Sketch, Figma, Adobe Photoshop, Adobe XD or Invision Studio, whichever you like most. All these tools have almost the similar functionality.
But, before jumping in, one thing is important. Our goal is to make our life easier as a UI Designer. To achieve that, you have to start with plans.
Most of the designers spend (I should say “waste”) their time on selecting specific font size, colors, padding, line height etc while they are in the middle of a design.
Random questions hit their mind.
Should I use a 10px radius or 15px in this image?
Should this text color a little bit darker?
Should this text have 24px font size rather than 28px?
…and many more!
That’s the wrong way.
For example, these boxes have headlines and paragraphs. But can you recognize that these paragraphs have different font sizes?
What could be the solution here?
Limit your choices from the first.
Create a style guide
You don’t need to spend too much time for a perfect style guide. Let’s start with the basics for now. I will share more about creating detail style guides in different chapters.
Let’s start with the colors.
We won’t pick or select random colors while designing UI. Rather, we will create a default palette to start.
Our primary color is Green. We will create a few shades of green to start.
We will do the same thing with the fonts. To keep our design consistent, we are going to create a default type scale system.
I am starting the font size with 14px and then it will grow. Here is an example which I will follow:
You can just copy my font size set or you can create your own.
We can do the same with Buttons, Images, Icons, Spaces etc. Now you know the basics. I will explain all these in different chapters.
4. Keep it simple:
Now we have our sketch, our style guide. It’s time to start the real work.
Never go for hard work at first. Start with the simplest thing. Keep things simple and straight.
Let’s start with the hero area sketch we selected.
We can see three things here.
- Header with Logo and Menu
- A headline, a sub-headline, and a form
- A mobile image on the right
I have a question for you. Which one do you think is the function here among those 3 points?
Let me help. The headline, sub-headline, and the form is the basic function here. Why? Because those are the things which are talking to the customers and pushing them to take actions. Got it?
We will start our design with this function, not the menu, not the image. But we won’t design anything fancy here. We will keep it simple as much as possible. This way, our design process will be faster because we are only focusing on the functions.
So, here how it looks at the first version:
Straight forward and simple, right? You also should do the same from now.
Now, you may ask, Farhan, we already have colors and fonts. Why aren’t you using those?
Good question! You will get your answer in the next point.
5. Grayscale is powerful:
As a Visual Designer or UI Designer, your job is to create the best visuals for your customers so that they feel the UX easy and comfortable.
One of the most difficult job as a UI Designer is to control the focus of your customers. People are distracted always. They give you very less time to get their attention. A study says you only get about 4 seconds to impress your first customers! Now you can imagine how difficult it is.
To design this Hero area, a beginner designer would get started like this:
He selects a shape and gives it a color.
Then he creates the headline and gives it another color.
Then the form comes. He creates this too and gives colors on input and button.
2 things happen if you start like this:
- While designing, you are thinking which color should I use on the button, which color on background, which color on the fonts so that I can create focus. And this is actually killing your time.
- Doing this kind of things, most of the time, you will give the wrong emphasis on wrong elements because you are not seeing it all together.
Here is an example:
The reason you should start with grayscale (Black and white in other words) is it gives you the power to understand which things need to be focused and which are not. Let’s see another example now:
See? We easily understood where to focus and where not. By changing a few colors, it got the proper focus and design.
Now it’s time to work on some details.
6. Detail comes later:
Yes, detail comes later. After doing the design in grayscale, you can go for the details slowly.
I will start with the logo and the menu.
Now, I can add a hint under the CTA (Call to action) form that customers can use this service without any credit card. That would be a cool influence to get started.
To give a finishing, I will add an illustration of mobile with some customization. I have used a free illustration here from Undraw, a great source of free illustrations.
That’s it! I have created the hero area of the landing page. Now it will more easy to work on other sections since I already have the style guide with me.
Following these 6 steps, you can easily speed up your design skills and also can create meaningful UI Designs for your next projects.
In the next chapter, I am going to discuss details on colors. If you don’t want to miss that, join my exclusive list right now!
Comment below and let me know if these tips were helpful for you. I am waiting to hear from you! See you next week.