A mockup is a static representation of a product, showing users and stakeholders how it may look and be used. It contains elements such as the typography, logos, images, color schemes, and navigation visuals that will make up the final design and user experience — as well as ergonomics, where necessary.
Mockups are used to present medium to high fidelity versions of a design during the product development process. They demonstrate a realistic layout to decision-makers and allow teams to determine which aspects of the product work well from a user’s perspective, and which do not.
The various phases of the product development lifecycle are subject to varying levels of design complexity. Although there can be some crossover with other methods, mockups are just one of the ways to illustrate a product concept.
Earlier in the cycle, a simple sketch may be employed to brainstorm ideas. A wireframe is commonly used as a bare-bones structure of a digital product, to demonstrate the basic purpose and layout in black and white.
If an idea is ready to progress through the design process, it may move from a mockup to a prototype. This offers an interactive simulation of the design and functionality of the product as a real, tangible experience — closer to the end product, but still with scope for improvement.