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

wireframe-prototyping

Wireframe Prototyping

Table of Contents

Overview

When to Use