Table of Contents
- Overview
- When to Use
- Quick Start
- Reference Guides
- Best Practices
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