UI Design Essentials
Design interfaces that are clear, usable, and beautiful — grounded in real components and states.
The full curriculum is below. Enrolment opens when this course goes live — and your practice XP already counts toward it.
Curriculum
Clear, example-led readings — no fluff. Every module ends with a knowledge check; every chapter closes with a test and a practical project.
Meelro Module Assistant on every module
An AI tutor scoped to the exact module you're on — ask questions, get examples, and get unstuck at your own pace. Usage scales with your plan.
Grids that actually helpPreview
Reading·Knowledge check·Assistant
The 8-point spacing systemPreview
Reading·Knowledge check·Assistant
Composing a screen
Reading·Knowledge check·Assistant
Chapter test
6 multiple-choice · 2 written questions
Practical work · Lay out a dashboard
Design a dashboard screen for a product of your choice on an 8-point grid — include a header, a nav, and at least four content cards with consistent spacing. Submit the layout.
Anatomy of a button
Reading·Knowledge check·Assistant
Every state: hover, focus, disabled, loading
Reading·Knowledge check·Assistant
Inputs and forms
Reading·Knowledge check·Assistant
Chapter test
6 multiple-choice · 2 written questions
Practical work · Design a component in every state
Pick one component — a button, input, or toggle — and design all of its states on a single frame: default, hover, focus, active, disabled, and loading. Submit it.
Color roles in an interface
Reading·Knowledge check·Assistant
Contrast that passes AA
Reading·Knowledge check·Assistant
Semantic color tokens
Reading·Knowledge check·Assistant
Chapter test
6 multiple-choice · 2 written questions
Practical work · Design an accessible card
Design a content card using a small palette — surface, text, brand, and one status color. Make sure every text-on-background pair clears AA contrast. Submit the card.
Mapping a user flow
Reading·Knowledge check·Assistant
From wireframe to screen
Reading·Knowledge check·Assistant
Empty and error states
Reading·Knowledge check·Assistant
Chapter test
6 multiple-choice · 2 written questions
Practical work · Design a three-screen flow
Choose a simple task — sign up, book a slot, or add to cart — and design its three key screens, including one empty or error state. Submit the set.