What is Wireframe, Mock Up and Prototype, and where to use?

When you work with developers, you hear the terms wireframe, mockup and prototype often, but you may not exactly understand the terms. It is extremely important to distinguish the terms when you communicate with a development team. For an UX design beginner, or a fresh product owner or anyone interested in product design or architecture, this article may be helpful to understand these terms.

Some common traits are there in the wireframes, prototypes and mockups, all these are very good in representing the final product. However, there is some underlying difference among the wireframe, prototypes and mockup are knowing the fundamental difference may help you to become a better UX designer. The understanding of the differences will help you to define what you want and can save a lot of money for explaining to the developers.



What does wireframe mean?

In simple terms, a wireframe is a low fidelity depiction of a design. It tells about the type of content, about the main information of the content and a description of the basic visualization of the UI design approach. The wireframe is the backbone of a design and it should contain a representation of all important pieces of a final product.

A wireframe is a graphic representation of a website or an app and it acts as a blueprint before construction of a building. It helps to gather useful things together and weave it nicely to get a bigger picture. Since, wireframe is fast to complete and not expensive, it can be a huge advantage to use it. A well-made wireframe can communicate the design in a very clear way and can set a clear road map for the entire team.

When you should use a wireframe?

Documentation of a project is the most typical use of a wireframe. Wireframes are static and it interacts with the interface at an appropriate time. For this reason, there should be written words like short notes explaining the interaction whenever needed. Wireframes can also help to communicate within a team and it is also possible to prepare it quickly to explain to the developers.

Wireframes are seldom used for testing material, though it can help in research where methodological purity is not important. The wireframes that are used for a whole design story can be very effective. It can be indispensable at the initial stage of a project that is complex.



What does Mockup mean? 

A mockup is a static, visual way of design representation of a product. A mockup shows how a product will look like, unlike a wireframe that represents the structure of a product. It is middle to high-fidelity design representation that encourages people to review the visual side of any project.

Mockups can help you to take the final decision regarding the visual style, color scheme, typography of a product. You can experiment with the visual aspect of a product with the mockup, and decide what looks best. You may also ask your potential or existing users for feedback and can make necessary changes easily.

When you should use mockup

Mockups can be very helpful to get early buy-in from the customers. The visual nature of mockup is useful for having no resistance to low-fidelity deliverables. It is also much quicker and easier to create than a prototype.

A mockup can let the UI design maker get good feedback from the users. In the context of the whole story of design, it can be a great chapter of the documentation. With the use of a proper mockup tool, you can make the final decision of product design in a much quicker way than wireframe. 



What does a prototype mean?

A prototype is different from wireframe and it is middle to the high-fidelity depiction of a final product that simulates the UI interaction. Prototypes allow the users to experience the content and the interactions with an interface and to test the principal interactions like a final product. It is meant for simulating the ultimate interaction of the users with an interface.

It does not look the same as the final product, but has a very close resemblance with the final product. The interactions are modeled with a lot of care and have significant similarity to the ultimate experience. In prototypes, the interdependence between the back end mechanisms and the interfaces can be omitted to increase the speed of the development cycles and to reduce cost.

When you should use prototype?

Prototypes often find use in user testing where it can demonstrate its full potential. Such type of simulation of final interaction with users can be great to check the usability of the interface It can help in checking the usability of an interface even before the start of a development process. Though prototypes are not the best for documentation, it can be a very engaging form of UI design process documentation since the interfaces are straightforward and tangible.

Prototype is a very time-consuming and expensive process for communicating a design. Efforts for creating prototypes for reusing for development purposes can help to reduce costs. It can be very helpful for a relatively simple project and when combined with user testing in the right way, it can pay for itself.


Wireframe, Mockup and Prototype, each has got its advantages and you need to decide which one you choose for your product designing process You can also customize your design process with all three forms of representation, and you need to choose that can suit your objective best.

Leave a Reply

Your email address will not be published. Required fields are marked *