DIFFERENTIATING BETWEEN A SKETCH, MOCKUP, WIREFRAME AND PROTOTYPE

Often in the development of products and / or applications, the mistake is to unify or treat the concept of Sketch’s, Mock ups, Wire frames and Prototypes, or to use them as synonyms.The definition and use of these are widely differentiated within the design stage of a project and this is why today we want to explain a little more some differences and key concepts between the mentioned elements.

They not only show conceptual differences, but also budgetary differences, since building one or the other influences the number of hours of development / design and thus associated costs.Although in theory they sound and at first glance they seem the same there are important differences based on the different stages in which these must be applied for the development of a project.

Sketch

It is a low quality static sketch of a design.

A sketch in theory is a quick drawing or sketch of a general guide that does not have to have many details and reproduces a concept, idea, or generality of a project in a very simple way. Generally it is done by hand with pencil and eraser for its ease at the time of shaping a base or starting point.

The deliverable is an image, or a paper.

Wireframe

It is a static representation in low quality of a design.

In this representation are defined for easy understanding:

– What? The main content groups
– where? The structure of information
– how?  The user’s basic description and visualization – interface interaction

Wireframes are not just a set of gray squares, although they may look exactly like this. Consider Wireframes as the backbone of your design where you will have a representation of every major part of the final product.

The deliverable is an image.

Mockup

Static representation of a medium or high quality design

– Represents the structure of the information, visualizes the content and demonstrates the basic functionalities in a static way
– It allows to review the real visual part of the project

The deliverable is an image.

Prototype

Representation navigable of the final product. The quality can vary between medium and high.

It simulates user interface interaction and should allow the user to:

– Experiment interacting with the interface and content of the project.
– Test the main interactions in a similar way to the final product.

The deliverable is an HTML, PPT, Animation or navigable format.

Remember that if you need help developing your products in Otherwise we offer the mocking, wire framing and prototyping service with the experience and quality necessary to take your projects to the highest level.

 


Leave a Reply