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.
Learn More at buildDay Melbourne
Want to understand these concepts hands-on? Join our one-day workshop and build a real web application from scratch.
Related Terms
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.
Wireframe
A simple, low-detail sketch of a page layout showing where elements will be placed without visual design.
Design System
A collection of reusable components, guidelines, and standards that ensure consistent design across a product.
Product-Market Fit
The point where your product satisfies a strong market demand and customers actively want it.
Lean Startup
A methodology for building businesses by rapidly testing ideas with real customers and iterating based on feedback.