Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.

Wireframe Prototyping Table of Contents [Overview]( overview) [When to Use]( when to use) [Quick Start]( quick start) [Reference Guides]( reference guides) [Best Practices]( 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: Reference Guides Detailed implementations in the references/ directory: Guide Contents [Prototyping Tools & Techniques](references/prototyping tools techniques.md) Prototyping Tools & Techniques [Wireframe Examples](references/wireframe examples.md) Wireframe Examples [Prototype Testing](references/prototype testing.md) 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