User research and collaboration guide series
Developing and communicating your design
Tools and approaches for developing and communicating your design.
Wireframes
Method: Wireframes
What
A wireframe is a simple (low-fidelity) visual representation of the interface for a product or service.
Why
Wireframes help you communicate design direction and support early usability testing and feasibility discussions.
How to do it
Build preliminary sketches that show structure, placement, and hierarchy for your product. Avoid font choices, color, or other elements that would distract from the structure. Lightweight designs are conceptually easier to reconfigure. Wireframes are usually simple line drawings.
- List what user experience and user interface patterns you will need.
- Review your wireframes with specific user scenarios and personas in mind. Ask, "Can users accomplish their task with the wireframe you are sketching out?"
- Share the wireframes with your team and use their feedback to iterate.
Time required
1 to 3 hours
