Mockup Vs Wireframe

Mockups are static yet realistic renderings of what a product or feature will look like and how it will be used.

Mockup vs wireframe. A wireframe is created before a mockup and a mockup builds upon the wireframe. To understand the difference between a wireframe and a mockup it s best to start at where each falls in the design process. Wireframes are basic black and white renderings that focus on what the new product or feature will do.

Prototypes are high fidelity representations that demonstrate how a user will interact with the new product or feature. If a wireframe is considered as the blueprint of a building a mockup is similar to a real life building model. A mockup is a color representation of your site.

A good way to think of it is that a wireframe is a blueprint and a mockup is a visual model. You can use it to roughly arrange the blocks show their interconnection and decide what pages you need on your site. While wireframes are design placeholders mockups are built to give the viewer a more realistic impression of how the end product will look.

A mockup is a static wireframe with much more ui and visual details. It gives viewers a more realistic impression of how the final website app will look like so it is good for communicating discussing collaborating and iterating projects with your team members at a later design stage. A mockup is the next more in depth iteration of the wireframe outline.

Unlike wireframe mockups provide visual details such as colors and typography. It s commonly compared to drawing a blueprint in the building design process. What is a wireframe.

A mockup is a static wireframe that includes more stylistic and visual ui details to present a realistic model of what the final page or application will look like.