A design of high quality, a graphical representation of the app’s functionality, is something that distinguishes your software among competitors, and it’s something that will persuade them to use exactly your product. And if you are just at the beginning of your software project, the design stage will introduce to you such terms as wireframe, prototype, and mockup.
The terms “wireframe” and “prototype” and “mock-ups” are often used confused – possibly due to convenience or misunderstanding – but it’s important to know what sets these three terms apart and how you benefit from each because sometimes your project will only need a wireframe, sometimes it will require a prototype while at times you would just need a mock-up.
We can also mention sketch here, which is the easiest to distinguish, often handdrawn, reflecting the main ideas and giving an initial understanding of how the software is supposed to look.
WIREFRAME:
A wireframe is a low fidelity representation of a design. Its the least detailed representation of the three. Basically it’s the foundation stone of your design. It should clearly show:
– the main groups of content that will be there on each screen
– the structure of information
– a description and basic visualisation of the user – interface interaction (as how the user will navigate the application)
Wireframes are not just meaningless sets of grey boxes, though they may look exactly like that. We must consider them as the backbone of our design and remember that wireframes should contain a representation of every important piece of the final product.
Wireframes should be created quickly and almost the whole time should be spent communicating with team members and…thinking. Visualisation should be aesthetic, but this is vastly simplified. Depending on the needs of a project, a wireframe may evolve from simple gray boxes identifying page real estate to including basic graphics or actual text so that designers and developers can gain a better feel for how everything fits together. Having a wireframe of your future product is good for visualizing objectives for developers. A wireframe helps avoid misunderstandings between you and them.
When to use wireframes?
Wireframes are typically used as the documentation of the project. Since they are static and fix interaction with an interface at a specific point in time, they should be accompanied by the written word. However they might be also used in a less formal way. Since they are quick and simple in form, they serve well as clear sketches for inner communication in the team. If developers ask how something should be done – the answer can be provided as a rapidly created wireframe.
PROTOTYPE:
A prototype is a product that is designed and built to test a new design. The prototype is used to correct mistakes and make [the design] more user friendly. It is a fully functional working model of a final product. 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
It takes much more time to create a dynamic, clickable prototype than a static wireframe for obvious reasons. A prototype shows not only the content, but the general usability of an application. This simulation of interactions looks close to the final design, and can be user-tested to make sure that the software has high usability – that’s one of their biggest practical advantages. A prototype might not look exactly like the final product, but should be vastly similar. Interactions should be modelled with care and have a significant resemblance to the final experience. Interdependence between the interface and backend mechanisms is often omitted to reduce costs and speed up development cycles.
In the most basic sense, a low-fidelity prototype is often referred to as a “clickable” or “functional” wireframe. This is when one navigates between linked wireframe pages to understand how they are connected.
When to use a prototype?
Prototypes are used to their full potential in user testing. Such a simulation of the final interactions forms great material to check the usability of the interface, before the development actually begins.
But prototyping is rather an expensive and time-consuming form of design communication. It’s rather best creating prototypes that can be reused in development.
MOCK-UP
A mockup is very close to the real visualization of an application, with static representation of its functionality, it allows users to fully see and assess the design. Very often a mockup is a visual design draft, or even the actual visual design. A well created mockup:
– represents the structure of information, visualizes 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. Mock-ups are based on the wireframe that the client approved. They represent the way a real app looks and feels like, with all the colors, graphics, typography – that’s why they are easy to perceive and evaluate.
When to use a mock-up?
Mockups are particularly useful if you want to get early buy-in from a stakeholder. They are a good feedback-gatherer and, if placed in the context of the whole design story, can form a great chapter of documentation.
