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