Live Class 1: Orientation & Industry Reality

Orientation | What is UI/UX | Empathy in design | Graphics Design vs UI/UX | Product Designer vs UI Designer vs UX Researcher | Job market landscape, local and global | Tool stack overview | How AI is reshaping the role | Figma download, install, account creation and Education plan upgrade | Q&A

Live Class 2: Fundamentals & Figma Basics

UI/UX fundamentals | Honeycomb method | Human Centered Design | The working process of a UI/UX designer | Difference between Mobile App, Web App, SaaS, Website and Landing Page | Figma interface, frames, layers and basic tools

Live Class 1: Visual Design Foundations

Visual elements | Design principles | Visual hierarchy | Alignment, spacing and balance | White space | Consistency | Introduction to layout thinking

Live Class 2: YouTube App Clone

Breaking down an existing product step by step | Rebuilding the YouTube app interface | Introduction to WCAG and accessible design

Assignment: YouTube App Clone (full version)

Live Class 1: All About Colour

Colour theory | Colour process | 60-30-10 rule | Colour formats: RGB, HEX, HSL, HSB, CSS | Gradients | Colour plugins | Colour meaning and psychology | Contrast ratios and accessibility | Colour blindness | Colour resources

Assignment 1: Colour Fix — repair a broken colour system

Live Class 2: Typography

History of typography | Typography in UI | Type properties | The type system | Type scale | Font pairing | Readability and line height | Typography guidelines

Assignment 2: Screen Redesign applying colour and typography

Live Class 1: Shadow, Elevation & Iconography

Shadow theory | How shadow works | Elevation systems | Neumorphism UI | Blur, blend modes and effects | Icon systems and consistency | Basic prototyping

Assignment 1: Neumorphism UI

Live Class 2: Critique Session 1

Live review of Week 2–3 student work | How to give and receive design feedback | Common beginner mistakes | Building a self-critique checklist

Live Class 1: Basic Components

What components are and why they matter | Creating components | Instances and overrides | Component states

Assignment 1: Messenger App with prototype

Live Class 2: Advanced Components

Variants | Component properties | Boolean, instance swap and text properties | Nested components | Complex prototyping

Assignment 2: Button component system

Live Class 1: Auto Layout Fundamentals

Introduction to Auto Layout | Padding, gap and alignment | Hug, fill and fixed | Nested Auto Layout | Implementation practice

Assignment 1: Auto Layout practice set

Live Class 2: Responsive Design & Grid

Using Auto Layout for responsive websites | Breakpoints | Common website patterns | Grid systems: columns, gutters and margins | Constraints

Assignment 2: Responsive website across three breakpoints

Live Class 1: Building a Design System with Component Library and Variables

Introduction to design systems | Types of design systems | Atomic Design methodology | Colour styles, text styles and effect styles | Naming conventions

Assignment 1: Design system — colour and type styles

Live Class 2: Publishing & Team Workflow

Building atoms, molecules and organisms step by step | Publishing a library | Importing and updating a shared design system | Version control | Working in a team file

Assignment 2: VPN App built entirely from your design system

Live Class 1: Advanced Prototyping

What variables and tokens are | Modes: light/dark, language, density | Scoping and aliasing | Token naming structure

Assignment 1: Multi-mode card component built with variables

Live Class 2: Handoff

Advanced prototyping with smart animate, conditionals and variables | Dev Mode | Annotation and specs | What developers actually need from a designer | Handoff checklist | Common handoff failures

Assignment 2: Full developer handoff file for the VPN App