Wireframe: what goes where
A wireframe is a plan of a screen drawn with boxes and lines, no colour, no images. Title here, list there, button at the bottom. It can be a sketch on paper or grey boxes in Figma.
The point is to keep the conversation on content and layout. With no colour on the page, nobody argues about whether the button should be blue; everyone asks whether it belongs there at all. Teams use wireframes at the very start to try lots of ideas in a few hours.
Mockup: what it will look like
A mockup is the design finished, with its colours, type and images. The word is used in two ways and both are right.
Inside a design team it often means a high-fidelity design: the final look of a screen that you can't click.
In marketing it means that finished screen shown on a real device or in a real setting. Put an app screen inside an iPhone or a website on a MacBook and that's the mockup people mean. It's also what Mockup Center makes.
Prototype: how it will work
A prototype links screens together so you can click through them. Tap a button and the next screen opens; a menu slides in. Teams build one before writing code, to watch real people use the app.
Figma, ProtoPie and similar tools are the usual choice. Some teams prototype directly in code.
When each one is used
A typical project goes in this order:
- Wireframes settle the layout and the team agrees.
- The designer makes mockups, the finished screens.
- The mockups are linked into a prototype and tested with users.
- When the app is ready to launch, the screens go into device mockups: App Store images, a launch video, the website.
The last step is the one people forget, and it's usually rushed. It's also where users meet the app for the first time.
In one line each
A wireframe answers "where?", a mockup answers "what will it look like?" and a prototype answers "how will it work?".
