Mockup

A static visual representation of a design, often used for websites or apps.

What is a Mockup?

A mockup is a static, visual representation of a design, typically a website or app interface. It showcases the layout, visual hierarchy, and aesthetics of the final product without being interactive.

Example: For example, a website mockup would display the arrangement of elements like the header, navigation bar, content sections, images, and footer, giving a clear idea of the website's appearance.

Usage: Mockups are used throughout the design process for presentations, client feedback, and development handoffs. They ensure everyone is aligned on the design direction and help identify potential issues before moving to more advanced stages.

Wireframe vs Mockup

Wireframes are basic layouts that show structure, while mockups add visual styles and elements to represent the final design.

Mockup vs Prototype

Prototypes are interactive mockups that simulate user experience and functionality.

Mood Board vs Mockup

Mood boards convey the overall style and feel through images and colors, while mockups focus on the layout and structure of a specific design.

Realted Terms

Wireframe: A basic visual representation of a design's layout and structure, often created with simple shapes and lines.

Prototype: A dynamic representation of a design that simulates user interactions and functionalities.

Mood Board: A collection of images, colors, and textures that convey the overall style and feel of a design.

Style Guide: A detailed guide that outlines the design specifications of a website or app, including typography, colors, and spacing.

Usability Testing: The process of testing a design with users to gather feedback and identify areas for improvement.

Mockup FAQs

What industries use mockups?

Mockups are used in various fields, including web design, app development, product design, and even architecture. They help visualize and communicate design ideas to clients and stakeholders before moving into development.

Do I need special software to make a mockup?

While design software is helpful for creating mockups, you can sketch them by hand or use basic image editing tools. The key is to visually represent the design layout and elements.

How detailed should a mockup be?

The level of detail depends on the project's needs. For initial presentations, low-fidelity mockups may suffice, while high-fidelity mockups are more appropriate for client approvals and development handoffs.

What is the benefit of sharing a mockup?

Sharing mockups allows for early feedback and can prevent costly revisions later in the design process. They help identify potential usability issues and ensure alignment between designers and stakeholders.

Should I use an online tool or design software to create mockups?

The choice depends on your needs and preferences. Online tools offer collaboration features, while design software provides more control and customization options.