“A mock-up shows how it looks. A prototype shows how it works.”
While the distinctions of each phase are clearly defined, even seasoned designers sometimes confuse the names of the different phases.
Perhaps the most common mix-up comes with wireframes and mock-ups.
There’s no doubt that wireframes and mock-ups are similar: they both are static phases of UI design, they both deal primarily with how the site looks, and they both don’t require functionality. The main difference is in their quality. I’d describe the mock-up as
the “decorated” version of a wireframe.
While wireframes are merely shapes and placeholders, mock-ups are designed to give the viewer an accurate impression of what the final product will look like.
