UI Design is the easiest skill to learn compared to the other skills. Mainly because it's something, you can learn on your own. Learning to design a good-looking interface that makes sense is often given the least emphasis by beginners learning design. They often give maximum focus to UX Research and UX Processes because that's what they see and read online. Truth be told, Product Designers do quite the opposite.
What you need to understand is that not everything needs an empathy map to be done. Not everything needs card sorting. Not everything needs sending surveys and doing user interviews. Not everything has to start with the double diamond process.
In reality, a large percentage of design decisions are made based on insights from 3 sources.
Data
Product Designers work with Product Managers daily. Make sure to read the chapter 'Working with Product Managers'. Many projects require quantitative data which is already available with the company.
For example, if you're redesigning your app's onboarding experience, you're probably doing it because there are significant drop-offs across various steps. You need to sit with the Product Manager and understand what's going wrong, where, and why.
Competitive Analysis/Benchmarking
When designing user flows and coming up with solutions, designers do a lot of competitive analysis of other products that are out there. Often times just downloading these apps or looking at screenshots is more than enough to make design decisions because these are tried and tested solutions.
However you still need to validate and see if a particular solution works for your use case and your users. It's not just about copying others. Sometimes even competitive analysis may not work because you have a unique problem that needs to be solved.
Your own intuition
And finally, just by using your critical thinking and common sense, you can make many design decisions. If you always have to rely on users to make design decisions, then you're not really a Product Designer. It's extremely essential to build your intuition to make decisions.
You always have the ability to test your solution and make changes if needed since design is an iterative process.
As I mentioned before, to become a Product Designer, you need to train your brain to think in a certain way. In the end, every professional is solving problems. But based on the type of problem, a particular mindset is required to solve a specific kind of problem.
And as a Product Designer, you first need to develop an eye for design. You should be able to understand what looks good and what looks poor. More importantly, why does something look good or something look bad.
One of the most important ways to develop an eye for design is by comparing and setting benchmarks from time to time. This comes down to observation, but this is also a skill that needs to be learnt.
A good music composer knows the difference between a good and a poor music track because they know what makes a good music track. Over many years of making music and listening to music tracks, they have understood what the benchmark is to decide when a poor music track becomes a good one.
Similarly, you need to become proficient at UI Design; you need to practice and get an understanding of what the benchmark for good UI is.
With that being said, let's dive into Figma and understand more about it.
Before I get started I want to mention that you can find the link to the Figma file at the end of the chapter. There are walkthrough videos linked in the Figma file that explain things in more detail. But I encourage you to read the below content before watching the videos mentioned in the Figma file.
The first exercise is to recreate screens of well designed apps. We all know that the best way to learn is to copy, irrespective of the skill. Be it singing, film making, or even cooking. It's very easy to learn because it only requires primarily observation skills.
There are many people who start learning by recreating screens, but they have no idea if they are doing it correctly because they don't know how to test it themselves. They don't have a benchmark to learn and compare from. This is the problem I aim to solve.
Now don't mistake 'recreate' for the word 'redesign.' 'Recreate' in this context means to create an exact replica of the original. 'Redesign' means to create something similar.
So with that being said, it's time to recreate screens in Figma. Here is the Figma file for you to duplicate and a few of my app recommendations to get started.
Here are my suggestions on which apps you can pick screens from. But feel free to choose any other app that you really like and try to recreate them. It doesn't have to be from Mobbin necessarily.
• Flighty
• Drop
• Finimize
• Revolut
• Gametime
• Wise
• Doordash
• Dimensional
• Uber eats
• Vestiaire Collective
• Timepage
• Grubhub
• Twitter
• Clubhouse
• Airbnb
• All set
• Fiverr
• Medium
• Thumbtack
• The athletic
• Spotify
• Duolingo
• Apple Music
• App Store
• Instagram
• Discord
• WhatsApp
• Slack
• Uber
• Coinbase
• Dropbox
• Apple Fitness
• Seat Geek
• Notion
• Gojek