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
- 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.
HOW
- 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.
<aside>
💡 Tools for building wireframes are Figma Wireframe Templates, OmniGraffle, Balsamiq.
</aside>
Example:
![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3219d5a5-e3ff-46f0-84fa-30a230888ee8/mytunez-large.jpg](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3219d5a5-e3ff-46f0-84fa-30a230888ee8/mytunez-large.jpg)
Readability and Word Count
![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4d144c44-6da9-4317-ac42-ba2ec972278d/Untitled.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4d144c44-6da9-4317-ac42-ba2ec972278d/Untitled.png)