en
CBO • Registration Pending Bulenga, Wakiso District, Uganda
"Where Talent Grows Together" Join Community
All Free Courses & Fields
Design • Step-by-Step Curriculum

UI/UX Design & Digital Product Engineering

Learn visual hierarchy, user research, Figma prototyping, WCAG accessibility, design systems, and developer handoff.

Track Progress 0/8 Steps (0%)
Sign in to save progress, pass the Mastery Test, and earn a verified MESHLUMA Certificate. Practice Mastery Test (5 Questions)
Practical Equipment & Study Requirements
What laptop, phone, internet, and free tools you need for this field—plus cloud options if your device is low-spec.
Any 4GB+ Laptop (Browser Figma)
Laptop / PC Specs

Minimum: 4GB RAM, 128GB SSD, 1366x768+ screen — Figma runs smoothly right inside Chrome/Edge with no heavy install.

Recommended: 8GB+ RAM, Full HD (1920x1080) IPS display with accurate color, external mouse for faster vector & Auto Layout work.

Free Cloud Option: Figma Web (figma.com) & Penpot (open-source browser design tool) work on Windows, Linux, Mac, and Chromebooks.

Phone & Internet

Phone-Friendly Start

Great for reading Laws of UX, Material Design, and previewing Figma prototypes via the Figma mobile app; designing requires a laptop.

Internet: 2–4 Mbps for cloud Figma files and asset syncing.

Free Software & Hardware Kit
Figma (Free Starter Plan) Penpot (Free Open Source) Google Fonts Chrome Lighthouse Accessibility Audit

Hardware / Kit: Optional: a simple wired/wireless mouse and a paper notebook for quick wireframe sketching.

Best Way to Study This Field Easily: Sketch flows on paper first, then build in Figma's free browser workspace using Material 3 kits and test prototypes on your phone.
All Levels (1–8) Beginner Intermediate Advanced Expert
Beginner Stage

Zero prior experience required — core concepts & first hands-on builds.

Step 1 beginner ~10 hrs

Visual Design: Typography, Color & Spacing

Develop an eye for clean hierarchy, readable type scales, contrast, and balanced whitespace.

What You Will Learn
  • Type scales & line-height
  • Color contrast & semantic palettes
  • 8pt spacing grids
Free Public Courses & Official Docs
Material Design 3 Guidelines
Google Design • Design System
Open Free
web.dev Learn Design
Google • Course
Open Free
Hands-On Milestone Project: Redesign an existing form or card layout using an 8pt spacing scale and strong hierarchy.
Step 2 beginner ~10 hrs

UX Foundations, User Flows & Psychology

Understand how users scan pages, make decisions, and complete tasks without friction.

What You Will Learn
  • Jakob's Law, Hick's Law & Fitts's Law
  • User journeys & task flows
  • Information architecture
Free Public Courses & Official Docs
Laws of UX
Laws of UX • Reference
Open Free
UX Research & Usability Articles
Nielsen Norman Group • Research
Open Free
Hands-On Milestone Project: Map a friction-free onboarding flow for a new community member.
Intermediate Stage

Build real multi-part projects, tooling fluency, and problem-solving speed.

Step 3 intermediate ~16 hrs

Wireframing & Interface Design in Figma

Master Figma frames, Auto Layout, constraints, and reusable UI components.

What You Will Learn
  • Auto Layout & responsive frames
  • Components & variants
  • Vector icons & SVG export
Free Public Courses & Official Docs
Figma Learn Design
Figma • Official Guides
Open Free
Hands-On Milestone Project: Design a 5-screen mobile & desktop web app in Figma using Auto Layout.
Step 4 intermediate ~12 hrs

Interactive Prototyping & Usability Testing

Validate ideas early with clickable prototypes and structured 5-user usability tests.

What You Will Learn
  • Smart animate & interactive states
  • Writing unbiased test scripts
  • Synthesizing usability findings
Free Public Courses & Official Docs
UX Design Roadmap
roadmap.sh • Roadmap
Open Free
Hands-On Milestone Project: Run a 3-person usability test on your Figma prototype and iterate on top friction points.
Advanced Stage

Production patterns, architecture, automation, and security rigor.

Step 5 advanced ~18 hrs

Design Systems & Design Tokens

Scale design consistency across teams with tokens, component APIs, and documentation.

What You Will Learn
  • Color, spacing & motion tokens
  • Light/dark theme architecture
  • Component governance
Free Public Courses & Official Docs
Design Systems Handbook
DesignBetter • Free Book
Open Free
Hands-On Milestone Project: Publish a mini Figma UI kit with semantic tokens for buttons, inputs, and cards.
Step 6 advanced ~12 hrs

Accessibility (WCAG 2.2) & Inclusive Design

Ensure every user—including keyboard and screen-reader users—can use your product effortlessly.

What You Will Learn
  • WCAG AA/AAA contrast
  • Keyboard focus order & ARIA
  • Reduced-motion design
Free Public Courses & Official Docs
W3C WAI Tutorials
W3C • Official Tutorials
Open Free
The A11Y Project Checklist
A11Y Project • Checklist
Open Free
Hands-On Milestone Project: Audit a live website against the A11Y checklist and document fixes.
Expert Stage

Scale, observability, testing, leadership, and real-world deployment.

Step 7 expert ~14 hrs

Motion Design, Micro-Interactions & Dev Handoff

Craft purposeful CSS/SVG motion and collaborate seamlessly with frontend engineers.

What You Will Learn
  • Easing curves & motion budgets
  • Micro-interaction feedback states
  • Redlines & CSS token handoff
Free Public Courses & Official Docs
Animations Guide
web.dev • Guide
Open Free
Hands-On Milestone Project: Spec a complete motion & micro-interaction guide with exact durations and easings.
Step 8 expert ~14 hrs

Product Strategy, Metrics & Design Leadership

Connect UX decisions to retention, conversion, and measurable community impact.

What You Will Learn
  • HEART framework & funnel metrics
  • Design critiques & stakeholder alignment
  • Portfolio storytelling
Free Public Courses & Official Docs
Google Design Library
Google Design • Articles
Open Free
Hands-On Milestone Project: Publish an end-to-end case study showing problem, research, iterations, and results.
Field Mastery Assessment

UI/UX Design & Digital Product Engineering — Practical Mastery Assessment

Score 80% or higher (5 scenario questions) + submit your real practical capstone project after at least 7 days of study to earn a Verified MESHLUMA Certificate.

Sign In & Complete Study Steps to Unlock Test

Tests are given after studying all 8 steps to prove real practical mastery.

Sign In to Track Study & Unlock Test
Explore Other Technology Fields
Software Development & Web Engineering Artificial Intelligence, ML & Data Science Cybersecurity & Networking Hardware, IoT & Robotics Cloud Computing, DevOps & SRE Mobile App Development Digital Literacy, Productivity & Tech Foundations Ethical Hacking & Penetration Testing Digital & Online Marketing Sales, Business Development & Client Acquisition Kids & Teens Coding, Robotics & Digital Creativity Leadership & Personal Development Lean & Agile Methodologies HTML & CSS Mastery Git, GitHub & GitLab Workflows Python Programming Object-Oriented Development (OOP) Human-Centered Design (HCD) Lean Startup Methodologies Django & Django Templating Language (DTL) Application & Software Security (AppSec) APIs & Microservices Architecture Choosing Your Tech Stack & System Architecture Project Planning, Roadmaps & Software Structuring UI Layouts, Page Grids & Responsive Design Systems Laravel & Laravel Herd Full-Stack Engineering AI Video Making with Google Flow, Gemini & Long-Form (>1 Min) Editing AI Image Generation & Logo Design (ChatGPT, Gemini & Vector Branding) AI Tools & Coding with AI Setup (Everything Before Coding & Debugging)