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:
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.
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.
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!
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.
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.