💼 Learn UI/UX Design
⏱ 6 months · 📊 5 phases · 🎯 Beginner → Intermediate
Michi says: Meow-velous choice, future designer! 🐱✨ I'm Michi, your curious learning companion, and I'm so excited to guide you through the wonderful world of UI/UX design! Just like how I carefully observe before pouncing on my toys, you'll learn to observe users and create paw-sitively amazing experiences. Don't worry if you've never designed anything before - every expert designer started exactly where you are now. Let's take this journey one whisker... I mean, one step at a time! 🎨
UI/UX design is the art and science of creating digital experiences that users love. Whether you dream of designing beautiful apps, improving websites, or launching a creative career, this roadmap will take you from complete beginner to confident designer. You'll learn to think like a designer, master industry-standard tools, and build a portfolio that showcases your skills.
Design Foundations & Principles
Week 1–5
🎯 Objective: Understand fundamental design principles, visual hierarchy, color theory, and typography to create visually appealing interfaces
Core Design Principles
Learn the fundamental principles that make designs effective: contrast, alignment, repetition, proximity, balance, and white space. Understand why these principles matter in creating intuitive user interfaces and how they guide users' attention. Study real-world examples of good and bad design to train your design eye.
UI Design Principles for Beginners
Watch a comprehensive tutorial covering design fundamentals, visual hierarchy, color theory basics, typography principles, and spacing. This will give you the vocabulary and foundational knowledge every UI/UX designer needs.
▶ Search on YouTubeDesign Principle Analysis Exercise
Choose 5 websites or apps you use daily (like Instagram, Airbnb, Spotify, etc.). For each one, create a simple document or slide identifying: which design principles they use, how they establish visual hierarchy, their color palette, and their typography choices. Write 2-3 sentences about what makes each design effective or ineffective. This trains your eye to analyze design critically.
Design Vocabulary Mastery
You can identify and explain core design principles in any interface. You understand color theory basics (complementary, analogous, monochromatic schemes) and can discuss why certain font pairings work. You've analyzed multiple real-world designs and can articulate what makes them successful or not.
You can identify and explain core design principles in any interface. You understand color theory basics (complementary, analogous, monochromatic schemes) and can discuss why certain font pairings work. You've analyzed multiple real-world designs and can articulate what makes them successful or not.
Introduction to Figma & Basic UI Design
Week 6–10
🎯 Objective: Master Figma fundamentals and create your first simple user interface designs using components, frames, and design systems
Understanding Figma & Design Tools
Learn why Figma is the industry standard for UI/UX design and how it differs from other tools. Understand key concepts: frames vs groups, components and instances, auto-layout, constraints, and styles. Figma is free and browser-based, making it perfect for beginners. Familiarize yourself with the interface, layers panel, and properties panel.
Figma Tutorial for Beginners
Follow a comprehensive beginner tutorial that walks you through the Figma interface, creating your first designs, using frames and shapes, working with text and images, creating components, and organizing your work. Look for tutorials that include hands-on projects.
▶ Search on YouTubeDesign a Mobile App Screen
Create a simple mobile app sign-up screen in Figma. Include: a logo or app name, heading text, two input fields (email and password), a primary button, and a 'Forgot Password?' link. Focus on proper spacing, alignment, and creating reusable components. Use a 375x812px frame (iPhone size). Apply color theory and typography principles from Phase 1. Don't worry about perfection—focus on getting comfortable with Figma's tools.
First UI Design Complete
You're comfortable navigating Figma and can create basic UI elements independently. You've successfully designed a complete mobile screen with proper alignment, spacing, and visual hierarchy. You understand how to create and use components, and you can export your designs as images. You're ready to tackle more complex designs.
You're comfortable navigating Figma and can create basic UI elements independently. You've successfully designed a complete mobile screen with proper alignment, spacing, and visual hierarchy. You understand how to create and use components, and you can export your designs as images. You're ready to tackle more complex designs.
User Research & UX Fundamentals
Week 11–15
🎯 Objective: Learn user-centered design thinking, conduct basic user research, create user personas, and understand the UX design process
UX Design Process & User-Centered Thinking
Understand the difference between UI (User Interface) and UX (User Experience). Learn the design thinking process: empathize, define, ideate, prototype, and test. Discover why user research matters and how real designers validate their ideas. Learn about user personas, user journeys, and pain points. Good design isn't about what looks pretty—it's about solving real user problems.
UX Design Process Tutorial
Watch a tutorial explaining the complete UX design process from user research to testing. Focus on tutorials that show real examples of user personas, user journey maps, and how designers conduct interviews and usability tests.
▶ Search on YouTubeCreate User Personas & Journey Map
Choose a simple problem: redesigning a grocery shopping app, a fitness tracking app, or a recipe finder. Interview 3-5 people (friends or family) about their experience with similar apps. Ask about their goals, frustrations, and what features they need. Create 2 user personas in Figma or a document with: name, age, background, goals, pain points, and motivations. Then create a simple user journey map showing how they currently solve this problem and where they struggle.
User Research Foundation
You understand that design starts with users, not aesthetics. You've conducted your first user interviews and can identify patterns in user behavior and pain points. You've created realistic user personas based on research and mapped out a user journey. You can explain why user research is crucial before jumping into visual design.
You understand that design starts with users, not aesthetics. You've conducted your first user interviews and can identify patterns in user behavior and pain points. You've created realistic user personas based on research and mapped out a user journey. You can explain why user research is crucial before jumping into visual design.
Wireframing & Information Architecture
Week 16–21
🎯 Objective: Master low-fidelity and high-fidelity wireframing, plan information architecture, and design complete user flows for multi-screen experiences
Wireframing & Information Architecture Basics
Learn what wireframes are and why designers create low-fidelity sketches before polished designs. Understand information architecture (IA): how to organize content and features logically so users can find what they need. Learn about user flows: mapping out each step a user takes to complete a task. Understand the difference between low-fi (basic shapes and boxes) and high-fi wireframes (more detail, closer to final design).
Wireframing Tutorial
Watch a practical tutorial on creating wireframes in Figma, from paper sketches to digital low-fidelity wireframes to high-fidelity mockups. Look for tutorials that explain how to plan user flows and site maps before wireframing.
▶ Search on YouTubeDesign a Complete User Flow
Using the user research from Phase 3, design a complete user flow for your chosen app (grocery, fitness, or recipe). Start with paper sketches, then create low-fi wireframes in Figma for at least 5-6 screens: onboarding, home screen, main feature screens, and confirmation screen. Show how a user moves from screen to screen with arrows. Don't add colors or images yet—focus on layout, content hierarchy, and navigation. Test your flow by asking someone to look at it and explain what they think happens on each screen.
Complete Wireframe Set
You can plan and create wireframes before jumping into visual design. You've designed a complete multi-screen user flow that logically guides users through a task. You understand information architecture and can organize content in intuitive ways. You're comfortable iterating on designs based on feedback. You're ready to add visual polish to your wireframes.
You can plan and create wireframes before jumping into visual design. You've designed a complete multi-screen user flow that logically guides users through a task. You understand information architecture and can organize content in intuitive ways. You're comfortable iterating on designs based on feedback. You're ready to add visual polish to your wireframes.
High-Fidelity Design & Portfolio Building
Week 22–26
🎯 Objective: Transform wireframes into polished high-fidelity designs, learn prototyping and interactions, and create your first portfolio case study
High-Fidelity Design & Prototyping
Learn how to elevate wireframes into beautiful, polished designs using color systems, real imagery, icons, and refined typography. Understand design systems and component libraries for consistency. Learn about prototyping: adding interactions, transitions, and animations to make your designs feel real. Discover microinteractions and their role in delightful user experiences. Finally, learn what makes a strong portfolio case study: showing your process, not just pretty pictures.
High-Fidelity Design & Prototyping Tutorial
Watch tutorials on creating polished UI designs in Figma, applying color schemes and typography systems, using plugins for icons and images, and creating interactive prototypes. Look for content on presenting your work as a case study.
▶ Search on YouTubeComplete Portfolio Project
Transform your wireframes from Phase 4 into high-fidelity designs. Apply a cohesive color scheme (use tools like Coolors.co), choose appropriate typography (2-3 fonts max), add icons (from free resources like Feather Icons or Figma plugins), and use placeholder images. Create an interactive prototype in Figma linking your screens together. Then, create a case study presentation (in Figma or slides) showing: the problem, your user research, personas, wireframes, final designs, and what you learned. This is your first portfolio piece!
First Portfolio Case Study Complete
Congratulations! You've completed your first end-to-end UX/UI design project from research to high-fidelity prototype. You have a polished case study that demonstrates your process, thinking, and skills. You understand how to present your work professionally, explaining not just what you designed but why. You have the foundation to continue building your portfolio and applying for junior design roles or freelance projects. You're officially a UI/UX designer!
Congratulations! You've completed your first end-to-end UX/UI design project from research to high-fidelity prototype. You have a polished case study that demonstrates your process, thinking, and skills. You understand how to present your work professionally, explaining not just what you designed but why. You have the foundation to continue building your portfolio and applying for junior design roles or freelance projects. You're officially a UI/UX designer!
You did it! 🐾
PURR-FECTION ACHIEVED! 🎉🐱 Look at you, you amazing designer! You went from curious beginner to confident creator with a real portfolio. I'm so proud I could do zoomies around the room! Remember, the best designers never stop learning and iterating - just like how I never stop perfecting my nap positions. Keep designing, keep learning, and most importantly, keep putting users first. Your design journey has only just begun, and I can't wait to see what beautiful experiences you'll create. Now go forth and make the digital world more paw-some! Meow and congratulations! 🌟✨
📚 Recommended Resources
Don't Make Me Think by Steve Krug
The most accessible and essential book on web usability and UX design. It's short, funny, and packed with practical insights about how users really interact with interfaces. Perfect for beginners to understand user-centered thinking without overwhelming jargon.
Figma Community (figma.com/community)
A treasure trove of free design resources, templates, UI kits, and plugins. You can duplicate and study professional designs, use free icon sets and illustration libraries, and learn from how experienced designers structure their files. It's like having thousands of free design mentors.
Wireless Mouse (Logitech or Similar)
While not essential, a comfortable mouse makes designing in Figma much easier than a trackpad, especially for precise adjustments and long design sessions. Any basic wireless mouse ($15-30) will significantly improve your workflow and reduce hand fatigue.
Designer Hangout Slack Community
A welcoming community of UX designers at all levels where you can ask questions, get feedback on your work, find mentorship, and learn about job opportunities. The feedback channels are especially helpful for improving your portfolio before applying to jobs.