Definition:
Mockup is a detailed visual representation of how a product, interface, graphic asset or medium is expected to look before it is produced or developed. It commonly includes colors, typography, imagery, composition and approximate dimensions to communicate the intended appearance.
A mockup may show a single screen, several application views, packaging, a publication, a logo applied to different materials or a product placed in a realistic context. It does not have to be a photomontage or a PSD file. It also does not demonstrate how the product will work or represent the final result on its own.
Table of contents
What a mockup represents
The level of detail depends on the decision the mockup needs to support. Some mockups present a clean composition on a neutral background, while others simulate the context of use through photography, rendering or a three-dimensional scene. Common elements include:
- Composition: the arrangement, proportions, spacing and visual hierarchy of the components.
- Visual identity: colors, typography, icons, logos and other branding resources.
- Sample content: text, images and data that are representative enough to assess the design.
- States and variants: versions for different screens, formats, sizes or situations of use.
- Application context: the physical or digital medium on which the design will appear, such as a phone, package, poster or garment.
Visual fidelity may be medium or high, but a realistic finish does not make the mockup a functional product or guarantee that all its details are final.
Types of mockups
Mockups can be classified according to the object they represent:
- Interface mockups: show websites, applications, dashboards or screen flows with their intended appearance.
- Identity and graphic asset mockups: apply logos, colors and layouts to cards, stationery, signage or publications.
- Packaging and editorial mockups: represent packages, labels, covers, pages or printed materials.
- Physical product mockups: present the shape, finish or external appearance of an object through illustration, photography or 3D models.
- Campaign and format mockups: adapt creative work to advertisements, social media, screens and other touchpoints to review its consistency.
In digital projects, one design may require several views to reflect responsive design, but those views remain representations rather than tests of actual behavior.
Wireframe, mockup and prototype differences
These resources may be used within the same process, but they answer different questions:
- Wireframe: mainly represents structure, hierarchy and the approximate position of elements. The wireframe entry explains this concept in more detail.
- Mockup: defines the visual appearance, sample content and states that need to be reviewed.
- Prototype: simulates some or all interactions, flows or behaviors so that they can be tested. It may have low or high fidelity.
- Final product: includes implementation, final content, technical constraints and the checks required for actual use.
A mockup can be incorporated into a prototype or used as the basis for one, but a static image should not be presented as evidence of functionality.
How to create and review a mockup
The process varies according to the medium and project stage. A common sequence includes these steps:
- Define the objective: specify the decision it should support, the intended audience and the required views.
- Gather the materials: start from the brief, content, visual identity and, when available, the approved wireframe.
- Choose the fidelity: determine which details need to be realistic and which ones can remain provisional.
- Build the composition: apply components, styles, images and content consistently across the views.
- Place the design in context: use a device, physical medium or scene only when it helps assess the actual application.
- Review and iterate: collect feedback, check variants and document changes before delivery or implementation.
A mockup can be created with interface design, image editing, illustration, presentation or 3D modeling tools. The working format should allow the necessary elements to be modified; no single program or file type is required.
What a mockup is for and its limitations
A mockup helps teams share a visual proposal, compare alternatives, identify inconsistencies, prepare a presentation and agree on criteria before investing in production or development. It can also support communication between design, content, marketing and technical teams within a Design Thinking process.
It should nevertheless be interpreted with the following limitations:
- It does not validate usability: an attractive composition does not prove that people understand or complete the intended tasks; this requires UX research and testing.
- It does not test interaction: transitions, system responses, errors and flows require a prototype or functional implementation.
- It does not guarantee feasibility: materials, costs, performance and technical constraints may require design changes.
- It does not replace specifications: dimensions, components, content and states need to be documented to prevent misinterpretation during production.
- It does not ensure commercial results: a realistic presentation may improve understanding, but it does not guarantee approval, conversion or performance.