If you have ever worked with a developer, you would have heard the above-mentioned statements, or something similar to it. I have seen people scratching their heads and looking puzzled encountering these typically used project status terms, while an app is under development. A lot of engineers, marketers, and even senior managers use different design deliverables synonymously, as they don’t know when to use ‘wireframes’ or when to go with ‘prototype’? They assume that a wireframe, prototype, and mockup are exactly the same thing. It’s no more than a greyish, boxy sketch representative of an ingenious idea, which is definitely not the case.

“The wireframe is ready.”

“We are working on the mockup.”

All the design deliverables are different from each other as they are used to communicate different functions and aspects of the design. They do represent the final product, but the depictions are different.

Process of designing an app

Below-mentioned is a typical development journey. It is essential to follow these steps each time you create a new product.

Sketches > Wireframes > Mockups > Prototype

Start with a simple sketch on a blank piece of paper. Then, make a wireframe that organizes the content and features of your app. For mockup, add colors, icons, pictures, and logos to your wireframes. Add interactive elements into the mockups to inject life in it and come up with the prototype.

1. Sketch

It’s basically just a raw freehand drawing on a piece of paper, that gives you a low-fidelity representation of your app. It is the fastest way to represent your idea and getting ready for brainstorming. Believe me, even a simple sketch can describe your idea better than words. Go freestyle – work on different ideas, change details, visualize what you have on your mind; it’s all up to your imagination. This step is essential for getting to the wireframe stage. The best way to go about it is on a pen and paper.

2. Wireframes

A wireframe is equivalent to the skeleton or simple structure of your website/app. It should clearly show the main group of contents and the placement/structure of the information. It describes the functionality of a product, as in, what will happen when you click a certain button? The decisions on what and where on the website or app (in terms of content/features) are usually made during this stage. Remember, This step does not cover the product’s design.

Wireframes are not just meaningless sets of grey boxes, though they may look exactly like that. They are literally the backbone of your design. It’s a fact that you don’t need to deep dive into too many details, but you need to create a solid representation of the final design that won’t miss out any important piece of it. With a wireframe, you’re designing a roadmap for the whole project and all the stakeholders — developers, copywriters, project managers, etc. A well-created wireframe communicates the design in an easy, clear way and sets a path for the whole team.

Wireframes are typically used as the documentation of the project. Since they are static and simplistic, you could include short notes to explain the interaction, or maybe even technical documentation.

3. Mockup

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. It’s a good practice to never start development before mockups are completed. Add colors, fonts, dummy text, images, logos and anything else that will shape your wireframe. Your result is a static map of the app.

A well-crafted mockup helps you to finalize the product’s color schemes, visual style, typography, etc. A mockup is a playground where you can play with various visual aspects to see what looks best.

Mockups are particularly useful if you want to get early buy-in from stakeholders. Due to their visual nature, mockups don’t have the resistance of the low fidelity deliverables and can be created much quicker than prototypes. They are a good feedback-gatherer which smoothens the development journey.

4. Prototype

A prototype, often confused with a wireframe, is a middle to high fidelity representation of the final product, which simulates user interface interaction. It’s like a mockup enriched with UX pieces, interactions, animation and anything else you’d like to experience when clicking buttons. It should allow the user to experience content and interactions with the interface and test the main interactions in a way similar to the final product.

Prototypes are very useful when performing user testing. It allows you to check the usability of the interface before the development begins. This substantially reduces the development costs until the UI is approved. Once the prototype is tested, the team can start coding. The only thing missing in a prototype is functionality. It can give you a feeling of using a real app, but they are only images connected with each other.

You might find this article useful for creating a better UX Design

Why is it important to know the difference between Wireframes, Mockups and Prototypes?

These design deliverables help you define your expectations, save money on developers and describe clearly what you need to get built. You can confidently pitch to investors, first customers, and co-founders using the appropriate design deliverables. Before you choose a means of communication in the design process you need to consider your product and team; think about what works best for all of you. To know more, have a quick chat with our design experts.