Interactive Prototyping Course

Lesson 1 • Setting Up Your Workspace

Guides students through configuring a professional prototyping environment with organised file structures and shared libraries. Reduces setup friction for all subsequent exercises.

Lesson 2 • Prototyping Tool Landscape

Surveys major categories of prototyping tools and their core strengths. Helps students match tool capabilities to project requirements.

Lesson 3 • What Is Interactive Prototyping

Defines prototyping within the product design lifecycle and distinguishes it from wireframing and mockups. Establishes vocabulary used throughout the course.

Lesson 1 • Personas and Scenario Mapping

Teaches creation of actionable personas and scenario maps that drive prototype content and flow decisions. Ensures prototypes reflect realistic use cases.

Lesson 2 • Accessibility and Inclusive Design

Embeds accessibility considerations into prototype decisions from the start, covering contrast, touch targets, and keyboard navigation. Prevents costly retrofits later in development.

Lesson 3 • User Research for Prototype Scoping

Covers lightweight research methods that directly inform prototype scope and interaction priorities. Connects research outputs to actionable prototype requirements.

Lesson 4 • Understanding Users and Mental Models

Introduces mental models and how users form expectations about interfaces. Grounds prototype decisions in cognitive reality rather than designer preference.

Lesson 1 • Navigation Patterns and Wayfinding

Surveys primary, secondary, and utility navigation patterns and their appropriate contexts. Ensures users always know where they are and how to proceed.

Lesson 2 • Site Maps and Content Inventories

Teaches creation of site maps that document all screens and their relationships. Serves as the master reference for prototype linking and scope management.

Lesson 3 • Task Flow and User Flow Diagrams

Distinguishes task flows from user flows and teaches diagramming both for complex interactions. Flows become the blueprint for interactive hotspot connections.

Lesson 4 • Core Information Architecture Concepts

Covers hierarchy, taxonomy, and labelling systems that organise content for discoverability. Provides the structural backbone for all prototype navigation.

Lesson 1 • Wireframing Core Screen Templates

Builds reusable wireframe templates for common screen types such as dashboards, forms, and lists. Templates reduce redundant work across the prototype.

Lesson 2 • Rapid Iteration from Feedback

Establishes a structured process for incorporating feedback into wireframes quickly without losing version history. Builds the iteration discipline needed for high-fidelity work.

Lesson 3 • Component-Based Wireframe Systems

Introduces atomic design principles applied to wireframe components for consistency and reuse. Students build a shared component library that scales across screens.

Lesson 4 • Paper Prototyping Techniques

Covers materials, sketching conventions, and facilitation methods for paper prototype sessions. Establishes speed-first habits that accelerate all subsequent digital work.

Lesson 1 • Design Tokens and Style Guides

Formalises visual decisions as design tokens that bridge prototype and development handoff. A living style guide ensures design consistency across all prototype screens.

Lesson 2 • Typography Systems in Prototypes

Establishes type scales, hierarchy, and pairing rules that translate directly into prototype screens. Consistent typography signals professionalism and aids readability testing.

Lesson 3 • Colour Systems and Theming

Builds structured colour palettes with primary, secondary, semantic, and neutral tokens. Theming enables rapid light/dark mode switching within the prototype.

Lesson 4 • Spacing, Grids, and Layout Systems

Applies consistent spacing scales and responsive grid systems to all prototype screens. Precise layout prevents misalignment issues when developers implement the design.

Lesson 1 • Conditional Logic and Variables

Introduces variables and conditional logic within prototyping tools to simulate dynamic data and state changes. Enables realistic multi-state prototypes without writing code.

Lesson 2 • Transition and Navigation Animations

Designs screen transitions that reinforce spatial relationships and navigation hierarchy. Smooth transitions reduce cognitive load during user testing sessions.

Lesson 3 • Micro-Interaction Design Patterns

Breaks down micro-interactions into trigger, rules, feedback, and loops for systematic design. Students apply the framework to buttons, toggles, and form validation states.

Lesson 4 • Principles of Motion Design

Covers easing, duration, and choreography principles that make animations feel natural and purposeful. Grounds motion decisions in perception science rather than aesthetic preference.

Lesson 1 • Remote and Unmoderated Testing

Covers tools and protocols for running asynchronous remote tests at scale. Remote testing expands participant diversity and reduces scheduling constraints.

Lesson 2 • Facilitating Moderated Test Sessions

Teaches facilitation techniques that elicit honest feedback without leading participants. Skilled facilitation maximises the quality of observational data collected.

Lesson 3 • Analysing and Synthesising Test Data

Applies affinity mapping and severity rating to convert raw observations into prioritised findings. Structured analysis prevents cherry-picking and ensures comprehensive coverage.

Lesson 4 • Reporting and Acting on Findings

Structures usability reports for different audiences and translates findings into prototype revisions. Closes the loop between testing and design iteration.

Lesson 1 • Design System Documentation

Builds living documentation for component usage, do/don't guidelines, and pattern rationale. Documented systems enable consistent implementation across teams and products.

Lesson 2 • Annotation and Specification Writing

Covers inline annotation techniques that document behaviour, states, and edge cases directly on prototype screens. Clear specs reduce developer questions and implementation errors.

Lesson 3 • Design Handoff Platforms and Workflows

Surveys handoff platform features including redlines, token inspection, and comment threads. Efficient handoff workflows reduce back-and-forth between design and engineering.

Lesson 4 • Asset Export and Optimization

Teaches exporting icons, images, and components in correct formats and resolutions for all target platforms. Optimised assets prevent rendering issues in production.