Skip links

Design Process: 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, missing your estimated delivery time and associated costs skyrocketing. None of these outcomes work in your favor.

It is important to know which role each design part plays and how they are different. We will start with wireframes, progress towards the mockup and wrap up with prototyping. This is usually the most common order when building the real thing.

 

Wireframes

Wireframing is the backbone of your design, a skeleton upon which you continue to build and iterate. This is the first visual and its purpose is not to look appealing. Instead, it aims to show potential flaws in the path you are considering.

Wireframes are created after the initial research, storyboarding, client communication etc. You should have a clear idea of what needs to be delivered, 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 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. 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, mockups should ideally be the next step. This stage helps develop ideas to perfection and avoid setbacks in later development stages.

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. It’s primary focus is to show how each element should communicate its function visually.

A mockup is a concrete visual that can be interpreted and criticized, making it a great tool for gathering feedback from your team and other project stakeholders.

 

Prototypes

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

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

This is the most engaging part of the design process. It creates a simulation and the closest representation of the final product without actually building any of it. It’s important to note that many design tools enable reuse of code from the prototype in the final product.

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

 

Conclusion

Most would agree that a prototype is most valued by clients as it’s the closest representation of the final product. Getting there, however, requires insight gathered from prior stages of design. This insight helped define the needs and direction of the product, enabling it to take shape and form.

Honoring all of the discussed stages in our standard design process will help reduce the risk of having to completely scrap a project or needing to rebuild many components because of failure to think of that special use case.

Subscribe Newsletter

Leave a comment