Design visualization and feedback tool for early-stage UI validation before development.

Covers three fidelity levels: low-fidelity sketches (30 min–2 hrs, brainstorming), medium-fidelity layouts (2–8 hrs, team alignment), and high-fidelity prototypes (8+ hrs, developer handoff)
Recommended tools span Balsamiq and whiteboards for sketches, Figma/Sketch/Adobe XD for medium fidelity, and Figma/Framer for interactive prototypes
Best practices emphasize early user testing, mobile-first design, consistent spacing, documented interaction flows, and iterative refinement based on feedback
Includes guidance on edge cases, accessibility considerations, and avoiding premature high-fidelity design before validation

Wireframe Prototyping

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

wireframe-prototyping