Wireframe Prototyping

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

Medium Fidelity:
- Tools: Figma, Sketch, Adobe XD
- Time: 2-8 hours
- Detail: Layout, content, basic interaction
- Best For: Team alignment, feedback

High Fidelity:
- Tools: Figma, Framer, web dev tools
- Time: 8+ hours
- Detail: Visual design, interactions, animations
- Best For: Developer handoff, user 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

Reference Tools

• Prototyping Tools & Techniques
• Wireframe Examples
• Prototype Testing