Mockup

What is Mockup?

A mockup is a static visual design that shows what a website, app, or product will look like when finished. Unlike a wireframe, it includes colors, typography, images, icons, and real copy. However, it is not clickable and has no functionality. The term is also used for visualizing a design in a real-world setting, such as a logo on a business card or a website on a laptop screen. A mockup is the basis for design approval before development.

Why It Matters

A mockup gives the client an accurate picture of the result before development starts. Feedback on colors, layout, or images is handled cheaply in a design tool, not in code. The developer gets a clear brief, which reduces misunderstandings and revisions. Real-world visualizations help with sales, brand presentation, and portfolios. An approved mockup protects both sides from disputes about what was agreed.

Real-World Examples

• 1A homepage design in Figma for client approval.
• 2Desktop and mobile versions of an e-shop product page.
• 3A logo placed on a business card, company car, or product packaging.
• 4A website shown on a laptop and smartphone screen for a portfolio.
• 5A newsletter design before it is coded.