Phase: Solution Definition
Time Required: 1-3 hours
A stripped-down visual representation of key elements on an app/website/product in development.
- The wireframe is a reference point for functional specifications
- Wireframes can be vetted by stakeholders
- Reduces risk by allowing revisions at an early stage, ensuring that design time is well spent later on.
- Lets us ask early questions about feasibility and structure.
- Use IA and Paper Wireframe that show structure, placement, and hierarchy for your product.
- Steer clear of font choices, color, or other elements that would distract. Lightweight designs are conceptually easier to reconfigure.
- Start listing what UX/UI Design patterns you will need → http://ui-patterns.com/patterns
- Review your wireframes with specific user scenarios and personas in mind. Can users accomplish their task with the wireframe you are sketching out?
- Use the wireframes to get the dev team’s feedback on feasibility and structure.
Tools for building wireframes are Figma Wireframe Templates, OmniGraffle, Balsamiq.
Readability and Word Count