What’s what: Wireframe | Mockup | Prototype
Designing user interfaces and experience is hardly a one time task. Rather it is a multilevel, and often iterative process.
If you are new to the design scene you’ve probably heard the words wireframes, mockups and prototypes being used interchangeably, which can be very confusing at first.
However, while they are all related, each of these terms is the embodiment of a different stage of the design process.
“Confusing wireframes with prototypes is like assuming an architectural blueprint and a display house, are the same thing.”
What is a wireframe?
This is the product of the initial stage of the design process. It is a low-fidelity representation of your product.
Think of it as a clean sketch comprising lines and shapes that outline the layout of your product.
It is the initial visual representation of the design.
Wireframes typically do not go into much detail: the key is to a properly designed wireframe is to keep it simple.
What is a mockup?
On the other hand, a mockup is a step up from the wireframe. It is a high-fidelity visual representation of the product. It incorporates seemingly realistic looking components.
It fleshes out the structure defined by the wireframes. The colors and sizes of components on a mockup are more or less what will be in the final design.
It provides developers, and the client, with an early view of what the site is expected to look like, visually, once complete.
The mockup while visually close to the expected product is static.
What is a prototype?
This is the final stage of design and the last step to development.
A prototype is interactive to simulate the functionalities of the product. This is very important when testing the experience of the product: checking whether there is seamless flow from start to finish.
Prototypes detect any possible challenges that may impede a user from getting the best experience using your product. Thus it saves a lot of time and effort, and cost, that would have been the result of poor design.
Here is a diagrammatic representation of the flow of the design process. The further along the design process, the higher the fidelity expected.
