What's The Difference Between A Wireframe And A Prototype?

Wireframe and prototype are terms that are sometimes hard to differentiate in the world of design. The confusion often exists even in the eyes of designers. However, wireframes and prototypes are quite different and bring distinctive value to the process.

They are separate tools which should be used in different stages of product development.

Now we’re going to look a bit closer to methods and benefits that each bring. After reading this, you should be able to spot what’s what once and for all.

Wireframe

Your first sketch – the first step that you take in every project – is the wireframe. While creating it, you’re trying to figure out the layout and how to organize the site or the app. Small details, such as how does the button looks on hover, are not subject to wireframe.

There are different types of wireframes, too. Lo-fi wireframes are usually done on a piece of paper and are the first step to every project.

They’re simple, cheap and done in matter of minutes. The approach enables multiple iterations during only a day or two, which is great for agile development.

Sometimes it’s good to create high fidelity wireframes, which might include colours or typography.

This is recommendable on bigger projects where there is a need to cover more details early on.

Plus, they help communicate functionalities to developers and prepare all the necessary content.

The end user never sees the wireframe. This is important, because the next one will be all about that.

Prototype

Think of a prototype as a test mule. It includes real graphics and content. It’s main purpose is to be demonstrated to the user – to receive precious feedback, which will later be used for the final product. The feedback is usually collected through usability research.

To test usability and the UX, the prototype already needs to have a high degree of interactivity. The rule says that the less the user has to imagine, the better the feedback.
Bear in mind, however, that a prototype is not an MVP. It accelerates the development of an MVP, but it never meets the market itself. It’s there to be stuffed with ideas which might or might not make it to the end.

In Blue Factory, we’re very happy with InVision as a tool which brings our designs to life, making them interactive.

But there are other choices, such as Justinmind, Marvel or Axure, too – just to name a few. Whichever you choose, it’s important to know how to use their full potential and to commit to a single solution, in order to optimize the learning curve.

A Part Of A Website Prototype With Hotspots

Finally, the ideal path for your process would be to sketch a wireframe first and identify key results first.

Then you may switch to static design, and bring it to life with a chosen prototyping tool. After testing and working on iterations of a prototype, you may switch to developing the MVP.

Now that you’ve learned all about it, it might be time to test your knowledge by taking this quiz.