Wireframes v. Mockups – What’s the Difference?

In the simplest definition, a wireframe is a blueprint or draft of your website design, often in black and white, sometimes hand-drawn. It is often a really simple sketch that demonstrates what sort of things you can do in your design. For example, a wireframe of a website will show the navigation, the main buttons, the columns, the placing of different elements, etc.

A mockup takes the wireframe to the next level. It is a more realistic visual preview and further shows overall appearance aspects of a design, including type and color choices, images, etc. In essence, wireframes are the skeleton designs most often used to create mockups. Note that neither are typically in any programmable form but rather are meant to serve as blueprints for the development of the user interface/prototype once client approval has been given. Having either a wireframe or a mockup is essential to making sure that all stakeholders are on the same page and agree on what is going to be built.

My Process

In most cases, I begin sketching out ideas on paper. While clearly of lower fidelity, sketches are quick, cheap and easy to revise while going through the initial feedback stages with my clients. I then use the sketches to develop either a wireframe or mockup (usually one or the other depending on budget) and not until I receive final client feedback and approval do I begin the prototype.



Cost, Time and Other Factors Considered

Almost all the projects I work on have time and cost limits that determine whether I create a more basic wireframe or a higher fidelity mockup. Mockups (and prototypes) take much longer to create and are more expensive than static wireframes. If a wireframe is good enough to give the client enough of a vision of the final product to pass approval, I will put the time and money that would go into making a more dynamic mockup into the actual development of the website.

Wireframes are also sufficient when the user interface (UI) will be fairly basic, such as limited to simple links, buttons and menus. However mockups act as a more informative mechanism if the UI is more complex, such as when the design includes animation, non-standard interactions or more complicated navigational choices. Interactive mockups can also be more useful for demonstrating responsive designs as clients can actually see how the site transitions between different screen sizes.

Lastly, I’ve found mockups really help my clients that lack technological sophistication as it offers a very visual representation. However, on the flip side, some clients can get too bogged down in the details when the mockup is meant to only communicate broader ideas, such as navigation, page layouts, etc.

In Conclusion

Hopefully some of the points above have clarified the difference between sketches, wireframes and mockups. Everyone has their own preferences and budgets. My biggest recommendation is to create what is needed for the client to approve a design that will prevent the need for major revisions after development has begun.