Four years ago, when I embarked on my UI design journey, I had absolutely no idea where to start or what skills I needed to land a job. Fast forward seven months, and I had already earned $24,000 on Fiverr. Now, I know exactly what you need to practice. For this reason, I’ve prepared a one-month plan for complete beginners. If you follow this, you’ll be able to track your progress and accomplish things much faster and efficiently compared to other beginners out there.
Generally, you can start earning after three months of learning UI Design. This earning potential largely depends on the amount of practice you put in. The timeframe can range from 3-6 months, depending on your effort and skill set.
If you follow the given guide and practice consistently, I guarantee that you can start earning your first income through freelancing or even land your first job as a UI designer. Follow the guide and let’s see you become a designer next month!
| Days | Exercises |
| Day 1 | Set up software’s & understand basic concepts |
| Day 2 | Understand the basics of Auto layout |
| Day 3 | Practice using Auto layout in your designs |
| Day 4 | Understand the basics of components |
| Day 5 | Practice designs through the use of components |
| Day 6 | Understand and use Variables in your designs |
| Day 7 | Implement the rules of Colour Theory in your designs |
| Day 8 | Learn how to explore dribble |
| Day 9 | Create and use of typography for different fonts |
| Day 10 | Implement layout and Grid systems in you designs |
| Day 11 | Understand and implement design system |
| Day 12 | Design your first app screen |
| Day 13 | Design 3 app screens from a real project |
| Day 14 | How to explore Behance |
| Day 15 | Design a complex app screen of real time project |
Day 1- Set up software’s & understand basic concepts
Setting up your workspace and installing critical software is the first and most important step in learning any new skill. It’s crucial to ensure that everything is set up correctly to avoid any difficulties during your 15-day journey to becoming a Pro UI Designer.
Installation of Figma:
You need to choose a design platform and stick with it throughout your UI journey. There are several other options available, but we will bet on Figma, and here’s why.
Firstly, Figma is a free software that works directly in your browser and also functions as a desktop app. Your work is saved automatically, so you don’t have to worry about delivering your projects to clients on freelance platforms. You can directly share the file link or export your designs in any format you prefer.
Follow the instructions in the given video, and you’ll be good to go!
Understanding the basics or UI design overall:
I’ve spent countless hours exploring videos on YouTube and have invested thousands of dollars in purchasing expensive courses. Through this, I’ve determined what genuinely works and what to avoid as a UI designer.
I’ve recommended videos that are precisely on point and are sufficient for you to gain a basic understanding of what UI design is and what role a UI designer plays in the industry.
If you already know the basics, you don’t have to watch these videos; you can skip this step!
Day 2- Understand the Basics of Auto layout
Keep in mind, mastering ‘Autolayout’ in Figma is crucial; you’ll thank me later for stressing its importance. The primary reason I’ve placed it at the beginning of your learning journey is because of the pivotal role it will play. It will help you stand out from other designers and make your designs truly unique. Trust me, you’ll thank me later for this.
Autolayout is a feature of Figma that enables you to construct designs systematically and control every aspect of your design in an orderly manner. The details are expanded upon in the video. For better comprehension, I suggest you watch as many videos on this topic as possible.
I have watched several videos on YouTube and the one I found most helpful is mentioned below!
Day 3 – Practice using Auto layout in your designs
Understanding Autolayout isn’t enough unless you practice it extensively because that’s when you’ll encounter problems that will help you strengthen your grip on this feature.
I’ve divided the practice of Autolayout into three distinct parts, and practicing each part is essential. Remember that you’ll be practicing and designing everything on Autolayout, so keep in mind the importance of each part and its practice!
Buttons & inputs:
You’ll be starting every design with these basic elements— what I like to call ‘the building blocks.’ These building blocks will eventually multiply and result in the design of an entire screen. Without having a clear understanding or grip on designing these, you’ll end up confused and frustrated later on. So, take your time practicing these, and you’ll be good to go. You can take more than just one day— the timeframe I’ve given is just for organizing and providing a system for you to follow and track your progress.
I’ve attached a video below. Please watch the video and practice a multitude of layouts before moving on to the next part.
Cards & boxes:
Next come the interactive components, which will ultimately be the most prominent elements in your screen design. These components are built from the ‘building blocks’ I mentioned earlier. It’s essential to learn how to match the styles of both and use them in combination.
Screens & Layouts:
These will be your final steps in learning Autolayout. You need to learn how to place your components into frames because eventually, you will have to prototype your designs. Understanding how to correctly position these components will significantly aid you in your future processes.
Day 4- Understand the basics of components
The term “components” is used differently in various fields, but in Figma, it refers to a part of the design that can be used multiple times by creating it just once.
You might be wondering, why create a component when we can simply copy the element we designed?
I had the exact same thought until it was time to prototype. Creating components is crucial if you want to produce an effective prototype because only then can you create different instances of the same element, link them into one, and then use it in the designs.
After years of experience, I can give you a helpful tip: only create components when you know you’ll need to do a complex prototype. Otherwise, I rarely use components in a small project. So, save your time and don’t fall for those fancy component videos you see on YouTube.
The following video should be sufficient in clearing up your concepts on these topics!
Day 5- Practice designs through the use of components
Learning how to create and use components throughout your design will always be beneficial in your prototype phase, so planning ahead for a project is necessary. I understand that you might sometimes skip this step, and that’s okay. You will eventually need this knowledge later on, and I want you to be prepared for it!
There’s no limit to creating components and how you use them, but the most crucial ones you’ll need are mentioned below.
Day 6- Understand and use Variables in your designs
This is a new feature that has been rolled out, and trust me, I love this feature more than anything else. That’s why I’ve dedicated an entire day to this feature. Trust me; it will save you a ton of time. You won’t need this in every project, especially in smaller ones, but you’ll definitely need it in larger projects!
Remember, there are a ton of other videos you could watch on this. I will also list down some of my favorites, but one thing I must mention is that you shouldn’t spend too much time on this. It’s just one part of the design that will help you save time and that’s it! So, spend your time wisely.
Day 7- Implement the rules of Colour Theory in your designs
Here comes the interesting part. I’ve seen many professionals and well-known individuals place a lot of emphasis on this component. Based on my experience, I can conclude two things:
1. Some people are naturally good at it:
I’m not saying you shouldn’t learn the basics. Understanding the essentials of color theory and how to create a color palette is necessary. However, some people have a natural sense for good design and color matching. You might encounter individuals who produce astonishing colour combinations with minimal effort, thanks to their basic knowledge coupled with inherent talent. If you’re one of those individuals, skip this part, my friend.
2. You will eventually get better:
I know you’ll strive to achieve the perfect colors in your first design and spend hours on it. That’s fine; spend your time, but don’t overcomplicate it. You’ll become more comfortable with time. I myself spent months using incorrect colours and ultimately realized that employing a design system for colours saves hours of my time. For now, just obtain a basic understanding of colour theory!
Day 8- Learn how to explore Dribble
If I had known this in the early stages of my design journey, I wouldn’t have wasted hours on a design that had no use!
The Hard Truth:
Designs on Dribbble serve primarily to attract traffic or represent concepts that are not actually used in industries. Explore through Dribbble only to get inspired or to keep up with the current trends. NEVER attempt to copy the designs you see there; it will be a waste of time. So, don’t repeat the mistake I did.
How to Get Inspired:
You’ve heard it said often: “get inspired by other designers!” But how? Let me break it down for you. When you browse through one of these platforms, look at the different parts of a design and try to snatch one aspect that you can grasp, modify, and make useful.
Try not to use this source too often or to grab exact designs as they are from there; instead, pick elements from this platform occasionally- it will benefit you!
Day 9- Create and use of Typography for different fonts
When it comes to typography, there are only two most important aspects of it that you are going to deal with. The first one is what fonts to go with, and don’t overcomplicate this. There are around 7-8 such fonts that you need to remember and those are enough to go with all your projects. I personally use only two fonts.
The second thing you will have to deal with is the most important one, the sizes of text to use. Trust me, if you work with the design system, it will save you a ton of time and effort. But you need to learn how to use such design systems and the basics of font sizes.
Fonts to Go With:
Font Sizes to Use:
Day 10- Implement layout and Grid systems in you designs
Having a basic understanding of layout will help you in every single project. Learning only the autolayout will not be enough if you don’t know how to use a proper layout, and yes, we will be using a design system for this.
The Grid System is what separates the amateur designer from a professional designer. If you know what grid system to use and how to use it, this will massively affect how your designs overall look and feel. You no longer have to memorize the sizes of different elements and stuff if you know the use of the grid system.
01. Learn the Basics of Layout
02. What is Grid system and How to use it
Day 11- Understand and implement Design System
When you use a design system, you don’t have to build everything from scratch, like your color palette, typography system, icons, and things like that. There are pre-built design systems available on the Figma community for free. So, trying to do everything by yourself is not a wise decision.
Day 12- Design your first app screen
Now, before you directly jump into your Figma, there are a few things you should do before every project. This will not just ensure that you produce quality content but also ensure that your time and effort are correctly utilized. Keep in mind to implement and use these in your designs: Autolayout, Design System Implementation, Grid System, Typography through a System.
Let’s dive into the first screen to get your hands-on practice of everything you have learned so far. You will have to copy the given design below exactly how it is. This will also give you an idea of how an actual design of an app will look like by using all the things mentioned above. Comment down below if you face any problems; I will guide you.
Day 13- Design 3 app screens from a real project
The screenshot attached below is from an actual project that I completed for a freelance client. Analyse the design with a focus on every single element like buttons, their fonts, borders, border radius, the type of shadow used, etc. Remember to practice according to what I have taught you up until now.
Day 14- How to explore Behance
This should be your number one source of inspiration, but learning how to use it properly will boost your creativity. Before every project, I use Behance to get an overview of the category on which I am designing.
Don’t fall for pretty images; look for designs that are made by agencies or people with collaborations because most probably those are the real designs.
Wherever you see the UI tag on images, remember this project is handpicked by the Behance team so it’s worth analysing.
Save every design you like, or at least like or interact with it, not only because you want to support the person sharing but also so that your Behance feed shows more similar designs.
Day 15- Design a complex app screen of real time project
This design below is from an app design that I created. Practicing this will make you efficient enough to handle any other complex projects. Remember, you need to practice a lot more than I have mentioned here, but this will give you an idea of how to practice and find your design inspiration.
Conclusion
Your practice should include finding a design just like I taught you how to, then analysing it thoroughly to understand every small detail, and finally copying the design into your Figma file and designing it yourself. The more you design, the more you will understand each fundamental that you have learned.
If you are reading this, I have a bonus for you. Design your first screens and comment down the link to the file. I will personally review your designs. Happy designing!
Leave a Reply