We may earn an affiliate commission when you visit our partners.
Course image
Muhammad Iqbal

Ready to become a UI/UX designer from scratch and build real-world projects?This course will completely change the way you think about design — whether you're just starting or looking to level up.

In this step-by-step masterclass, you’ll:

Read more

Ready to become a UI/UX designer from scratch and build real-world projects?This course will completely change the way you think about design — whether you're just starting or looking to level up.

In this step-by-step masterclass, you’ll:

  • Learn UI/UX fundamentals through real examples and hands-on projects

  • Build a real app from scratch, just like a pro designer

  • Explore Figma in-depth with components, auto layout, variants & prototyping

  • Use AI tools to boost your design workflow and creativity

  • Discover the UX behind top apps like Uxcel Go and apply it yourself

  • Build a full design system with proper color and text styles

  • Learn how to present, organize, and deliver your designs like a professional

I'm Muhammad Iqbal — a Top Rated Plus UI/UX Designer on Upwork & Fiverr.I've earned nearly $500,000 designing real products, and now I’m sharing the exact techniques that worked for me.Whether you want to freelance, land a job, or start your own project — this course will guide you every step of the way.And yes, I’ll be supporting you throughout.

Syllabus – What You’ll Learn (Day-by-Day)

Day 1: App Onboarding & Splash Screens

  • Designing splash screen with logo & status bar

  • Creating sign in, sign up, and password screens

  • Welcome screen + user role popup (UI/UX designer, product designer, etc.)

Day 2: Layout, Frames & Flows

  • Learning frames and auto layout in Figma

  • Designing empty states & interest selection screens

  • Building a time-based reminder popup

Day 3: Components & Subscription UX

  • Intro to components & auto layout (advanced)

  • UX discussion on subscriptions (Uxcel Go app inspiration)

  • Designing customizing experience screen

Day 4: Variants & Course Exploration

  • Creating main course section with button variants

  • Designing detailed course screens with variant selections

  • Creating and organizing the home screen

Day 5: Navigation Icons Design

  • Designing custom icons: Home, Explore, Leaderboard

  • Bookmark, Saved, Profile icons with variants

  • Using Iconify plugin & understanding when to create vs find icons

Day 6: Navigation Bars & Linked Screens

  • Creating navigation bars with variants

  • Designing linked screens: Designer, Leaderboard, Bookmark

  • Exploring course categories and prototyping

Day 7: Profile, Settings & Style Guide

  • Designing a complete Profile screen with user info

  • Creating a professional Settings screen

  • Applying and managing color & typography styles in Figma

By the end of this course, you’ll be confident in designing beautiful, functional, and job-ready UI/UX projects — with real-world design thinking and the power of AI.

Enroll now

What's inside

Learning objectives

  • 1. design real-world user interfaces using figma
  • 2. apply ai tools to speed up and improve the ui/ux design process
  • 3. build a real, live ui/ux project from start to finish
  • 4. understand design thinking, ux principles, and how to create portfolio-worthy case studies

Syllabus

Welcome to this UI/UX Design course.

Welcome to this UI/UX Design course.

This course can truly change your life. I will not just teach theory. I will share everything honestly, the same way I learned while working hard on Fiverr and now on Upwork.

You will learn the real techniques that helped me earn almost half a million dollars as a freelancer. These are practical steps, not just boring slides.

I will guide you step by step to design a real app from scratch. I will also show you how to use AI tools to improve your design work and stay updated in 2025 and beyond.

I am not a native English speaker, so please forgive any small mistakes. But I promise, my support will never end. I will keep updating this course, and I will check on your progress to make sure you are growing.

This course is not just about learning. It is about starting your journey to become a successful UI/UX designer and getting your first job or client.

Let’s start together. I believe in you.

Read more

Welcome to the first step of your design journey!
In this video, I’ll help you prepare everything you need — from installing Figma to setting up your laptop and workspace.

We’ll cover:

  • The only design tool we’ll use (Figma)

  • What kind of laptop you need

  • How to stay organized

  • A few tips to make your learning smooth and stress-free

Let’s set things up and make sure you’re 100% ready to become a designer!

In this video, I guide beginners on how to make the most of the course. Learn how to progress smoothly from Day 1 to Day 7, including the Daily UI challenges. I also share tips on solving common issues, encouraging you to search online first and reach out only when needed. Don’t give up; stay consistent and keep practicing!

This video is designed for intermediate and expert learners ready to push their skills further. I walk you through Challenge 1 and Challenge 2, demonstrating how to approach these projects and apply advanced UI/UX concepts. Take your learning to the next level by embracing these hands-on challenges!

In this part, we will start our very first screen — the splash screen. You’ll learn how to add a status bar, place the app logo, and set up the perfect layout and spacing to make your design look clean and professional. This is the first step in your real app design journey, and we’ll keep it simple and beginner-friendly.

In this part, we will design a modern Sign In screen. You will learn how to add buttons for Google, Apple, and Facebook login, as well as the option to sign in with email. We’ll focus on layout, spacing, button styles, and keeping everything clean and user-friendly. This screen is an important part of every app, and you’ll create it step by step with me.

In this part, we’ll design a simple and clean Sign Up screen where users can create an account using their email, You’ll learn how to organize input fields, use proper spacing, and add a clear call-to-action button. This screen will follow best practices for user experience while keeping the design modern and easy to use.

In this part, we will improve the Sign Up screen by adding a secure password input field. You’ll learn how to design a clean text field for passwords and add a visibility toggle icon so users can show or hide their password as they type. This small feature adds big value to your app’s user experience and shows attention to real-world app design details.

In this part, we’ll design a beautiful and friendly Welcome screen that users will see after they sign up or log in. You’ll learn how to create a warm and simple layout with a welcome message, user name or icon, and a clear call-to-action to continue. This screen helps create a smooth and engaging experience as users enter the main part of your app.

App Onboarding & Registration Screens

In this part, we’ll use Frames and Auto Layout to design a clean and responsive popup where users can select their role, like UI/UX Designer, Product Designer, or other options. You’ll learn how to properly align elements, add spacing, and make the layout flexible so it works well on different screen sizes. This is a real-world feature found in many onboarding flows, and it will strengthen your design skills.

In this part, we’ll complete the full version of the Welcome screen by adding more details like the user’s name, a friendly message, and a clear button to move forward in the app. We’ll also arrange the layout properly using Auto Layout and make sure everything looks clean and well-balanced. This screen will give users a great first impression when they enter the app.

In this part, we’ll design a smart and simple screen where users can choose why they’re using the app. Options will include things like “I want to improve my skills,” “I want to grow my team’s skills,” or “Just exploring.”
We’ll first design an empty state screen with a clear message and icons or cards. Then, we’ll show how the screen updates visually when the user selects one of the options. This is a great way to practice interactive layouts and real-world UX thinking.

In this part, we’ll design the Interest Selection screen where users can pick the topics they’re most interested in, such as User Interface (UI), User Experience (UX), Design Patterns, and more. You’ll learn how to create visually appealing selection options, whether through cards, checkboxes, or buttons. We’ll use Auto Layout to ensure the design adjusts nicely across different devices and screen sizes. This feature helps personalize the user experience and guide users to the content that matters most to them.

In this final part of Day 2, we’ll design a Reminder screen where users can set reminders for specific tasks. We’ll also create a time selection popup, allowing users to easily choose the date and time for their reminder. You’ll learn how to design intuitive input fields, date pickers, and time selection controls, making sure the popup is clean, easy to use, and responsive. This screen will enhance the user experience and add functionality to your app.

Auto Layout & Welcome Flow

In this part, we’ll take a deep dive into the user experience (UX) behind subscription screens. I’ll explain what makes a great subscription flow and why it matters for user trust and conversions. We’ll look at real-world examples — especially the Uxcel Go app, which offers one of the best subscription experiences in terms of clarity, smooth transitions, and value presentation. This session will help you understand how to think like a UX designer before jumping into UI design.

In this part, we’ll begin designing the Subscriptions screen, where users can view and manage their subscription plans. You’ll learn how to lay out various subscription options, include features like pricing tiers, plan benefits, and call-to-action buttons to encourage users to make a choice. We'll also incorporate Auto Layout to ensure the design remains responsive and adapts well to different screen sizes. This screen is essential for any app that offers premium features or services, and we’ll make sure it’s both visually appealing and easy to navigate.

In this part, we’ll design a Customizing Experience screen that allows users to personalize the app based on their preferences. Whether it’s selecting the type of content they want to focus on, adjusting learning pace, or setting app behavior, this screen helps create a more tailored user journey. You’ll learn how to use Auto Layout and components to build a flexible and user-friendly design. This screen is key to improving engagement and making users feel in control of their experience.

UX of Subscriptions & Customization

In this part, we’ll design the Main Course Selection screen where users choose how they want to start — either with a recommended path or by exploring on their own. While designing, we’ll also create button variants (like selected and unselected states) to improve reusability and interaction feedback. You’ll learn how to set up component variants in Figma and use them smartly across your design. This helps in keeping your file clean and flexible for future updates.

In this part, we’ll design the Detailed Course Page that appears after a user selects a course. This screen will display all the important information about the course — including the course title, instructor name, skill level (beginner, intermediate, advanced), total duration, and a short course description. We’ll also add lesson previews, progress indicators, and action buttons like “Start Now” or “Save for Later.”

You’ll learn how to use Auto Layout and Variants to organize these sections cleanly and make them fully reusable. This screen plays a big role in helping users make a confident choice, so we’ll focus on both visual clarity and strong UX structure.

In this part, we’ll enhance the Detailed Course Screen by adding selection variants to the course options. These variants allow users to choose between different course levels or types, like UI Design, UX Design, or Product Design, with clear visual feedback for the selected state. You’ll learn how to set up and manage selection variants in Figma to make your components more interactive and dynamic.

By the end of this lesson, you’ll have a detailed, functional course page that feels real and engaging — just like in top learning apps.

In the final part of Day 4, we’ll design the Home Page of the app — the central screen where users land after logging in or completing onboarding. This screen will display key sections like Featured Courses, Continue Learning, and Recommended for You.

You’ll learn how to structure the layout for easy navigation, apply spacing and auto layout correctly, and use reusable components like course cards and section headers. We’ll also focus on making the home page look clean, modern, and user-friendly, just like professional learning apps.

By the end of this session, you’ll have a polished home screen that sets the tone for the entire user experience.

Variants and Course Detail Pages

In this part, we’ll begin building the bottom navigation by designing the first icon — the Course Home Icon. This icon represents the main dashboard or landing area where users access their learning journey.

You’ll learn how to:

  • Design a clean, minimal home icon that aligns with modern design trends

  • Use frame structure to keep it scalable

  • Apply proper spacing, sizing, and active/inactive states for consistency

  • Prepare it as a reusable component to use across your app

This icon sets the foundation for your navigation bar and ensures a smooth start to the user experience.

In this part, we’ll design the second navigation icon — the Explore Courses Icon. This icon helps users discover new courses and browse different categories within the app.

You’ll learn how to:

  • Create a visually clear and intuitive explore icon

  • Maintain visual balance with the other icons in the navigation bar

  • Set up both active and inactive states using variants

  • Keep the design clean, scalable, and aligned with your overall style

This icon will guide users into the discovery part of the app, so we’ll make sure it feels interactive and welcoming.

In this part, we’ll design the third navigation icon — the Leaderboard Icon. This icon represents the competitive and motivational part of the app, where users can track their progress and compare with others.

You’ll learn how to:

  • Design a simple yet meaningful leaderboard icon that fits the app’s style

  • Use consistent line weight, size, and spacing

  • Create active and inactive states using variants

  • Keep the icon clean and easily recognizable, even at smaller sizes

The leaderboard is a fun way to keep users engaged, so this icon plays an important role in the overall experience.

In this part, we’ll design the Bookmark Icon, which allows users to save their favorite or ongoing courses for quick access later. It’s a key feature for improving learning flow and personalization.

You’ll learn how to:

  • Design a clean and recognizable bookmark icon

  • Maintain harmony with the other navigation icons

  • Use proper alignment and spacing for a polished look

This icon adds a helpful feature to the user’s journey and supports better course management inside the app.

In this final part of Day 5, we’ll complete the bottom navigation by designing the last two icons — the Saved Icon and the Profile Icon.

You’ll learn how to:

  • Design a clean and minimal Saved icon, showing bookmarked or favorited content

  • Create a user-friendly Profile icon that represents the user’s personal area

  • Apply consistent styling and sizing to match the other icons

  • Arrange everything inside a well-structured bottom navigation bar

By the end of this video, your navigation system will be complete, polished, and fully ready for interaction.

In this final part of Day 5, we’ll talk about finding vs creating navigation icons — and how you can do both right inside Figma using the Iconify plugin.

You’ll learn:

  • How to find professional icons quickly with the Iconify plugin

  • How to search by keywords and choose between outline or filled styles

  • The benefits of using ready-made icons vs. designing your own from scratch

  • How to tweak and customize any icon to match your app’s look

  • Why using consistent icon styles improves your overall UX

By the end of this video, you’ll understand how to save time with Iconify while still keeping your design unique and polished.

Navigation Icons & Custom Icons

We started by building a reusable navigation component using variants in Figma.

You’ll learn how to:

  • Design a clean and functional bottom navigation bar

  • Create variants for each icon (active and inactive states)

  • Use auto layout and proper spacing for consistency

  • Build a component that you can reuse across all screens

This step sets the foundation for connecting all the major parts of our app through a professional navigation system.

In this part, we designed the Explore/Designer Page, where users can easily search and browse courses based on their interests.

You’ll learn how to:

  • Design a clean and minimal search bar

  • Create a layout for course categories (like UI, UX, Product Design)

  • Make the screen easy to explore and user-friendly

  • Use consistent styling and spacing to maintain visual balance

This screen helps users discover content faster and improves the overall learning experience of the app.

In this part, we created the Leaderboard Page, where users can see their rank and compare progress with others.

You’ll learn how to:

  • Design a clean and structured leaderboard layout

  • Highlight top users with different visual styles

  • Organize content using auto layout and proper spacing

  • Make the page feel motivational and fun

This screen adds a competitive and social element to the app, helping boost engagement and user retention.

Navigation Variants & Prototyping

In this part, we designed the Profile Screen, where users can view and manage their personal info and progress.

You’ll learn how to:

  • Create a layout showing the user’s name, avatar, progress, and badges

  • Use proper spacing and structure to keep the screen clean and easy to follow

  • Design a UI that feels personalized and interactive

  • Add elements like edit profile, achievements, and quick links

This screen helps build trust with users by giving them a space that’s all about their journey and success.

In this final part of the beginner section, we designed the Settings Screen and wrapped up everything we learned so far.

You’ll learn how to:

  • Build a clean and simple settings layout

  • Add useful options like notifications, account settings, theme modes, and more

  • Use auto layout to keep things organized and scalable

  • Make your design user-friendly and consistent with the rest of the app

We also finalized the beginner section of the course, preparing you to move confidently into more advanced design topics. Great job making it this far!

In the final part of Day 6, we focused on the Explore Page and took it a step further by integrating prototyping for interactive flow.

You’ll learn how to:

  • Design the Explore Page with category selections and content filtering

  • Link screens using interactive prototyping to create smooth transitions

  • Set up interactions like tap actions and screen navigation

  • Ensure the user journey feels intuitive and seamless

This part of the course wraps up the design process and prepares your app for real-world testing and user interaction.

Profile, Settings & Figma Styling

Before we jump into the Daily UI challenges, it’s important to refresh our understanding of color. In this lecture, I’ll walk you through:

  • The difference between primary, secondary, and complementary colors

  • What makes a color warm, cool, bright, or muted

  • How to use the color wheel to create better contrast and balance

  • Why color matters in user experience and emotional design

  • Tips for choosing colors that work well in real product screens

This is a quick but essential lesson to make sure you approach each UI challenge with strong visual decisions.
Let’s sharpen your design eye and prepare your color sense for daily creative work.

In this video, I’ll introduce you to the Daily UI Challenge — a popular design practice used by thousands of designers to improve their skills and build better portfolios.

What you’ll learn in this video:

  • What is the Daily UI Challenge

  • Why it’s valuable for beginners and growing designers

  • How solving one UI problem a day builds real design confidence

  • How I’ll guide you through this journey step by step

  • What tools and mindset you’ll need to stay consistent

This is your starting point to build habits, sharpen your creative thinking, and prepare for real-world design tasks. Let’s get into it.

In this video, we’ll begin designing the first Daily UI challenge — the Sign Up Page — by creating a low-fidelity wireframe.

You’ll learn how to:

  • Plan the layout and structure of your screen

  • Focus on user flow, spacing, and basic elements

  • Use wireframes to stay fast and focused before jumping into visuals

  • Think like a product designer by asking: “What does the user need to do first?”

Wireframing is a key part of every design process.
This step helps you avoid distractions and keeps your focus on usability and function, not style.

Let’s sketch the foundation of our first UI.

In this video, we’ll create a moodboard to guide the visual style of our Sign Up page and explore how to find the right UI inspiration online.

You’ll learn:

  • What a moodboard is and why it’s important in UI/UX design

  • Where and how to find good visual inspiration (Dribbble, Behance, Mobbin, etc.)

  • How to choose colors, fonts, and styles that fit your goal

  • The difference between copying and being inspired

  • How to collect and organize references in Figma or online tools

Before we jump into the final design, this step helps you stay consistent, creative, and clear about the look and feel you want to create.

Let’s set the tone before we start designing.

n this video, we’ll design two core screens — Sign Up and Sign In — based on the wireframe and moodboard we prepared earlier.

What you’ll learn:

  • How to apply visual design to your layout

  • Choosing fonts, spacing, and structure with clarity

  • Designing with accessibility and usability in mind

  • Creating consistency between Sign Up and Sign In screens

  • Using color and components the smart way

By the end of this video, you’ll have two fully designed screens ready to showcase — and a solid understanding of how to build clean, user-friendly entry points for any app.

Let’s bring your design to life.

In this final video, we’ll take the work you’ve just created — your Sign In and Sign Up screens — and upload it to Dribbble.

You’ll learn:

  • How to export your UI screens for Dribbble

  • Tips for writing a good post title and description

  • Why sharing your work online helps build confidence

  • How to start growing your online design presence

  • Simple ways to stand out and attract feedback or clients

This is more than just uploading a shot.
It’s about building your voice, building your profile, and starting your real journey as a designer.

You’ve done the work — now let the world see it.

In this video, I’ll introduce you to Daily UI Challenge 02, where we’ll design a full checkout process.

What we’ll cover:

  • Why the checkout flow matters in any product

  • What screens are included (billing info, payment, confirmation)

  • Common mistakes designers make in checkout UX

  • How we’ll use AI tools to help us brainstorm and improve faster

  • What to expect from this challenge and how to approach it like a real project

This is a must-have skill in your UI/UX toolkit — and by the end of this section, you’ll have a smooth, modern, and user-friendly checkout flow ready to share and showcase.

Let’s get started with Daily UI 02.

In this video, we’ll take the first step toward designing our checkout flow by using AI tools to help with brainstorming ideas and collecting references.

You’ll learn:

  • How to use AI to generate layout suggestions and UX patterns

  • Getting quick text ideas like button labels or confirmation messages

  • How to collect high-quality design inspiration for checkout pages

  • Creating a clean and focused moodboard to guide your UI

  • Setting a consistent visual tone before jumping into design

This is where creativity meets speed. With the help of AI and visual references, you’ll have everything you need to confidently move into the design phase.

Let’s build the foundation together.

In this final video for Daily UI 02, we’ll take everything we planned — the moodboard, AI ideas, and structure — and turn it into a finished checkout UI.

You’ll learn:

  • How to design a clean and modern checkout experience

  • Structuring the screens (billing, payment, confirmation)

  • Applying visual style based on your moodboard

  • Exporting and placing your screens into mockups

  • Tips for uploading and presenting your design on Dribbble

By the end of this video, you’ll have a complete, polished project — one that not only looks good but also improves your portfolio and online presence.

Let’s bring your design to life and share it with the world.

In this video, we’ll start building the foundation of our design system by creating a well-structured typography scale.

You’ll learn:

  • Why typography is a key part of user experience and branding

  • How to choose font families and set visual hierarchy

  • Naming conventions for headings, body text, captions, and more

  • How to create and organize Text Styles in Figma

  • Best practices for responsive and accessible typography

Typography sets the voice of your interface. Once it’s done right, every screen becomes easier to design and read.

Let’s define a type system that’s clean, readable, and ready to scale across any project.

In this video, we’ll set up a complete set of button components with primary, secondary, tertiary, and disabled states.

You’ll learn:

Why consistent button styles are essential for user interaction
How to design a primary button that stands out for key actions
How to create a secondary (outline) button for less prominent actions
What makes a tertiary (text-only) button useful for subtle links
How to build and name disabled button variants for clear state feedback
How to organize and manage all button variants in Figma

Buttons drive user actions in every product. When they’re built correctly, they guide users smoothly and keep your design system cohesive.

Let’s create button variants that look great, work perfectly, and scale with your entire project.

In this video, we’ll create a complete set of form control components—input fields, toggles, checkboxes, and radio buttons—and integrate them into our design system.

You’ll learn:

Why well-designed form controls improve user experience
How to structure and style input fields for clarity and usability
Designing a toggle switch that clearly indicates on and off states
Creating checkboxes with consistent spacing, states, and visual feedback
Building radio button groups that guide users through exclusive selections
How to name, organize, and manage these components in Figma

Form controls are essential for user interaction and data entry in any interface. By designing them correctly, you’ll ensure every form feels intuitive and accessible.

Let’s craft form controls that users can trust and developers can build with confidence.

In this session, I meet with Hila to understand her app’s requirements. We review the moodboard she created, discuss user needs and core features, and clarify any questions to define a clear scope. By the end, we are fully aligned and ready to start designing the MVP.

In this video, I dive into Mobbin to gather design inspiration and create a comprehensive moodboard for Hila’s app. After assembling key screenshots, color palettes, and UI patterns, I share the moodboard with Hila, discuss her feedback, and note any comments to refine our visual direction before moving into wireframes.

In this session, we go through Hila’s feedback on the moodboard. I explain her comments, adjust colors and styles as needed, and clarify any questions. By the end, we have a refined moodboard that matches Hila’s vision and is ready to guide the wireframe phase.

In this video, I take our pre-built design system and customize it for Hila’s app. Since the core styles and components are already in place, we spend less time on setup and focus on updating colors, typography, and key components to match Hila’s brand. By the end, the design system is tailored to her needs and ready for use in the wireframes and UI screens.

In this video, I create the first high-fidelity screens for Hila’s app using our customized design system. We move from low-fidelity to polished UI by applying colors, typography, and layout. Next, I show how to add and organize icons into the design system, ensuring each icon matches the app’s style. By the end, you’ll have fully fleshed-out screens and a complete set of icons ready for development.

In this video, we finish the first complete draft of Hila’s app’s key screens. I consolidate all high-fidelity designs into a cohesive prototype, double-check alignment and consistency, and add any missing interactions or touches. Then, I package everything neatly—exporting screens and creating a presentation—to share with Hila. By the end, the first draft is ready for client review and feedback.

In this video, I meet with the client for the second time to present the design progress. I walk through the screens, explain key decisions, and highlight how the design aligns with the project goals and user needs. The client provides feedback, asks questions, and suggests adjustments. We discuss priorities and next steps to ensure the project stays on track. This meeting helps refine the design and builds a strong client-designer collaboration.

In this video, I incorporate the client’s feedback into the design, making necessary adjustments to screens, layouts, and components. I ensure everything aligns with the project goals and client expectations. Once the updates are complete, I prepare the design files and presentation materials for the upcoming client session to review and approve the work. This step is crucial for delivering a polished, client-ready output.

In this video, I present to Hila the maximum output of Phase 1, including all finalized screens, components, and prototypes. We review the design in detail, discuss any last feedback, and confirm alignment before moving on to the next phase. This meeting is key to ensuring the project meets client expectations and is ready for development or further iteration.

In this final video of Phase One, we review and finalize essential user flows including Sign In and Sign Up screens, onboarding processes for both parents and sitters, as well as prompt screens designed to guide users effectively. We also complete the parent profile overview, focusing on clear information layout and usability. This wrap-up sets a strong foundation for the next phase of the project.

In this video, we begin Phase 2 of the Hila App project with a detailed meeting with the client. Hila walks us through her expectations for the sitter experience, including:

  • The Home screen structure

  • Calendar for scheduling and task visibility

  • Availability settings

  • Profile overview

  • And the Swipe feature for easy navigation

This session helps clarify the key priorities and functionality before we start designing. It also shows how clear communication and client involvement shape a successful product.

Let’s dive into the real core of the sitter-side design!

In this video, we take the next step in Phase 2 by brainstorming ideas and researching best practices for designing the Home Page of the sitter-side in the Hila App.

We’ll go through:

  • Finding layout inspiration

  • Identifying user priorities

  • Mobbin

  • Implementing the final home screen in high fidelity

This hands-on session is all about turning raw ideas into usable design, while keeping the user journey clear and intuitive.

Let’s bring the sitter dashboard to life!

In this video, we finalize a key part of the sitter-side user interface by designing the bottom navigation bar.

You’ll see how I:

  • Decided which icons and sections to include

  • Focused on usability and clarity

  • Matched the navigation style with the rest of the app

  • Made sure it's consistent with iOS/Android standards

Navigation is the backbone of user experience — and this video ensures we get it right for our sitters.

In this video, we create the Availability screen where sitters can customize their weekly availability.

You’ll learn:

  • How to structure time selection in a clean, user-friendly layout

  • What UX considerations go into scheduling tools

  • How to allow flexibility while keeping the interface simple

  • Using toggles, selectors, or time blocks to set available hours

A well-designed availability screen is essential for user control and trust. Let’s make it easy for sitters to manage their time.

In this video, we design the Calendar screen that allows users to view their bookings in monthly and weekly formats.

You’ll learn:

  • How to structure a calendar UI for both overview and detail

  • Displaying booked days and available time slots clearly

  • Switching between month and week views smoothly

  • Highlighting selected dates and showing relevant bookings

A great calendar experience helps users stay organized and confident in their schedule. Let’s bring it to life with thoughtful design.

In this video, we design the Messages screen where sitters can chat with parents directly inside the app.

You’ll learn:

  • Structuring a clean and readable chat layout

  • Showing user avatars, timestamps, and message status

  • Creating a sticky input bar for sending new messages

  • Ensuring responsiveness and usability in messaging flow

Great design builds trust, and smooth, familiar chat features help your users stay connected and engaged. Let’s build that experience step-by-step.

In this video, I reconnect with Hila to present the finalized designs from Phase 2 of the app. We review all key screens including the Home, Availability, Calendar, Messages, and Profile screens, with added swipe and navigation features. This session includes valuable feedback and insights from the client as we align on the vision moving forward. A great example of how design and collaboration come together to shape a successful product.

In this video, we dive into the final refinement phase of the project. After our detailed session with Hila, I go through each of her comments and apply updates to enhance the user experience. From layout tweaks to visual improvements, this step ensures the product aligns with both the user’s needs and the client’s expectations.

This video marks the end of our journey with the Hila App's Phase 2 design. We finalize the sitter-side screens, recheck responsiveness, and ensure everything is ready for delivery. It’s a satisfying wrap-up of a project filled with client collaboration, UX insights, and hands-on implementation. Get inspired by how a real project reaches completion!

In this video, we start by discussing the client’s requirements for revamping the GameHostBros.com landing page. We review the current site in detail to identify strengths, weaknesses, and opportunities for improvement. This helps us create a clear plan for the redesign ahead.

In this video, we collect design inspirations from various sources to shape the new landing page. We also review the client’s preferred styles and examples to ensure our design direction matches their vision. This step helps us build a strong creative foundation before starting the redesign.

In this video, we design the header and hero banner—the crucial area "above the fold" that visitors see first. We carefully structure this section to clearly communicate the main message, highlight key actions, and visually engage users from the moment they arrive on the page.

In this video, we create the "Featured" and "Testimonials" sections, strategically highlighting key selling points and user feedback. These sections enhance credibility and build trust, encouraging visitors to confidently engage and convert.

In this video, we create engaging server cards to clearly highlight product offerings and features. We also design a compelling Call-to-Action (CTA) section, guiding visitors toward taking the next step. This ensures users easily understand available options and are encouraged to take immediate action.

In this video, we design the main features section by combining four major features into interactive tabs. This approach creates a clean, intuitive interface, saves valuable space, and allows visitors to easily explore key information without overwhelming them.

In this video, we design a strong final Call-to-Action (CTA) section titled "Start Your Server Now." We strategically craft this section to prompt immediate user engagement and clearly direct visitors toward the primary goal—starting their server. This impactful CTA helps maximize conversions.

In this video, we create a well-structured FAQ (Frequently Asked Questions) section. By carefully organizing common questions and providing clear, concise answers, we ensure users easily find the information they need. This boosts trust, reduces uncertainty, and helps drive user engagement and conversions.

In this video, we clean up and organize the final design file, making sure everything is consistent and ready for client presentation. I also prepare three distinct design versions to give the client clear choices and facilitate easy decision-making. This ensures a smooth, professional handoff and sets the stage for productive client feedback.

In this video, we carefully double-check every detail of our designs before handing them over to the client. We’ll verify layout consistency, spacing, typography, and interactions to ensure everything is clear, polished, and ready for client feedback. This final review helps ensure a confident and professional delivery.

In this video, we move forward with inner page design after receiving a green light from the client on the first draft. Our focus is on crafting the project card for the product page—one of the most important UI elements to showcase server offerings clearly and attractively. You'll see how I plan the layout, design hierarchy, and refine details to maintain consistency with the rest of the landing page.

Let’s keep building on the momentum and dive into this essential part of the user experience!

In this video, we finalize two crucial parts of the product page — the product overview and the feature list sections. These are key to communicating the value and technical details of the service. I’ll walk you through layout choices, spacing, icon usage, and keeping everything visually consistent with the overall brand.

We’re now deep into structuring the user experience, making sure it’s both clean and persuasive.

Let’s design sections that speak clearly and convert effectively.

In this video, we design three important parts of the landing page:
✅ A compelling Call-to-Action (CTA) section that encourages users to take the next step
✅ A detailed Features List to clearly communicate product benefits
✅ A clean, user-friendly FAQs Section to address common questions

You’ll learn how to:

  • Create an attention-grabbing CTA block

  • Structure feature content with icons and clarity

  • Build a collapsible FAQ layout that feels modern and easy to navigate

  • Keep everything consistent with your design system

These sections work together to inform users, build trust, and improve conversion. Let’s design them smartly!

In this video, we design the About Us page, focusing on presenting the brand's story and values clearly. We also create a Team Section to highlight the people behind the product — a crucial element for building credibility and trust.

You’ll learn how to:

  • Structure a compelling About Us layout

  • Introduce the brand story in a visual and engaging way

  • Create a clean and consistent team section

  • Use photos, names, and roles effectively

  • Keep the design aligned with the overall visual language

A well-crafted About Us page makes your brand relatable and human. Let’s make it count!

In this final video of the About Us page, we make the last adjustments, review the layout and content, and ensure everything aligns with the project vision. From typography to spacing and consistency, we go over every element before preparing for client delivery.

You’ll see:

  • How to do a thorough design check

  • Making final tweaks to layout, images, and text

  • Ensuring responsiveness and visual balance

  • Preparing the file for presentation or handoff

A clean finish is what separates good design from great design. Let’s wrap it up professionally!

Save this course

Create your own learning path. Save this course to your list so you can find it easily later.
Save

Activities

Coming soon We're preparing activities for Complete UI/UX Design Course 2025: Figma + AI + Real Project. These are activities you can do either before, during, or after a course.

Career center

Learners who complete Complete UI/UX Design Course 2025: Figma + AI + Real Project will develop knowledge and skills that may be useful to these careers:
User Interface Designer
A User Interface Designer crafts the visual and interactive elements of digital products. This role focuses on the look and feel, ensuring that every button, icon, and layout is aesthetically pleasing and intuitive. The Complete UI/UX Design Course 2025: Figma + AI + Real Project is an exceptional foundation for aspiring User Interface Designers. You directly learn UI fundamentals, mastering Figma for building real apps from scratch, and developing design systems with proper color and text styles. The course's emphasis on designing splash screens, sign-in flows, navigation icons, and main course sections, alongside organizing and delivering designs professionally, prepares you to create job-ready UI projects.
User Experience Designer
A User Experience Designer focuses on the overall experience users have with a product, ensuring it's efficient, enjoyable, and accessible. This involves understanding user needs, crafting flows, and solving problems through intuitive design. The Complete UI/UX Design Course 2025: Figma + AI + Real Project provides a robust framework for becoming a User Experience Designer by deepening your understanding of design thinking and UX principles. Exploring the UX behind top apps, coupled with hands-on projects like designing subscription flows and personalization screens, equips you with practical skills. The course’s focus on structuring layouts, creating seamless onboarding, and learning how to present designs ensures you consider the user journey from start to finish.
Product Designer
A Product Designer oversees the entire lifecycle of a digital product, combining strategy, user experience, and visual design to create innovative solutions that meet both user needs and business goals. This comprehensive role benefits immensely from a holistic understanding of UI/UX. The Complete UI/UX Design Course 2025: Figma + AI + Real Project offers an excellent pathway into this career, teaching you to build real-world apps from scratch and apply design thinking end-to-end. Learning to build full design systems, exploring Figma in-depth, and presenting your designs like a professional prepares you for the multifaceted responsibilities of a Product Designer, enabling you to deliver functional and beautiful products.
Mobile Application Designer
A Mobile Application Designer focuses specifically on creating user interfaces and experiences for smartphone and tablet applications, ensuring they are optimized for touch interactions and smaller screens. The Complete UI/UX Design Course 2025: Figma + AI + Real Project is an ideal choice for aspiring Mobile Application Designers. The course explicitly guides you to build a real app from scratch, covering essential mobile-specific elements like splash screens, sign-in and sign-up flows, custom navigation icons, and profile and settings screens. You learn to apply auto layout for responsiveness and to understand mobile UX principles through real-world app examples, preparing you to design functional and beautiful mobile apps.
Web User Interface Designer
A Web User Interface Designer focuses on creating the visual and interactive aspects of websites, ensuring an engaging and user-friendly experience across various devices. This role requires a strong understanding of layout, navigation, and visual consistency specifically for web platforms. The Complete UI/UX Design Course 2025: Figma + AI + Real Project helps build a strong foundation for a Web User Interface Designer. The practical experience of redesigning a landing page, creating call-to-action sections, and building feature lists directly applies to web design. Learning to establish color and text styles, alongside organizing and delivering designs, prepares you for crafting professional and impactful web interfaces.
Interaction Designer
An Interaction Designer specializes in creating intuitive and engaging interactions between users and digital products. This role carefully considers how users navigate, respond to, and control interfaces, focusing on dynamic elements and flow. The Complete UI/UX Design Course 2025: Figma + AI + Real Project is particularly relevant for an Interaction Designer, as it covers Figma in-depth with components, auto layout, variants, and prototyping. You will learn to design linked screens, create button variants for different states, and implement time-based reminder popups, directly building skills in interactive elements. The practical experience of prototyping across screens ensures you can craft seamless and responsive user journeys.
Design System Specialist
A Design System Specialist is responsible for creating, maintaining, and evolving a comprehensive set of standards, components, and guidelines that ensure consistency and efficiency in product development. This role is crucial for scaling design efforts. The Complete UI/UX Design Course 2025: Figma + AI + Real Project directly addresses the core competencies for a Design System Specialist. You are specifically taught to build a full design system with proper color and text styles and to create components, auto layouts, and variants in Figma. The course delves into building reusable navigation bars, button variants, and form controls, providing hands-on experience in the modular thinking essential for this specialized role.
Visual Designer
A Visual Designer focuses on the aesthetic appeal of a product, creating compelling visual elements that define a brand's identity and enhance the user experience. This role encompasses typography, color theory, imagery, and overall graphic consistency. For a Visual Designer, The Complete UI/UX Design Course 2025: Figma + AI + Real Project offers highly relevant skills. You learn to build a full design system with proper color and text styles, create moodboards to guide visual direction, and design custom icons. The course's emphasis on visual clarity in elements like splash screens and navigation bars, along with the Daily UI challenges, helps sharpen your eye for detail and consistency in visual design.
AI User Experience Designer
An AI User Experience Designer specializes in crafting intuitive and effective user experiences for products powered by artificial intelligence. This involves designing interfaces where AI capabilities are seamlessly integrated and clearly communicated. The Complete UI/UX Design Course 2025: Figma + AI + Real Project is exceptionally relevant for an AI User Experience Designer, as it explicitly teaches you to use AI tools to boost your design workflow and creativity. The course details using AI to brainstorm ideas, collect references, and generate layout suggestions for projects like checkout flows. This direct exposure to integrating AI into the design process, combined with strong UI/UX fundamentals, positions you well to design cutting-edge AI-enabled interfaces.
Design Lead
A Design Lead guides design teams, oversees projects, and ensures the coherence and quality of design deliverables across an organization. This role requires a comprehensive understanding of design processes and strong leadership skills. The Complete UI/UX Design Course 2025: Figma + AI + Real Project offers a robust foundation for an aspiring Design Lead. You learn to build real-world UI/UX projects from start to finish, understand design thinking, create full design systems, and present and deliver designs like a professional. This course provides the practical skills and methodological insights necessary to confidently lead design initiatives and mentor other designers in creating beautiful, functional, and job-ready products. This role often requires an advanced degree or significant experience.
Digital Product Manager
A Digital Product Manager defines product vision, strategy, and roadmap, bridging the gap between business, technology, and user experience. A deep understanding of UI/UX is essential for this role. The Complete UI/UX Design Course 2025: Figma + AI + Real Project may be useful for an aspiring Digital Product Manager. It helps build a strong foundation in design thinking, UX principles, and the end-to-end process of building a real app from scratch. This course provides insight into how design decisions are made, how AI tools can enhance workflow, and how to organize and deliver designs like a professional, all of which are crucial for effective product leadership. This role often requires an advanced degree for senior positions.
UX Researcher
A UX Researcher investigates user behaviors, needs, and motivations through various methodologies to inform product design and strategy. While not a research-focused course, a strong understanding of design implementation is invaluable. The Complete UI/UX Design Course 2025: Figma + AI + Real Project may be useful for an aspiring UX Researcher. It helps build a foundation in design thinking and UX principles, which are fundamental to understanding user problems and evaluating solutions. By exploring the UX behind top apps and engaging in hands-on projects, you gain firsthand insight into how design choices impact user experience, allowing you to approach research questions with a practical design perspective.
Accessibility Designer
An Accessibility Designer ensures that digital products are usable and perceivable by individuals with diverse abilities, adhering to accessibility standards and inclusive design principles. This specialization builds upon core UI/UX knowledge. The Complete UI/UX Design Course 2025: Figma + AI + Real Project may be helpful for an Accessibility Designer by providing a solid grounding in UI/UX fundamentals, design thinking, and the practical application of Figma. While not explicitly focused on accessibility, understanding how to build clean layouts, use proper spacing, and create consistent components—like button variants and form controls—lays a foundation for incorporating accessibility considerations into every design decision. This course helps you create user-friendly experiences.
Conversion Rate Optimization Specialist
A Conversion Rate Optimization Specialist focuses on improving the percentage of website or app visitors who complete a desired action, such as making a purchase or signing up. This role heavily relies on understanding user behavior and optimizing interfaces. The Complete UI/UX Design Course 2025: Figma + AI + Real Project may be helpful for a Conversion Rate Optimization Specialist. By learning UX principles, designing user flows like sign-up and checkout processes, and understanding how to structure call-to-action sections, you gain direct insight into influencing user behavior. The course's hands-on projects, including redesigning a landing page and using AI to improve workflow, directly apply to creating more effective and persuasive digital experiences.
User Interface Developer
A User Interface Developer focuses on implementing the visual and interactive elements of digital products using programming languages. While primarily a coding role, a strong understanding of design principles and tools is invaluable for translating designs into functional code. The Complete UI/UX Design Course 2025: Figma + AI + Real Project may be helpful for an aspiring User Interface Developer. The course teaches you to design real-world user interfaces using Figma, build full design systems with components and auto layout, and organize designs like a professional. Gaining proficiency in Figma and understanding UX principles from a designer's perspective provides a solid foundation for collaborating effectively with designers and accurately bringing their visions to life in code.

Reading list

We haven't picked any books for this reading list yet.
A seminal work that explores the psychology behind how we interact with everyday objects, this book provides a crucial foundation for understanding user behavior and designing intuitive interfaces. While not solely focused on digital UI, its principles are universally applicable and considered a must-read for anyone entering the design field.
Delves into the theoretical foundations of interaction design, exploring how users interact with technology and how to design for effective and engaging experiences.
Provides a foundational framework for understanding user experience design, breaking it down into five planes: strategy, scope, structure, skeleton, and surface. It's a great resource for beginners to grasp the overall process of creating user-centered digital experiences.
Provides a comprehensive guide to UI design for mobile devices, covering topics such as screen design, navigation, and user interaction.
Focuses on the practical aspects of prototyping, providing step-by-step instructions on how to create effective and low-fidelity prototypes.
Focuses on the user experience of mobile apps, providing practical guidelines on how to create intuitive and engaging interfaces.
Explores the role of emotions in design, providing insights into how to create products that are not only functional but also emotionally appealing.
Foundational text for anyone in UI design, focusing on the principles of intuitive navigation and information design with a common-sense approach to web usability. It's an excellent starting point for beginners and offers practical tips for immediate application. While not exclusively about UI, its core principles are directly applicable and essential for creating user-friendly interfaces.
This comprehensive book delves into goal-directed design and provides a detailed framework for interaction design. It's a valuable resource for understanding the entire design process and is often used as a reference for best practices in creating well-behaved and delightful products.
Serves as a comprehensive guide and reference for common UI design patterns and terminology. While some examples may be dated, the underlying principles and patterns remain highly relevant for understanding how to design effective and familiar interfaces.
Presents a cross-disciplinary collection of design principles that are fundamental to creating effective and understandable interfaces. It's a useful reference for designers of all levels to understand the core concepts that underpin good design across various fields.
Explores the psychological principles that influence user behavior and provides designers with a framework for creating persuasive and ethical products. It's a valuable resource for understanding the 'why' behind design decisions and is relevant for both UI and UX professionals.
Emphasizes the importance of communication in UI design and provides practical tools for solving real-life UI problems. It's a good resource for understanding the fundamental principles of creating user-centered interfaces through clear and effective communication.
Translates psychological principles into actionable design advice, offering 100 concise insights into how users think, read, remember, and make decisions. It's a valuable resource for incorporating human behavior into UI design.
This intriguing book explores how psychology is used in interface design for persuasion and commercial gain, including discussions of dark patterns. It offers a fascinating perspective on the ethical considerations of UI design and how interfaces can influence user behavior.
Provides a comprehensive overview of UI design principles and best practices, covering topics such as user research, information architecture, visual design, and interaction design.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Similar courses are unavailable at this time. Please try again later.
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser