Module 8: Prototyping & Interaction Design
- Build a clickable prototype linking multiple screens
- Design simple micro-interactions that give users feedback
- Explain why prototypes are tested before writing production code
A prototype is an interactive simulation of a product — ranging from a few linked wireframes a user can click through, to a high-fidelity version that looks and feels almost like the real app — built in tools such as Figma, which lets designers connect screens together and define what happens when a button is tapped. Interaction design focuses on the small moments of feedback, often called micro-interactions, such as a button changing color when pressed or a loading spinner appearing during a wait, which reassure users that the system registered their action. Testing a prototype with real users before a single line of production code is written catches major flow problems while they are still cheap to fix — redesigning a clickable prototype takes minutes, while reworking shipped, coded software takes far longer.
1. Why test a prototype before writing production code?
2. A micro-interaction is: