What Is A Wireframe Mockup

One way to quickly understand the difference between wireframes mockups and prototypes is to compare them visually.

What is a wireframe mockup. A ui kit is a collection of graphics files and resources that can help the designer with the task building. A wireframe is a virtual blueprint of your website landing page or app. As opposed to a wireframe a mockup is either a mid or high fidelity display of design.

Prototypes are high fidelity representations that demonstrate how a user will interact with the new product or feature. This simplistic mockup includes shapes and elements that help determine where the content or interface would go. Wireframes are basic black and white renderings that focus on what the new product or feature will do.

If a wireframe is considered as the blueprint of a building a mockup is similar to a real life building model. Mockups are static yet realistic renderings of what a product or feature will look like and how it will be used. Don t confuse wireframes with mockups or prototypes.

Wireframes are all about planning and outlining the structure. Any mockup will provide a medium fidelity representation. A mockup is a static wireframe with much more ui and visual details.

Your result is a static map of the app. A mockup typically includes additional visual details such as. 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.

But still a mockup is not clickable just like the wireframe. A good way to think of it is that a wireframe is a blueprint and a mockup is a visual model. As such you can re arrange the elements as needed or as recommended by other designers before you make a better prototype.