Unit Overview

Covers the full transition from lo-fi paper blueprints and user journey storyboards to interactive high-fidelity clickable prototypes in Figma.

§	Topic	Slides	Description
6.1	Wireframes & mock-ups	4–7	Layout blueprints vs visual styling, grayscale rules, wireframe $\leftrightarrow$ mockup distinction
6.2	Prototyping: Lo-Fi, Hi-Fi & Interactive	8–13	Paper prototyping (“Human Computer”) vs pixel-perfect digital, speed/cost tradeoffs
6.3	UX storyboarding	14–16	Walt Disney origins, context, pain points & empathy, 4-panel comic narrative structure
6.4	Software prototyping	17–19	Figma, Framer, ProtoPie, Balsamiq, frame nesting, connector noodles, interactive component variants
6.5	Transition & animation	20–23	Motion as communication, Push, Modal Sheet, Dissolve, Smart Animate, and easing physics
6.6	Clickable prototype blueprint	24–26	5-step prototype blueprint, 48×48px hotspots, triggers, actions, and backstack management
Review	Summary & TU BCA Exam Prep	27–30	5 Do’s & Don’ts, cheat sheet, and frequent board exam question breakdowns

Unit 6 · Wireframing and Prototyping (Slides)

Syllabus Coverage