Mockup: The Tool That Helps To Sell Your Project
If you are a designer, the most important thing is to achieve a quality product that satisfies the expectations of your client and/or your boss, that communicates positively about you and your work, and that you can proudly include in your personal portfolio. But you should never forget the commercial element involved in every design. You have to know how to “sell” your design, and this means wrapping it in attractive packaging before presenting it, since the presentation of the project is often more important than the project itself.
This wrapping, this packaging prior to production, is called a mockup and it’s a powerful tool for both the designer and the client, as it offers a very visual way of viewing the project within a realistic environment.
To understand exactly what a mockup is, we’re going to take a look at how it differs with respect to other terms with which it is often confused, such as wireframe or prototype.
Mockup, wireframe and prototype.
These three terms are complementary and they’re all relevant when talking about a web project or an application. Depending on the time phase of the project, one or another comes into play. For example, in an initial phase, the ideal approach is to use a wireframe, followed by a mockup and finishing with a prototype, if appropriate.
Wireframe, the skeleton of your design
A wireframe is a schematic and conceptual representation of the project that allows you to visualize the components of the design. It defines, for example, the placement of the menus, the logo, the main call-to-action elements, the hierarchy that the different content groups will have, etc. These are usually represented in grayscale with boxes, circles, lines, blades, false texts…
One of the main functions of the wireframe is to save time and money, and to seek consensus, so it must be quick and simple to produce. Once the wireframe has been approved, you can continue to shape the design in the following steps. The wireframe can be designed in low definition, sketched by hand on paper, in a notebook, or using graphic design software; or in high definition, using a design program or online freemium software such as MockFlow, Mockplus or Axure, among others.
Mockup, the packaging of your design
The mockup goes a step further than the wireframe and aims to offer the client a realistic context. Unlike the wireframe, it works on colors, texts, real fonts, shadows, etc. There are mockups for web projects as well as for projects destined, for example, for printing or retail, and you can download, edit or work with them online.
A web mockup could be considered a representation of a “pixel perfect” final design in a real ecosystem, whether it is for a mobile, tablet, desktop, etc. In short, the mockup is the visual part that is close to the final result of the project.
For the creation of mockups, you can use any graphic design program. However, the most used ones are Sketch, Figma, Adobe XD and Photoshop. In addition, there are many pages on the Internet where you can download resources and adapt them to your design. In Freepik, for example, you can find plenty of resources for your web projects, applications or designs for mobiles
Prototype – a mockup with functionalities
Lastly, the prototype is the most advanced example of the design. In addition to the colors, real fonts and icons, it includes certain functionalities and behaviors in a test environment with the aim of testing and communicating the interactions of your design. It also provides you with data on the user experience in the interaction between elements, buttons, links… Some programs that help with this type of tool are Axure or Adobe XD, which you can use to work easily on the interactivity.
In short, each of these products has a very well-defined function and they are fundamental to the whole creative process. There are multiple tools available to create them and all you need to do is look for the one you feel most comfortable with. Now all you have to do is create them and… sell your product!
