Output
An interactive prototype that demonstrates various interface elements (buttons, forms, menus etc.) of a web page or application.
Outcomes
A prototype that can be used to test your assumptions and gather feedback. It can be very quickly updated or changed in order to re-test.
Use when
- You’re beginning to flesh out your design concept.
- You need to conduct user testing.
Wireframes are not
- Supposed to include everything or look like a finished product. They are only used for drafting and testing.
- A design mock-up – A wireframe is only intended to test how the interface elements work, not how they will look.
Tips
There are many digital tools available to create wireframes that simulate the experience of using a website, app or software. Common tools are Sketch, Figma and Omnigraffle.
Key terminology
Clickable prototype: Clickable prototypes are essentially high-fidelity wireframes that can be ‘clicked’ as if they were a live site.
Updated