What is Mockup?
A detailed, realistic visual representation of what a product will look like, including colours, fonts, and images.
Why It Matters
Mockups give stakeholders and developers a clear picture of the final design before any code is written.
Real-World Example
A pixel-perfect Figma design showing the exact layout, colours, and content of the home page.
“Understanding terms like Mockup matters because it helps you have better conversations with developers and make smarter decisions about your software. You do not need to be technical. You just need to know enough to ask the right questions.”
Related Terms
Wireframe
A simple, low-detail sketch of a page layout showing where elements will be placed without visual design.
Prototype
An early model of a product used to test ideas and gather feedback
User Interface (UI)
The visual elements of a product that users interact with, including buttons, menus, and layouts.
Design System
A collection of reusable components, guidelines, and standards that ensure consistent design across a product.
From definition to deployment
Knowing the term is step one. Using it in something real is the rest.