UX

UI/UX Design Tutorial

Design products people enjoy – research, personas, wireframes, prototypes and usability testing.

Start lesson 1 Take the quiz Cheat sheet
12 lessons

UI/UX design is about making products that are useful, easy and pleasant to use. This track explains the process designers follow – from understanding users through research and personas, to structuring content, wireframing, prototyping in Figma and testing your designs with real people – plus the visual basics of hierarchy, colour and typography.

  1. 1 Introduction to UI/UX DesignWhat UI/UX design is, what designers actually do all day, and how this 12-lesson track will take you from zero…
  2. 2 UX vs UI: What Is the Difference?UX and UI are related but not the same. Learn what each one covers, who does what in a team,…
  3. 3 The Design Thinking ProcessLearn the five stages of design thinking and the Double Diamond model, with a college-website example and a checklist for…
  4. 4 User Research BasicsLearn the main user research methods, when to use each, and how to plan and run a simple user interview…
  5. 5 Creating User PersonasLearn how to turn research into useful user personas, what to include, what to leave out, and how to keep…
  6. 6 Information ArchitectureLearn how to organise and label content so people can find things: sitemaps, user flows, navigation patterns, card sorting and…
  7. 7 WireframingLearn what wireframes are, the difference between low and high fidelity, and a step-by-step way to wireframe a mobile screen…
  8. 8 Prototyping in FigmaTurn wireframes into a clickable prototype in Figma: connections, triggers, actions, overlays, Smart Animate, interactive components and variables.
  9. 9 Visual HierarchyLearn how size, contrast, weight, spacing and position guide the eye, so users see the most important thing on a…
  10. 10 Colour in UI DesignBuild a practical UI colour palette, use colour for meaning, meet WCAG 2.2 contrast ratios, and organise colours as Figma…
  11. 11 Typography for UIChoose readable fonts, build a type scale, set line height and line length, support Indian scripts, and turn it all…
  12. 12 Usability TestingPlan and run a simple usability test: write tasks, recruit participants, use think-aloud, rate problems by severity, and check Nielsen's…