Wireframe Prototyping

Wireframe Prototyping

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:

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