WIREFRAME VS MOCKUP VS PROTOTYPE

Your design process should look something like this, if not exactly in the order from the title.

All three parts are highly important when starting up a new project. Leave one out, and you risk having a bad final product or missing your estimated delivery time and associated costs skyrocketing. None of these outcomes work in your favor.

To realise the importance of having these tools at your belt, you should know which role each one plays and how they are different.

We will start with wireframing, progress towards the mockup and wrap up with prototyping. You will see that this order is usually the most common one when you are building the real thing.

Wireframing

Wireframing is the backbone of your design, a skeleton upon which you continue to build and iterate.

It is the first visual created and its purpose is not to look appealing but to show potential flaws in the path you are considering.

Wireframes are created after the initial research, storyboarding, client communication etc., after which you have a clear idea of what you actually need to deliver and accomplish and before you even think about how it should look on the screen.

Everything that you learned from that first stage of the design/building process will be presented in the wireframes.

You can make a wireframe with a pen & paper, digitally - using available tools, and you are probably creating one in your mind while thinking about how something should work and interact with the user.

You should probably not spend too much time on the aesthetics of wireframes, as their main advantage is being able to hop between new iterations really quickly.

Mockups

Although you can start building a prototype immediately after the wireframe stage - in order to really develop those ideas to perfection and avoid setbacks in later development stages, we will mention mockups first as they, in most cases will be the next choice after wireframes.

Mockups are usually referred to as mid-fidelity representations of the design.

You start tinkering with mockups once you have established a clear idea with your wireframes in the previous step.

The point of a mockup is to clearly communicate the visual aspect of the design approach.

Mockups are static and do not show any kind of interaction. A mockup primarily focuses on how each element should communicate its function visually.

This is a good way to gather feedback from your team and other project stakeholders because mockups are a concrete visual that can be interpreted and criticised.

Prototyping

Prototyping is a mid to high-fidelity representation of your design with a focus on the interaction part of the interface. Prototyping aims to reduce the unnecessary cost of development, reduce mistakes and identify flaws in the general flow of the interface. It is a great tool for user testing and getting a quick grasp of how the product is supposed to function.

In this stage you incorporate feedback gathered from wireframe and mockup stages and further build on the concept.

Prototyping is the most engaging part of the design process as it creates a simulation and the closest representation of the final product without actually building any of it. Important to note is that many of today's ever expanding tools enable reuse of code from the prototype in the final product.

A prototype can range from a low-fidelity one where you easily show transitions between states to a high-fidelity one which is more extensive and shows every possible interaction along with animations, for a more immersive experience.

Conclusion

Most would agree that the prototyping stage is most valued by clients as it is the closest representation of the final product. However, in order to get there we had to focus on the prior stages. It is the prior stages that defined the needs and direction of the product and enabled it to take shape and form.

In order to reduce the risk of having to completely scrap a project or having to rebuild many components because of a failure to think of that special use case, we should always look to honor all of the above discussed stages in our standard design process.