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.