UI/UX Design

Wishlist Share

About Course

A hands-on UI/UX design course built around Figma, the industry-standard design tool; covering design principles, wireframing, prototyping, basic user research, and how to package it all into a portfolio that gets you hired or hired for freelance work. Every lesson walks through real, live screens, includes an illustrative diagram, and links to a real video for further explanation.

What Will You Learn?

  • Explain the difference between UI and UX, and apply core visual design principles
  • Navigate Figma confidently: frames, components, Auto Layout, and styles
  • Build a low-fidelity wireframe and a user flow for a real screen
  • Create an interactive, clickable prototype and hand it off to a developer
  • Run a simple usability test and turn feedback into design changes
  • Put together a portfolio case study that presents real design thinking

Course Content

UI/UX Design Foundations
This covers the following lessons: UI vs. UX: What's the Actual Difference Two different jobs that get confused constantly. The Design Process: Research → Wireframe → Prototype → Test The loop every real design project actually follows. Design Principles: Hierarchy, Contrast, Alignment, Consistency The four rules that separate "fine" from "good." Color, Typography & Accessibility Basics Designing something that actually everyone can use.

  • UI vs. UX: What’s the Actual Difference
  • The Design Process: Research → Wireframe → Prototype → Test
    00:00
  • Design Principles: Hierarchy, Contrast, Alignment, Consistency
  • Color, Typography & Accessibility Basics
    00:00
  • UI/UX Design Foundations

Getting Started with Figma
This covers the following lessons: Figma Interface Tour Frames, panels and toolbar; the whole app in ten minutes. Frames, Shapes & Basic Tools The building blocks of every design, live. Working with Text, Color Styles & Images Making a design consistent instead of one-off. Components & Auto Layout Figma's two most powerful, most misunderstood features.

Wireframing & User Flows
This covers the following lessons: Low-Fidelity Wireframing Basics Boxes and lines, and why that's exactly the point. Building a Wireframe in Figma A real screen, sketched digitally, live. Mapping User Flows The path a real person takes to get something done. From Wireframe to High-Fidelity Design Adding the visual layer without losing the structure.

Prototyping & Interaction Design
This covers the following lessons: Figma Prototyping Basics Wiring frames together into something clickable, live. Micro-interactions, Smart Animate & Transitions The small motion details that make a prototype feel real. Sharing Prototypes for Feedback Getting a link in front of the people who need to see it. Handing Off to Developers (Dev Mode) Speaking the language a developer can actually build from, live.

User Research & Usability Testing
This covers the following lessons: Why User Research Matters Designing for a real person instead of an assumption. Basic User Research Methods Interviews and surveys, done simply and well. Running a Simple Usability Test Watching someone actually use what you built. Turning Feedback Into Design Changes Deciding what to fix first, and what to leave alone.

Building a Portfolio & Landing Work (Capstone)
This covers the following lessons: What Makes a Strong UI/UX Portfolio 3-4 real projects, done well, beats ten done poorly. Presenting a Case Study Showing the thinking, not just the final screens. Common UI/UX Mistakes Beginners Make The avoidable habits that quietly hold a portfolio back. Final Project: Design and prototype a simple app screen in Figma, then write a one-page case study.

Student Ratings & Reviews

No Review Yet
No Review Yet
wpChatIcon
wpChatIcon