Wireframing, Prototyping, Mockinguping – What’s the Difference http://designmodo.com/wireframing-prototyping-mockuping/
1. What is a wireframe? “REPRESENTATION”
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?)
Wireframes should be used for documentation of a project.
1. What is a prototype?
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
Prototypes should be used for user testing. Create prototypes that can be reused in development!
1. What is a mockup?
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
Use to get early buy in from a stakeholder.