If you've ever wanted to start your journey as a UI/UX Designer but didn't know where to begin, this is your chance. In this thread, I'll share how I would start my journey if I had to do it all over again.
Part 1: Nice to Meet You
Maybe you're asking yourself, "Why should I follow this random guy on Twitter for tips about learning UI/UX design?" Good question! Here's a bit about me. I started as a freelancer in 2011, working on various projects before settling into regular client work. My work has been featured in Forbes, TechCrunch, and CNN Money.
In 2017, Apple recognized an app I worked on as a 'New App We Love,' and Google named it one of the 'Best Apps of the Year' in 2018. It's been a rewarding 13-year journey, filled with growth and profitability.
Part 2: Getting Started
Let's dive in. To start designing websites and apps, first, choose your tool. The main players in this field are @figma (Windows, browser-friendly, free -to get started) and @sketch (Mac, paid). I use Sketch. Don't overthink this choice.
Once you've picked a tool, learn the basics. Visit their tutorial pages (search 'Figma tutorials' or 'Sketch tutorials'). Sketch has very good courses created by @Jatodaro. Get comfortable with creating shapes, adding colors, and more.
Part 3: Copy, Copy, Copy
Yep, the first step I recommend for learning is to mimic. It's a well-known practice; even the world's most renowned painters would repeatedly copy works to perfect their skills. So, how do you apply this in UI/UX design? It's quite straightforward. Choose an app you like – let's say Twitter. Capture a screenshot of Twitter's mobile app and upload it into Sketch or Figma. Your task is to replicate this screen from the ground up, focusing on elements like colors, buttons, cards, and avatars. Don't worry if your version isn't a perfect match; that's completely normal at this stage.
Next, apply the same approach to Twitter's web app. Capture a screenshot, upload it to your design tool, and begin reconstructing it piece by piece. Lastly, consider a website you admire, perhaps Tesla. Take a screenshot of it. For capturing entire web pages in one go, numerous Google Chrome extensions can assist you (Google is a handy tool, remember). This exercise will hone your attention to detail and design sensibilities.
Part 4: Change is Progress
Now that you've completed the tasks mentioned above, you should be quite familiar with the design tool of your choice. It's time to explore and modify the designs you've replicated. Let's begin with simple adjustments. First, make duplicates of all your created files. Then, experiment with changing the colors of buttons, cards, backgrounds, and text. A helpful tip is to look up color schemes and palettes online for inspiration.
Next, delve into typography. Try using a different font to change the title font on a card to something other than your previous use. As a pro tip, opt for fonts that are clear and easy to read – avoid complex or overly stylized fonts like handwriting at this stage.
Apply these changes across all three of your projects, but don't be afraid to try different alterations in each one. Experiment with various color combinations to see how they affect the overall design.
Part 5: It's Time
Now, it's your turn to create a unique design from the ground up. Yes, it's all about you and your creativity. Don't worry, you've got this! Let's start with what you have: for mobile, a screenshot of Twitter, a social media app; for the web, Twitter again; and for a website, let’s say, Tesla, representing a car/solar company.
Your task is to design a new social media app for both mobile and the web and then a fresh website for a car/solar company. While you can draw inspiration from the screenshots, aim for your final designs to be at least 75% original compared to the copied or improved versions. Focus on the elements you feel could be improved – is it a button, a layout, or something else? How would you redesign it? Perhaps a button with rounded corners?
Continue this process, reimagining every aspect that you think could be enhanced. Need inspiration? The internet is full of websites with design inspiration.
Part 6: Ego Check
Now, it's time for a reality check. Share the designs you've created on platforms like X/Twitter, Dribbble, Instagram, or UI/UX design Facebook groups. Actively seek out feedback and emphasize your desire for honest, constructive criticism. Prepare yourself for "harsh" comments; they're a part of the learning process, especially at the beginning. Remember, keeping your ego in check is crucial.
This exercise is an invaluable preparation for the professional world. Take the feedback you receive seriously and use it to refine your designs. Don't hesitate to rework your projects entirely if needed. After making improvements, share your revised designs again in the same forums and ask for more feedback. Repeat this process multiple times.
Every step of this journey is about building your skills, gaining knowledge, and determining whether UI/UX design truly resonates with you. Embrace the critiques; they are key to your growth and readiness for the real world of design.
Part 7: Are You Made for This?
It's been some time since you've started. Take a moment for some honest self-reflection. Do you truly want to pursue this path? Are you willing to dedicate time to learn more, improve your skills, and succeed in the world of design? No is a valid answer. Do not let your ego get ahold of you. If you're not a designer, that's ok. Don't let the world miss out on what you're good at.
If your answer is a resounding yes, then it's time to fully commit and dive deeper into the world of design. Embrace this journey with all your heart and get serious about your growth and development in UI/UX design.
Part 8: Becoming a Designer
The journey to becoming a designer involves more than just design work. It's about learning, creating, and also taking care of yourself. Start by diving into typography, layouts, and colors. You don't have to spend a fortune on learning; there are plenty of affordable tutorials on YouTube and other online platforms. And don't forget, a simple Google search can be incredibly helpful.
As you design more mobile apps, web apps, and websites, remember to balance your work with relaxation, exercise, proper nutrition, and good sleep. It's easy to get caught up in work and neglect these aspects, but trust me, I've been there. Working excessively without proper self-care can lead to long-term consequences. While making money can be thrilling, don't let it turn into an unhealthy addiction. Your well-being is just as important as your professional success.
Part 9: Where's the Money?
Hold on. Sorry to ask, but who are you? Ah, you're a designer? Cool. What have you designed so far? Can I see a portfolio? You don't have anything to show. Oops!
It's time to start building your presence online. Begin by showcasing your work on platforms like X/Twitter, Dribbble, Behance, Pinterest, Instagram, or LinkedIn.
Pro tip: Choose just one platform to focus on initially. Pick the platform where clients are: Twitter, LinkedIn, TikTok. Avoid the mistake of trying to be everywhere at once. As a beginner, your priority should be to improve your skills, not to spread yourself too thin across several social media platforms.
Next up is your portfolio. There are plenty of platforms out there that are pretty easy to use, such as @framer, @webflow, @Wix, etc. You can even create a different project in Figma/Sketch called a portfolio and share the preview link on your social media profile.
Remember: A source of water always tries to flow down from the starting point, trying to reach a stream, then becomes a river, ultimately ending up meeting the ocean. It's not a shame to earn $5, $10, or $20 from your first designs. You'll get to the ocean. Trust the process. Enjoy the process.
Part 10: Just the Beginning
You're just at the beginning of your journey, and there's so much more to explore. You can delve deeper into the technical aspects of design or learn about the business side of it. Many incredible people in the design community are great resources for learning, such as @theChrisDo, @DannPetty, @mds, and @10x_designers, to name just a few.
As you start earning from your design work, consider investing in yourself. Use your earnings to gain access to advanced courses, both online and offline events, and other tools that will enhance your skills as a designer. Always remember the balance: Learn, Design, Relax, Exercise, Eat, Sleep. Each is important for your growth and well-being.
If you have any questions, drop them in the comments – I'm here to answer them all, and hopefully, others will join in answering, too.
#UIUXDesign
#DesignCommunity
#DesignThinking
#WebDesign
#AppDesign
#UserExperience
#UserInterface
#GraphicDesign
#CreativeDesign
#DesignInspiration
#DesignTips
#DesignProcess
#LearnDesign
#DigitalDesign
#BuildInPublic
#DesignAdvice
#DesignJourney
#CreativeCommunity
#TechDesign
#DesignEducation
@emanuelsa Congrats @emanuelsa! Looks good, feels good. A lot of inprovements. A few let downs, but I’ll share those with the team in an email. Congrats again!
- Better dev hand off. A lot of developers complain about the lack of options when using files from Sketch vs Figma.
- Lighter project presentation. Not all stakeholders need access to all the screens. Some need access to some “clickable pngs” and that’s all.
- AI assistant that helps designers create faster and better. For example, help us create a system by “looking” at the elements inside a file. If two things are similar try to keep just one. Think of a color, a button, a navbar across 10 screens, etc.
- Help designers go from zero to one without the need of a dev. Lets us create products from scratch to launch. The solution should be designer oriented, not dev oriented.
@LinusEkenstam Barcelona: 55 days of rain per year on average.
Bangkok: 128 days of rain per year on average.
Now go search the square meter of green space per capita in both cities. You’ll be surprised ;)
@kyleanthony I see your point but still overlook the "get help" card. 🫣 Unsolicited feedback: Maybe the "get help" card can be extended while making the "newsletter" one smaller and positioning it in the middle. I think then there's a clear hierarchization. At least for me 🤓
@peter_kow I remember seeing something on @AppSumo and its name was something like Partnero, and it did sync with Stripe, Paddle, etc. The price was around $59. Don’t have more details, but might worth a checking.