The new Handcraft is here!

More on the difference between wireframing and prototyping

Last year we wrote about how wireframing and prototyping aren’t the same thing. A few weeks ago, I gave a talk at UX Brighton about the difference as well. We decided it basically comes down to this: wireframing is about communicating structure early on, prototyping is about the user experience.

Over at User Experience StackExchange, Jitendra Vyas asks the same question:

What is the difference between Wireframing and prototyping? Prototype should be interactive and Wire-frame Static? Am i right?

And Roger Attrill of ThinkUI provides a great answer:

If you are considering an application or a website, and you look at the page level for example, a wireframe and a prototype are superficially the same things, from a physical perspective. They can both be low or high fidelity, on paper or digital medium. The wireframe may be a template for many pages or a may be a unique page or screen. It is a page schematic.

Once you look at the bigger picture and how multiple screens or pages connect together, and start considering the navigation between them and the less tangible aspects of usability and interaction then you are linking wireframes (plural) together to make a prototype. The prototype is a demonstrable system.

“A demonstrable system” is a great way to explain that prototypes are something that can be experienced. Great wording here.

The prototype can stillĀ be a single page or screen, but it embodies more of a sense of engagement rather than purely of visual appearance.

Talking about “a sense of engagement” also further underlines the idea that representing an experience is a key focus of prototypes. While we argue that HTML is the best platform for this, Roger’s approach suggests that any kind of interactivity is the differentiator here. Which, I guess, can be argued. He continues by talking about the difference in mindset:

So In my opinion where it differs is theĀ mindset with which you approach the schematics:

Are you thinking more along the lines of ‘How does it look?‘ or ‘What information and features are presented?‘ (wireframe).

Or are you thinking ‘How do I interact with this?‘ or ‘How will it be used?‘ (prototype).

Focusing on mindset in terms of what problem you’re trying to solve is a great way to outline the difference between wireframing and prototyping. If you look at tools in the market this way, it also quickly becomes clear which are great wireframing tools and which are clearly meant for prototyping.

See more answers to the question at UX StackExchange itself: What is the difference between wireframing and prototyping. Perhaps you can contribute your own answer?

No Comments

Ping RSS

Be the first to respond!

Leave a reply