UI/UX design foundations

Learn to research what people need, structure screens around it, and design interfaces that are clear, accessible and ready to build.

  • Beginner
  • 18 lessons
  • 6 hr
  • Taught by Skillhancer Labs team

What you'll learn

  • Explain the difference between UX and UI, and where each fits in a project
  • Plan and run short user interviews, and turn what you hear into job stories
  • Organise content and map user flows before designing any screens
  • Wireframe screens with clear visual hierarchy, consistent spacing and a grid
  • Choose type and colour that are readable and meet WCAG AA contrast
  • Design for keyboard users, screen readers and small screens from the start
  • Build a clickable prototype and test it with a small round of users
  • Hand designs to developers with the states, specs and notes they need

About this course

This course teaches the foundations of user experience (UX) and user interface (UI) design, using the kinds of projects small businesses ask for every day: websites, booking flows, apps and simple tools.

You will learn how to find out what people are trying to do, and how to organise content and flows before drawing any screens. Then you will design layouts, type and colour that are readable and accessible. The last section covers design systems, prototypes, usability testing, mobile design and handing work to developers.

You don't need design software or any experience. Paper and a pen are enough for most exercises, and any design tool works for the rest. The final project has you redesign a real small business's booking flow, which our staff review.

Course content

5 sections · 18 lessons · 6 hr in total

Start here: what UX and UI design are2 lessons · 21 min
  1. What UX and UI design areArticlePreview8 min
  2. How a design project runsArticleEnroll to open13 min
Understanding the people you design for3 lessons · 1 hr
  1. User research basicsArticleEnroll to open14 min
  2. Interviews that uncover real needsArticleEnroll to open33 min
  3. Jobs to be doneArticleEnroll to open13 min
Structure before style3 lessons · 59 min
  1. Information architectureArticleEnroll to open18 min
  2. User flowsArticleEnroll to open18 min
  3. WireframingArticleEnroll to open23 min
Visual design that works for everyone5 lessons · 1 hr 27 min
  1. Visual hierarchyArticleEnroll to open13 min
  2. Layout, spacing and gridsArticleEnroll to open18 min
  3. TypographyArticleEnroll to open13 min
  4. Colour and contrastArticleEnroll to open19 min
  5. Accessibility basicsArticleEnroll to open24 min
From design to product5 lessons · 2 hr 13 min
  1. Design systems and componentsArticleEnroll to open18 min
  2. PrototypingArticleEnroll to open23 min
  3. Usability testingArticleEnroll to open49 min
  4. Designing for mobileArticleEnroll to open19 min
  5. Handing designs to developersArticleEnroll to open24 min

Projects

Put the course into practice. A member of staff reviews every submission.

Beginner

Redesign a small business's booking flow

Choose a real small business that takes bookings, such as a salon, clinic, gym, tutor or restaurant, and redesign its booking flow so customers can book quickly and…

7 deliverables

Your instructor

ST

Skillhancer Labs team

Written and maintained by the Skillhancer Labs team.

UI/UX design foundations · Skillhancer Labs