What is Mockup?
A mockup is a static design of a web page, the whole website, or an application that has most of final design elements to demonstrate what it will look like when completed, Though it is a full-size model of the design, a mockup does not have the functionality of a live website and usually features placeholder images and text instead of real content. In this sense, a mockup is a mid-fidelity to a high-fidelity representation of the final design.
Mockup Purposes
A mockup is a visualization tool that provides insights into the look and feel of the final design and allows designers to test and experiment with the UI in general and various visual elements combinations.
A mockup can be used for multiple purposes:
- Demonstrate the design to the stakeholders at an early stage of development so that they can make suggestions as to the layout, style, images, etc.
- Allow experimenting with color schemes, fonts, and font sizes
- Implement and test images and videos
- Comply with the accessibility recommendations
- Ensure that every individual page is consistent with the overall website design
- Ensure that the design is consistent with the brand standards
Mockups vs. Wireframes vs. Prototypes
The complete design process covers several stages of delivery of design versions with a different fidelity and level of details:
- A sketch is an initial drawing showing merely the design concept. It can be drawn with just a pen or using a digital tool.
- A wireframe is a low-fidelity design deliverable. It is usually black and white and depicts only basic UI elements. Wireframes can be called a skeleton of the design concept.
- A mockup is the next step in a design project. Unlike a wireframe, it is in color, provides a close-to-real look and is generally more robust.
- A prototype is a high-fidelity, interactive simulation of the final product. It focuses on the interaction between a user and an interface and already offers most of the functionality of a live website or application. It is used to test the usability and functionality of the final product.
Best Practices for Mockup Creation
At present, there are multiple digital tools to create high-quality mockups, from general graphic design software to dedicated solutions that will fit any need and any budget. At the same time, there are several generic tips that will help make better mockups and spare time and resources:
- Reuse wireframes by adding details.
- Start with adding only necessary elements and scale up according to the website dimensions.
- Create several mockups with different design ideas to experiment with UI.
- Style all possible UI elements at this stage, including navigation bars, buttons, sliders, forms and others.
- Avoid using dummy text like Lorem Ipsum, since it will lead to incomplete mockups and blur the users’ perception.
Though producing mockups seems less important than wireframing and prototyping, it gives the stakeholders the necessary opportunity to assess the aesthetic aspect of the future website or application, give early feedback and improve the product faster.
