When designing websites and mobile applications, both the functional and aesthetic requirements of the client are fundamental, and mockups are commonly used to bring them to reality. Formerly known as a mockup, is a resource that serves to put ideas into practice by simulating the final product. Through a mockup you will be able to create prototypes, evaluate designs, colors and typographies, see the user’s path in a web service and its functionality prior to the final design.
What is a mockup for?
- The mockup allows you to visualize and contextualize your design to see if your product works as you intended and to present it to the customer.
- Mockups facilitate designer-client communicationthrough the feedback that the latter provides and improve the experience of using your digital product, as they point out how you can perfect the design.
- The use of this tool allows you to reduce costs, since thanks to several tests before starting production, you will be sure that your final product will be of excellent quality and will be in line with the customer’s requirements.
- In addition, these prototypes allow you to enrich your professional portfolioand show your audience and potential clients what experience you have from previous projects.
When to use a mockup?
Creating a mockup is one of the primary steps in design thinking. Prepare the mockup when you think your app or website is ready to be tested (initial mockup) or when it is complete, prior to its release (final mockup).
What types of mockups are there?
The types of mockups are divided according to the phases your project is in.
Exploration phase:
- Behavior: Focuses on how the specific function of a web page or application acts; For example, it allows you to see how the “Forgot Password” button will work when you log in to the app.
- Structure: Explore aspects related to the design: you can visualize the combination of color palettes, the typography of the buttons, etc.
Evolution and result phase:
- Exploration: This prototype is discarded once it serves its purpose. You can use it, for example, to test various color palettes in a mobile app.
- Evolution: The mockup gradually evolves into the final version.