Wireframes Vs Mockup

In short a wireframe is a low fidelity minimalist approach to a design concept.

Wireframes vs mockup. 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. If a wireframe is considered as the blueprint of a building a mockup is similar to a real life building model. Prototypes are high fidelity representations that demonstrate how a user will interact with the new product or feature.

If you have been in user interface user experience design long enough you most definitely have come across the terms wireframes and mockups. While wireframes are design placeholders mockups are built to give the viewer a more realistic impression of how the end product will look. Unlike wireframe mockups provide visual details such as colors and typography.

Mockups are higher fidelity and include color real language and true icons. What is a wireframe. Wireframes are basic black and white renderings that focus on what the new product or feature will do.

To understand the difference between a wireframe and a mockup it s best to start at where each falls in the design process. Mockups vs wireframes a wireframe is a draft for a schematic representation of your future website. Mockups communicate the visual design aspects that wireframes don t.

Mockups are static yet realistic renderings of what a product or feature will look like and how it will be used. A good way to think of it is that a wireframe is a blueprint and a mockup is a visual model. They give you a sense of what the design will look like pixel for pixel before it s brought to life.

One way to quickly understand the difference between wireframes mockups and prototypes is to compare them visually. A mockup is the next more in depth iteration of the wireframe outline. It focuses on the core layout and features a new page will have but leaves all the flash to the mockup.