11 Answers
11

I'm sure different people will have different views on how much or how little wireframes and prototypes overlap. What follows is how I approach the two:

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.

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.

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).

Of course prototypes frequently refer to physical products, (again where the user engages with the product) whereas wireframes are typically for a screen based interaction, but I'm assuming the question is based on the difference relating to websites and software

A wire frame is used to capture requirements, share ideas and to begin to outline the specification and structure. They can be limited to single page diagrams, or more commonly now - a full site. They are akin to blueprints. They can be offline diagrams or more often now, created in a dedicated piece of wire-framing software. A wire-frame is part of the PLANNING process.

A prototype is working or simulated version of some or all of the site and is used for getting feedback - a prototype is part of the TESTING process. They may be used to get early client or customer feedback, to test interface concepts and/or they may be used to test planned layout's ability to work well in a responsive way. It's becoming common to combine a wire-framing process with 'rapid prototyping' of key features and responsive layouts to do early testing.

Just my view of course...

There is a lot of overlap, with many wire-framing applications referring to the HTML pages they output as 'prototypes' and some agencies using the terms 'wire-frames', 'schematics' and 'prototypes' in an interchangeable way. There is no hard rule.

Roger makes a great point that there is a different mindset with which you approach a wireframe or a prototype.

Prototype describes a broad concept, and can be used to describe many artefacts between early low-fidelity sketches and an high-fidelity almost-finished final product. A prototype doesn't need to be interactive, but can be. A prototype doesn't need to be digital, but can also be for a physical product. In a prototype the focus can be on any combination of many different properties, including but not limited to form, function, the product concept, esthetics, visuals, materials. In my opinion the main value of prototypes is that they help answer questions (what will the product do? is this idea that I have technologically possible? does this lay-out get the message across?).

A wireframe is (just) an artefact that serves as a schematic visual description of the intended lay-out.

If your wireframes include page after page of detailed, frame-by-frame interaction descriptions for individual components, you might be ready for prototyping.

If you are spending more time making your prototyping software produce great looking printouts than you are on modeling interactions, you are probably going to be just fine with wireframng that particular project.

My team is currently using Axure to split the difference - clickable, interactive-intensive prototypes that can also be printed and used as wireframes. The trick is capturing the necessary information at each level of granularity in the same artifact...

They are ways to describe interaction ideation at different levels of fidelity. In general, wireframes tend to lean lower-fidelity and prototypes higher-fidelity. But they're definitely fuzzy terms and vary in definition from UX team to UX team.

My very quick answer would be fidelity. Wireframe generally lower fi, prototype higher.
Although there is a lot more to it: Wireframes attempt to address early functional design elements, prototypes put some of the elements from the wireframes into practice.