Mockup
A static, high-fidelity picture of a screen or product, with its final color, type, images and content, that shows how it will look before it is built.
What it’s for
It lets you see and agree on the final look before coding, while changing a color or an image still costs little.
Key elements
Looks, not structure
It starts from a structure already agreed on, for example in a wireframe, and focuses on how it looks.
High visual fidelity, no interaction
It looks finished, but you can’t use it; to test use, you need a prototype.
Built from the system’s parts
If there is a design system, it is assembled from its components and styles instead of inventing new ones.
How it’s done
Start from the structure already agreed on in the wireframe.
Apply color, type and images with real or very realistic text and images.
Review it with the team and, if use needs testing, link it into a prototype.
Applications in design
When to use it
When the structure is already agreed on and you need to decide and present the visual look.
Avoid
Making the mockup before the structure is settled; the conversation will drift to colors.
Don’t fall for it
Looking finished doesn’t mean it works; test it with people before calling it done.
Connections
Authors and works
- 1996
Jim Rudd, Ken Stern and Scott Isensee
Compared low- and high-fidelity representations, with their advantages and limits.
- 2002
Jesse James Garrett
Placed visual design on the surface plane, above the skeleton where screens are defined.
- 2007
Bill Buxton
Distinguished the sketch, which suggests and explores, from the prototype, which makes things concrete and is put to the test.
Sources
Original sources
- Rudd, J., Stern, K., & Isensee, S. (1996). Low vs. high-fidelity prototyping debate. interactions, 3(1), 76–85.
- Garrett, J. J. (2002). The elements of user experience: User-centered design for the web. New Riders.
- Buxton, B. (2007). Sketching user experiences: Getting the design right and the right design. Morgan Kaufmann.
Last reviewed: