UI/UX Design Essentials

The empathize–define–ideate–prototype–test cycle.

Apply the cycle at a high level to a sample problem.

Describe and apply the design thinking process.

Basic research methods — interviews, surveys.

Draft a short interview/survey for a sample user problem.

Design a simple piece of user research.

Building a persona from research findings.

Build a persona from the earlier research.

Construct a basic user persona.

Mapping a task as a user flow.

Map the persona's key task as a user flow diagram.

Map a user flow for a given task.

Low-fidelity wireframing tools and basics.

Sketch a first low-fidelity wireframe screen.

Create a basic low-fidelity wireframe.

Wireframing a small set of connected screens.

Wireframe 3–4 screens for the app/site.

Wireframe a small connected screen set.

Grids, visual hierarchy, spacing principles.

Apply a grid and hierarchy pass to the wireframes.

Apply layout principles to improve a design.

Choosing accessible colour palettes and type pairings.

Select and apply a colour/type system to the design.

Choose an accessible, cohesive colour/type system.

Buttons, forms, cards — building reusable UI components.

Design a small set of reusable components.

Design consistent, reusable UI components.

Turning wireframes into a clickable prototype.

Link the screens into a clickable prototype.

Build a basic clickable prototype.

Running a mini usability test, iterating on feedback.

Run a quick usability test and adjust the prototype based on findings.

Independently run a usability test and iterate on a design.