Profile My skills Saved Collections Edit profile Submit a skill

Prototyping Strategy

Prototyping fidelity decisions, tools selection, prototype testing, and interactive prototype design.

dragoon0x 351e9f6 1.3 KB Updated
Coding & Dev Tools

File contents

Prototyping Strategy

Fidelity Spectrum

Fidelity Tool Best For Time
Paper Paper + pen Early concepts, team brainstorming Minutes
Lo-fi wireframe Balsamiq, Whimsical Structure validation, flow testing Hours
Mid-fi Figma wireframes Usability testing, stakeholder alignment Days
Hi-fi Figma, Framer Final design validation, development spec Days-weeks
Code HTML/CSS, React Production-ready, complex interactions Weeks

When to Use Each

  • Paper: When you need to explore 10+ ideas quickly
  • Lo-fi: When testing navigation and flow (not visual design)
  • Mid-fi: When testing usability before investing in visual design
  • Hi-fi: When testing visual design, brand response, and polish
  • Code: When testing complex interactions, animations, or real data

Prototype Testing Rules

  1. Match fidelity to the question you're testing
  2. Use real content (not lorem ipsum)
  3. Build only the paths you're testing (not the whole app)
  4. Let users find their own way (don't guide them)
  5. Prototype the error states and edge cases too

dragoon0x/everything-design-taste/tree/main/skills/prototyping-strategy commit 351e9f62db

Browse category

Frequently asked questions

npx skillmds@latest add dragoon0x/prototyping-strategy