A wireframe is a low fidelity representation of a design. It should clearly show:
- the main groups of content (what?)
- the structure of information (where?)
- a description and basic visualisation of the user – interface interaction (how?)
A prototype, often confused with a wireframe, is a middle to high fidelity representation of the final product, which simulates user interface interaction. It should allow the user to:
- experience content and interactions with the interface
- test the main interactions in a way similar to the final product
A mockup is a middle to high fidelity, static, design representation. Very often a mockup is a visual design draft, or even the actual visual design. A well created mockup:
- represents the structure of information, visualises the content and demonstrates the basic functionalities in a static way
- encourages people to actually review the visual side of the project
Mockups are often confused with wireframes, due to the names of some software companies.
Related Articles:
https://designmodo.com/wireframing-prototyping-mockuping/
