Wireframing, Prototyping, Mockuping – What’s the Difference?

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/