Phase: Solution Definition

Time Required: 1-3 hours

WHAT

A stripped-down visual representation of key elements on an app/website/product in development.

WHY

1. The wireframe is a reference point for functional specifications
2. Wireframes can be vetted by stakeholders
3. Reduces risk by allowing revisions at an early stage, ensuring that design time is well spent later on.
4. Lets us ask early questions about feasibility and structure.

HOW

1. Use IA and Paper Wireframe that show structure, placement, and hierarchy for your product.
2. Steer clear of font choices, color, or other elements that would distract. Lightweight designs are conceptually easier to reconfigure.
3. Start listing what UX/UI Design patterns you will need → http://ui-patterns.com/patterns
4. Review your wireframes with specific user scenarios and personas in mind. Can users accomplish their task with the wireframe you are sketching out?
5. Use the wireframes to get the dev team’s feedback on feasibility and structure.

<aside> 💡 Tools for building wireframes are Figma Wireframe Templates, OmniGraffle, Balsamiq.

</aside>

Example:

Readability and Word Count