What Is a Mockup?

Key takeaways

A mockup is a visualization or design of an app, web page, or product that illustrates what the final outcome will look like.

• Mockups establish the purpose of a design, often including visual elements such as structure, layout, color schemes, typography, and editorial copy.

• Terminology related to mockups includes wireframes, responsive web design, product design, usability, and user journey maps.

• You can create a mockup to convey the product idea to stakeholders and customers.

Discover more about mockups, including how they contribute to product design while providing a visual representation of the product. If you’re ready to enhance your design skills, enroll in the Google UX Design Professional Certificate. In as little as six months, you can learn about responsive web design, user experience, Figma, usability testing, and more.

What is a mockup in design?

A mockup is a visualization or design of an app, web page, or product that illustrates what the final outcome might look like. In user experience (UX) design, mockups define the purpose and intent of a design, often including visual elements such as structure, layout, color schemes, typography, and editorial copy. 

Mockups are static versions of the design concept, so teams can understand how the product will execute a particular feature. Two closely related terms are wireframe and prototype. A wireframe is the skeleton or initial sketch of a product, while a mockup is more developed. A prototype is one of the final versions of a product developed after the mockup.

What is the main purpose of a mockup design?

While mockups do not highlight a product’s functionality, they serve as lifelike representations. They are primarily designed to communicate a team’s vision for the product to stakeholders and customers.

Learn more about mockups from the UX design experts at Google:

Read more: What Does a UX Designer Do? Key Responsibilities and Skills

Related terms:

• Wireframe

• UX strategy

• Responsive web design

• UI design

• Product designer

• Usability

• User journey map

Discover more with our free resources

Subscribe to our Career Chat newsletter on LinkedIn for industry insights, skill-building tips, and networking opportunities. Then, explore our free UX design resources:

• Watch on YouTube: Exploring In-Demand UX Designer Skills

• Learn industry terminology: Glossary of UX Terms and Definitions

• Advance your career: UX Career Progression: Job Levels & Skills to Advance

Whether you want to develop a new skill, get comfortable with an in-demand technology, or advance your abilities, keep growing with a Coursera Plus subscription. You’ll get access to over 10,000 flexible courses.

Build job-ready skills with Coursera Plus

Start 7-day free trial

• 
• 
• 
• 

Start 7-day free trial