The new Handcraft is here!

Wireframing is not prototyping

When you look around the web for prototyping software, you find a lot of wireframing apps pretending to be prototyping tools. There’s a difference between the two, though.

Good old trusted Wikipedia defines website wireframes as follows:

“A website wireframe is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages.”

– http://en.wikipedia.org/wiki/Website_wireframe

Visual guide is right. Wireframing is self-descriptive; it’s about visualising the outline of the page by placing components and UI elements on a canvas and determining how they should be positioned. There can be a lot of work involved here in terms of sizing, weight, colour and order. When you build a wireframe, you’re thinking visually.

Prototyping, on the other hand, gets the following summary:

“The conventional purpose of a prototype is to allow users of the software to evaluate developers’ proposals for the design of the eventual product by actually trying them out”

– http://en.wikipedia.org/wiki/Software_prototyping

This quote talks about behaviour, not visuals. Software prototyping is about evaluation, testing, verification, and function. It’s something different from wireframing.

You might think we’re being a tad Captain Obvious here, but it’s actually surprising how the language is being misused at the moment. Building a wireframing app is a great, noble goal. It solves a problem, serves a purpose, and helps people figure out how their layouts should look and feel. But prototyping occupies a grey area in-between visual design and software development. You can’t just create something with which to make wireframes, add the ability to click through pages, include export-to-HTML support, and call it prototyping. That’s putting lipstick on a pig.

10 Comments

Ping RSS

  • Of course you can do that. As you quoted, you make a prototype for evaluating a design. A wireframe is a design which can be evaluated. If you use it for that purpose, it’s a prototype.

    A prototype doesn’t even have to be interactive. There’s a famous story about Palm’s designers walking around poking a wooden brick to prototype the Palm Pilot. (http://www.cdf.org/issue_journal/beyond_techno_gadget.html) Because the designers were pretending that the piece of wood was a PDA, it was a prototype.

    In the realm of web design, wireframe tools often have features to add some crude interactivity. This is useless for the visual end result, but very useful if you’re going to evaluate the wireframes as a prototype, which is far from uncommon.

    By the way, all this was clear to me only after I read the “Interaction Design” book (http://id-book.com). It’s very complete and well structured, so you can easily decide what’s relevant for you. I can highly recommend it.

    by Ben Lenarts • May 25th 2010 • 19:05

  • You’re only quoting part of wikipedia’s definition, though. You’re missing the part “by actually trying them out”. You can’t try out a wireframe, and because you can’t, it’s not an effective prototype. It’s just a wireframe.

    There’s nothing wrong with wireframes, but we need to be clear in our language so that we can separate the two. Right now, the prototyping space is cluttered with apps that focus on wireframing and have a little prototyping support here and there, yet they call themselves prototyping tools. There are few apps that actually support prototyping first and wireframing second.

    Thanks for the book tip, I’ll check it out!

    by Rahul • May 25th 2010 • 20:05

  • You can try out wireframes, it’s called paper prototyping.

    Wireframing is not equal to prototyping, wireframing is a form of prototyping.

    And as I tried to point out: everything can be a prototype. You can argue that a paper with some labels and buttons drawn on it is only a crude prototype, but whether it is a prototype at all is just a matter of perspective.

    by Ben Lenarts • May 26th 2010 • 12:05

  • If we’d consider the paper wireframe versus prototype statement within the field of domestic home appliances such as a juicer, the difference becomes much more obvious.

    If I was CEO at Philips and I ask my team to show me a prototype of this brilliant juicer I hear so much about, I’d sure as hell fire them all if they dare fax me the paper drawings.

    Sure, we can argue about semantics as the two overlap to some degree, but potential users of either a wireframe or prototype app would benefit from the app builders being clear in their definitions.

    If it’s a wireframe app, call it that.
    If it’s a prototype app, call it that.

    The reason their definitions differ is because they serve a different purpose.

    And why not link to eachother? Now there’s something that we are indeed planning to do, because both types of app work great together.

    When you enter a jeansstore looking for ribbed pants, you don’t want them to sell you a pair of jeans as “ribbed pants”, you want them to direct you accross the street where you can find the pants you’re looking for.

    by Martin • May 28th 2010 • 09:05

  • [...] 2, 2010 by akantos Leave a Comment Quplog’s post talks something interesting about what I’m dealing with these days. Loads of new application [...]

    Pingback

    by Wireframing is not prototyping « Eduardo Xavier • Jun 2nd 2010 • 07:06

  • [...] [...]

    Pingback

    by Test Driving the Quplo Preview « The Public Void • Jun 18th 2010 • 03:06

  • [...] Wireframing is Not Prototyping A very short article on the differences between wireframing and prototyping. [...]

    Pingback

    by 35 Excellent Wireframing Resources - Noupe Design Blog • Oct 5th 2010 • 14:10

  • [...] Wireframing is Not Prototyping A very short article on the differences between wireframing and prototyping. [...]

    Pingback

    by User Solutions – 35 Excellent Wireframing Resources • Oct 5th 2010 • 15:10

  • [...] 20. Wireframing is Not Prototyping [...]

    Pingback

    by Wireframe Tools and Tutorials To Speed Up Your Web Design Process — tripwire magazine • Nov 8th 2010 • 07:11

  • [...] 20. Wireframing is Not Prototyping [...]

    Pingback

    by Wireframe Tools and Tutorials To Speed Up Your Web Design Process | Psd tutorials • Nov 16th 2010 • 22:11

  • Leave a reply