What is the difference between Wireframing and prototyping

Question

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

Answer 1

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

Answer 2

Wireframe - Basically Skelton of interface, something we can compare with our BLUE PRINT Prototyping - Workable dummy out put. combination of wireframe, interaction, scenarios, stories

Answer 3

As I understand, prototype is about behavior and functionality, wireframe is about ordering, positioning and sizing elements (buttons, forms, etc).

Answer 4

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.

Answer 5

In my opinion, a Wireframe is:

• A low-fidelity, conceptual drawing
• Used to explore layout and task flow options
• A fast, iterative visual communication to explore options using general data
• A buy-in tool for stakeholders (designers, clients, developer all agree before coding)
• An annotated set of paths and flows with entry, exit and interruption points
• Can be functional or a general storyboard (Day in the Life)

A Prototype is:

• A built, high fidelity set of functional pages or components
• Contains detailed page components for the task flow
• Is a targeted, usability testable specific user task scenario
• Contains the actual navigation and interactions for eventual coding

In other words, they are different in form and intent.

Answer 6

My take for Web/Application-Development:

Wireframes are static mockups used to present GUI-Elements for different page types or page functions.

Prototypes are the dynamic counterpart of wireframes. "Click dummies" used to present a websites/apps navigational/functional architecture.

Answer 7

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.

Answer 8

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.

Answer 9

Agree that fidelity can be a differentiating factor.

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

Answer 10

You can sketch something on paper and you may call it is a wireframe or prototype. But the difference is what you understanding is a wireframe and what you hold in hand is a prototype.

In short, Wireframe with Prototype as well as Mind and Brain.