What is a Mockup?

A mockup is a design or model at real scale or size that is made digitally in presentations, demonstrations or promotions, and is used to give our clients a clearer and more realistic vision of how the final product will be.

When we work on a certain design and it is time to introduce the project, it should have some impact on the client. To do this, we must present the design in a more elaborate way, showing the professionalism expected by the other party and being able to clearly visualise how the final project would look like.

Difference between Mockup and Wireframe

Wireframes are the first representation of a design's structure. At the same time, the main elements are also represented, but at a rather basic level. This means we know what kind of elements will be placed, but there is not yet an approximation of the visual aspect of the project.

Mockups are a static visual representation, they are made based on the dimensions and organization previously established in the wireframe, but unlike this, a mockup already has a greater sense for the client because it is more visual. All elements such as text, icons and images are visible.

What is and why using a Mockup?

This tool is very useful to give the client a more approximate idea of how their design would look in different formats: print, web pages, vinyl, signs, posters, etc. This way, we make sure both we and the client that the image of the product works and that we like how the final design will look.

The use of Mockups is very common in agencies because of the advantages they offer:

• Add value to designs
• Materialize ideas and bring them to live
• They generate trust by enabling a tangible experience
• Saves printing and assembly costs

What types are there?

Retail

This mockup shows how the final physical products would look in the retail business. This involves from the shop itself, T-shirts, bags, etc. When it comes to a preview for items, this is called "product mockup".

Business Cards

Business cards are the first impression the customer gets when getting to know our brand through an event or any face-to-face event. Therefore, it is very important to know the different techniques that can be used to make them stand out, whether by holographic printing, rough textures or embossing techniques.

Billboards

The fundamental basis of this type of mockup is to see it in the environment to identify if all its components are correctly displayed and read at different distances. The most common types of billboards are posters.

Web

It should be clarified that some identify the mockup as a prototype, which is not exactly real on the web, since the interaction that can be done with one of these models is minimal. That's why they are known as low fidelity prototypes or paper prototypes.

Apps

In the case of mobile applications, the mockup app can be understood as the prototype. Thanks to this tool, the different screens that will make up the mobile app can be created in order to have a visual version of the final product.