A mockup is a visual representation of a product, website or app that presents the final design in a realistic way. Unlike an interactive prototype, a mockup is static and serves as a design preview in the conception phase.
Mockups are used in product development, web design and marketing to convey ideas vividly. They range from simple sketches to detailed digital designs to photo-realistic representations and make it possible to make design decisions early on before a product is finally implemented.
Function in the design and development process
Mockups visualize design ideas, enable early feedback from stakeholders and teams, avoid misunderstandings through clear visual communication, and help make changes cost-effectively.
Types of Mockups
- Low-Fi (Low-Fi) MockupsSimple sketches or wireframes for rough structuring.
- High-Fidelity (Hi-Fi) MockupsDetailed digital designs with colors, typography and icons.
- Interactive MockupsVisual designs with limited interaction possibilities, for example for usability tests.
- Print mockups: Display of print products such as business cards or brochures.
- Product mockupsPackaging, promotional products or merchandise in a realistic environment.
- Web and App MockupsUser interfaces for websites and mobile applications.
- Social media mockupsPreview ads or posts on platforms such as Instagram or Facebook.
Preparation process
Typically, the creation of a mockup follows a research and analysis phase (target group, competition), initial drafts (wireframes or low-fiber mockups), the actual design (hi-fi mockups), feedback rounds and finally the finalization for development or printing. Common tools include Adobe XD, Sketch, Figma, InVision, Canva and Photoshop.
Use in marketing
In marketing, mockups serve primarily to present advertising materials and campaigns – for example, in product presentations, the preview of social media ads, the presentation of packaging or in customer communication.