Wireframe Prototyping
Table of Contents
Overview
Wireframes and prototypes bridge the gap between ideas and implementation, enabling teams to test concepts, get feedback, and refine designs before costly development.
When to Use
- Early concept validation
- Stakeholder alignment
- User testing and feedback
- Developer handoff
- Feature exploration
- UX problem-solving
- Rapid iteration
Quick Start
Minimal working example:
Wireframe Principles:
Low Fidelity (Sketches):
Tools: Paper, whiteboard, Balsamiq
Time: 30 minutes - 2 hours
Detail: Basic layout, no colors/fonts
Best For: Brainstorming, exploration
Cost: Free
Medium Fidelity:
Tools: Figma, Sketch, Adobe XD
Time: 2-8 hours
Detail: Layout, content, basic interaction
Best For: Team alignment, feedback
Cost: Low
High Fidelity:
Tools: Figma, Framer, web dev tools
Time: 8+ hours
Detail: Visual design, interactions, animations
Best For: Developer handoff, user testing
Cost: Medium
---
## Wireframe Components
// ... (see reference guides for full implementation)Reference Guides
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Prototyping Tools & Techniques | Prototyping Tools & Techniques |
| Wireframe Examples | Wireframe Examples |
| Prototype Testing | Prototype Testing |
Best Practices
✅ DO
- Start with low-fidelity sketches
- Get feedback early and often
- Test with real users
- Iterate based on feedback
- Use consistent grids and spacing
- Document interaction flows
- Include edge cases (empty states, errors)
- Create mobile-first wireframes
- Share prototypes for collaboration
- Keep wireframes simple and focused
❌ DON'T
- Jump directly to high-fidelity
- Over-design before validation
- Ignore mobile/responsive needs
- Create wireframes without user input
- Leave interactions undefined
- Make wireframes too detailed
- Test only with team members
- Ignore accessibility
- Lock into designs too early
- Create unrealistic user flows