Mockup
A high-fidelity static representation of a UI that shows visual design — colors, typography, and layout — without any interactivity.
What it is
A mockup is the next step after a wireframe. It looks like the real product but is a static image or file — nothing is clickable. Mockups are used to communicate and approve the visual design before any code is written. Tools like Figma, Sketch, and Adobe XD are commonly used to create them.
When you would use it
When you need to show what the product will look like visually before building it.
Common operations
- Presenting visual design to stakeholders for approval.
- Exploring color and typography options.
- Handing off to a developer as a design reference.
Related terms
Where this is taught
No learning path uses this term yet. Browse the Learning Atlas for guided sequences through related ideas.