The differences between wireframe, prototype, and mockup easily get confused by many people. A wireframe is mostly about functionality. It can be a really simple sketch that demonstrates what kind of things you can do in your design. A mockup is a realistic representation of what the final product will look like, in this case a website.
Wireframes
When you intend to design a mobile application or a web application, you will first need to do a sketch of how each page is going to look like. Only based on business concepts, a designer can define the application flow and the first draft of design. Which will be a sketch of how it will look like, what buttons will be there, fields and so forth. That is what wireframes are intended to be used for.
A wireframe is a low fidelity representation of a design. It should clearly show :
- The main groups of content.
- The structure of information.
- A description and basic visualization of the user – interface interaction.
Mockups
Mockups are considered live pictures. They are visually more appealing, have colors, fonts, themes, buttons, logo and so forth. At this stage labels of the fields, notes, font types, navigation menu are all specified in the design. It is an exact representation of the how the mobile app will look like or web pages will look like.
- A mockup is a middle-to-high fidelity, static, design representation.
- Represents the structure of information, visualizes the content and demonstrates the basic functionalities in a static way.
- Encourages people to actually review the visual side of the project.