User Interface Design Course

Lesson 1 • Core Visual Design Principles

Covers contrast, alignment, repetition, and proximity as foundational layout rules. Students apply these principles to evaluate and improve basic screen layouts.

Lesson 2 • What UI Design Is

Defines UI design, distinguishes it from UX and graphic design, and maps its role in product development. Grounds all subsequent chapters in shared definitions.

Lesson 3 • Mental Models and Affordances

Explains how users form expectations from prior experience and how affordances signal interactivity. Connects cognitive psychology to practical control design.

Lesson 4 • The UI Design Process Overview

Outlines the end-to-end design workflow from discovery to handoff. Sets expectations for how each chapter fits into a professional design cycle.

Lesson 1 • Typographic Scale and Hierarchy

Establishes modular scale systems and heading structures that organise content visually. Students create type scales that communicate information priority clearly.

Lesson 2 • Building Accessible Colour Palettes

Teaches contrast ratio requirements and colour-blindness considerations for inclusive design. Students audit and correct palettes to meet accessibility standards.

Lesson 3 • Typography Fundamentals

Introduces typeface anatomy, classification, and legibility factors for screen use. Students pair typefaces and set readable body and display text.

Lesson 4 • Colour Theory for Digital Screens

Covers hue, saturation, value, and colour models relevant to screen rendering. Students select palettes that communicate brand and function accurately.

Lesson 1 • Grid Systems Explained

Covers column, modular, and baseline grids and their roles in organising screen content. Students select the appropriate grid type for a given interface context.

Lesson 2 • Spacing Tokens and Scale

Introduces spacing scales and token systems that enforce consistent padding and margins. Students define and apply a spacing scale across multiple UI components.

Lesson 3 • Flexbox and Auto-Layout Concepts

Explains flex-direction, alignment, and wrapping as they apply to UI layout tools. Students build dynamic component frames that resize without manual adjustment.

Lesson 4 • Responsive and Adaptive Layouts

Distinguishes responsive fluid layouts from adaptive breakpoint-based designs. Students configure layouts that reflow correctly across mobile, tablet, and desktop.

Lesson 1 • Anatomy of UI Components

Breaks down buttons, inputs, cards, and modals into their structural parts. Students identify component states and understand how each part serves a function.

Lesson 2 • Navigation Patterns

Covers tab bars, side drawers, breadcrumbs, and mega-menus as navigation solutions. Students match navigation patterns to information architecture and user context.

Lesson 3 • Form Design Best Practices

Teaches label placement, input validation, error messaging, and multi-step form flows. Students redesign poorly structured forms to reduce user error and friction.

Lesson 4 • Data Display Components

Addresses tables, lists, charts, and empty states as methods of presenting structured data. Students choose display components that match data density and user goals.

Lesson 1 • What a Design System Is

Defines design systems, distinguishes them from style guides and pattern libraries. Students map the relationship between tokens, components, and documentation.

Lesson 2 • Theming and Brand Flexibility

Demonstrates how token swapping enables multi-brand or dark-mode theming. Students implement a secondary theme without restructuring existing components.

Lesson 3 • Design Token Architecture

Covers global, alias, and component-level tokens and their naming conventions. Students structure a token hierarchy that supports theming and brand flexibility.

Lesson 4 • Building Reusable Components

Teaches atomic design methodology and component composition from atoms to organisms. Students construct a set of base components with documented props and variants.

Lesson 1 • Prototyping Motion in Design Tools

Demonstrates building interactive prototypes with timed transitions and scroll triggers. Students deliver a clickable prototype that communicates motion intent to stakeholders.

Lesson 2 • Motion Accessibility Considerations

Addresses vestibular disorders, reduced-motion preferences, and safe animation thresholds. Students audit a prototype and add reduced-motion alternatives for all key animations.

Lesson 3 • Microinteraction Anatomy

Breaks microinteractions into triggers, rules, feedback, and loops or modes. Students map each element of a microinteraction before designing its visual behaviour.

Lesson 4 • Principles of Motion Design

Covers easing, duration, and choreography as the core grammar of UI motion. Students distinguish purposeful animation from decorative motion using defined criteria.

Lesson 1 • Analysing and Synthesising Findings

Teaches affinity mapping, severity rating, and pattern identification across sessions. Students transform raw observations into a structured findings report.

Lesson 2 • Usability Testing Fundamentals

Defines moderated vs. unmoderated testing, task-based evaluation, and think-aloud protocol. Students write a test plan aligned to specific usability questions.

Lesson 3 • Conducting and Facilitating Sessions

Covers session setup, neutral facilitation, note-taking, and avoiding leading questions. Students practise facilitation through role-play before running real sessions.

Lesson 4 • Iterating Based on Evidence

Demonstrates how to prioritise fixes, redesign targeted elements, and retest efficiently. Students apply findings to revise a prototype and document design decisions.

Lesson 1 • Asset Export and Optimisation

Addresses icon export formats, image compression, and resolution requirements for multiple platforms. Students export a full asset set with correct naming and format conventions.

Lesson 2 • Measuring Implementation Fidelity

Introduces visual regression concepts and side-by-side comparison methods for QA. Students identify and log fidelity gaps between design files and live builds.

Lesson 3 • Preparing Files for Handoff

Covers layer naming, component organisation, and file structure conventions for developer review. Students audit and restructure a design file to meet handoff standards.

Lesson 4 • Annotating Design Specifications

Teaches how to annotate spacing, states, interactions, and edge cases within design files. Students add a complete annotation layer to an existing screen set.