Take the 2-minute tour ×

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

share|improve this question
I think a prototype is an early usable version and a wireframe is a drawing. –  K.. Feb 6 '13 at 12:15

11 Answers 11

up vote 27 down vote accepted

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

share|improve this answer

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

share|improve this answer

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.

share|improve this answer
Good answer, especially the "There is a lot of overlap" part. I find the two concepts becoming harder and harder to see a clear line between. –  DA01 Mar 10 at 16:37

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

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

Your Answer


