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

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