Prototype

A prototype is a preliminary version of a product used to test ideas, validate concepts, and gather feedback before investing in full development.

Fidelity Levels

Low-fidelity:

• Paper sketches
• Basic wireframes
• Simple click-throughs
• Fast and cheap

Mid-fidelity:

• Digital wireframes
• Some interactions
• Placeholder content
• Quick iterations

High-fidelity:

• Looks like final product
• Full interactions
• Real content
• Detailed testing

Types of Prototypes

Paper prototypes: Hand-drawn screens on paper Click-through: Static screens with hotspots Interactive: Working buttons, forms, transitions Code: Functional but not production-ready

Why Prototype

✅ Test early: Find problems before development ✅ Save money: Cheaper to change designs than code ✅ Get feedback: From users and stakeholders ✅ Align team: Shared vision of product ✅ Validate assumptions: Test before building

Prototyping Workflow

1. Card sort: Understand content organization
2. Sketch: Low-fi paper prototypes
3. Wireframe: Mid-fi digital layouts
4. Prototype: Interactive high-fi version
5. Test: With real users
6. Iterate: Based on feedback
7. Develop: Build the real thing

Common Tools

• Figma (popular, collaborative)
• Adobe XD
• Sketch + Principle/Framer
• InVision
• Axure (complex interactions)

Prototyping Best Practices

Start low-fi and increase fidelity as needed Use real content when possible Make it realistic enough to test Don't over-invest before testing Test with target users, not team

Card sorting should happen BEFORE prototyping to ensure your structure is user-centered!