What is mockup?

A mockup is a static, visual representation of a product-usually a website, app, or piece of software-that shows what the final design will look like. It’s like a detailed picture or a paper model that includes colors, fonts, images, and layout, but it doesn’t have any interactive functionality.

Let's break it down

  • Visual only: Unlike a prototype, a mockup doesn’t let you click or test features; it’s just a picture.
  • High‑fidelity: It’s usually polished and close to the final look, with real graphics and typography.
  • Static: No code runs behind it; you can’t type into fields or navigate between screens.
  • Created with design tools: Tools like Sketch, Figma, Adobe XD, or Photoshop are commonly used.

Why does it matter?

Mockups help designers, developers, and stakeholders see exactly how a product will appear before any code is written. This early visual check saves time and money by catching design issues, aligning expectations, and providing a clear reference for developers.

Where is it used?

  • Web design: Showing the layout of a homepage, product page, or dashboard.
  • Mobile app design: Displaying screens for iOS or Android apps.
  • Software UI: Illustrating windows, menus, and dialogs for desktop applications.
  • Marketing materials: Creating realistic screenshots for presentations, pitches, or promotional content.

Good things about it

  • Clear communication: Everyone can see the same visual, reducing misunderstandings.
  • Early feedback: Stakeholders can comment on look and feel before development starts.
  • Design refinement: Easy to tweak colors, spacing, and typography without touching code.
  • Reference for developers: Provides a concrete guide for building the final product.

Not-so-good things

  • No interactivity: Users can’t test how things work, so usability issues may be missed.
  • Can be time‑consuming: High‑fidelity mockups require detailed design work.
  • May give a false sense of completion: Seeing a polished image might hide underlying technical challenges.
  • Limited to visual aspects: Doesn’t address performance, accessibility, or functional constraints.