Wireframes & prototypes ... what's the difference?

Posted:
2 Dec 2020
Author:
Approx read time:
3 Mins
sigmund-_dJCBtdUu74-unsplash

So, wireframes and prototypes ... do you know the difference?

At Minted Box, we love keeping our clients in the loop with all the tech jargon! This week we have a short article, getting you up to date and in the know when it comes to wireframes and prototypes.

So what are wireframes?

Wireframes are a simplified representation of what will become your website, system or application. Its name derives from the idea that the designs look like wires on paper. Wireframes do not include colour or design as it mainly focuses on the functionality of the site.


Benefits


  • User experience focused
  • Focus on function helps to identify approprate hierachy for information
  • Simplifies communication
  • Establishes a blueprint for layout

Wireframes are an important part of the initial process as they help to limit unnecessary costs. They also expose risks or issues that could come up during further development.

visual-design-pl9DrjAMV6I-unsplash

So, what is a prototype?

A prototype is a more visual, colourful and style focused representation of your website, system or application; they can be made on paper or digitally using design software. Think of them as a simulation of what your product is going to do, they’re meant to look as close as possible to the final outcome without needing a line of code. They can also be used early on for user-testing and provide the spec for a real working system.


Benefits


  • A prototype can demonstrate more detail than a wireframe
  • Saves money by helping to reduce unnecessary production costs
  • Gives you a great idea of what the final result will look like and edits can be made efficiently
alvaro-reyes-qWwpHwip31M-unsplash

They're both vital to the design process ...

When working on a project with us here at Minted Box, we'll provide wireframes and prototypes throughout the design phase in order to get the functionality and style of your website exactly as you'd like. 


We hope this article has helped to break down what our industry means when we refer to wireframes and prototypes, and just how useful they can be during a web-based project.


We'd love to hear if there are any other key terms you'd like us to clarify? Just get in touch!