What is the difference between wireframing and prototyping?

Question

What is the difference between wireframing and prototyping?

Am I right to think that prototypes should be interactive and wireframes should be static?

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

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.

Answer 4

Wireframing and prototyping are exceptionally useful and underused tools in the tech world. Website and app wireframes are useful to determine the layout and overall look and feel of each screen or page. Prototyping is an effective tool for validation and as a way to test your development company.

Wireframing

Wireframing is probably the most well recognized of these three app and website design steps. It is basically a low-tech prototype…extremely low tech. Wireframing is basically a sketch of each page or screen in an app or website. It can be done on something like a poster board, or even just draw it on a whiteboard.

We can also make some digital wireframes too. Digital wireframes are great because they’re easily changeable and are more realistic off the end product. The whole purpose of a wireframe is to outline how each screen of your app will look – where you begin to create layouts and decide on your app’s design.

A wireframe that’s easily changeable means you can test out more wireframes – and even do side-by-side comparisons. Thus, a wireframe website is a useful tool. Of course, a wireframe website or app will need to incorporate storyboarding.

A storyboard is basically where you take a step back from your wireframes. Our wireframe design team uses storyboarding to look at how an app or website will look as a whole. This is how you determine if the flow or your app is logical and clean; basically, you’re examining the overall structural design.

Prototyping

Prototyping is where you can get to validating your idea. It’s basically a proof-of-concept:

• Does your idea work as expected?
• Do the main features contribute to the overall purpose of the app or website?
• Does the flow of the website worked as planned during storyboarding?
• Are the issues (and yes there will be issues – make sure you’re ready for any hurdles that may arise) coming up insurmountable?
• Is it solving the problem you need it to solve? If not, is it solving another problem that you can pivot towards?

A prototype is an essential step in the app development process. Beyond all of the above questions it helps to answer, it allows you to do some preliminary testing. If you build a prototype website, you can allow access to a limited number of people in your target market.

We’ve found that early testing is a brilliant way to make sure that your idea actually helps your target market. More often than not, we’ve seen other development companies build a website for their clients that looks great. But it was only verified by designers – and not by the people who designed it.

An important thing to remember in app and web development (or any enterprise, really) is that you are trying to sell it to yourself, or to developers. You’re trying to sell it to your target market – if you want your app to grow, getting early testing is invaluable; plus if you test it with early adopters, you create a buzz!

Answer 5

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

Answer 6

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 7

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 8

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 9

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 10

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 11

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 12

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.

Answer 13

Wireframes are best for focusing the discussion around the 'form' of the design, whereas prototypes are best for focusing the discussion around the 'function' of the design. Of course, given the amount of overlap in the different tools and methodologies, you'll find that the terms are interchangeable, but regardless of the term, you should understand what it is that you want to present to the audience.

In my opinion wireframes appear to be a less inclusive term, typically used for low-fi and low-tech artifacts and assets, whereas prototypes tend to be more interactive and sophisticated. I guess it is a matter of choosing the best tool for the job that you want to tackle.

Answer 14

Using the physical world, car analogy

Wireframe = form and shape of the car, to visualise what and where, kept static in the showroom

Prototype = a car that can be taken for a test drive ; post which it would go into production

Answer 15

When you intend to design a mobile application or a web application, you will first need a sketch of how each page is going to look like. Only based on business concepts, a designer can define the application flow and a first draft of design, that has a sketch of how it will look like, what buttons will be there, what fields will be there, etc. That is what wireframe is meant for.

Mockups

Mockups are more alive pictures. They are visually more appealing, has colors, fonts, themes, buttons, logo, etc. At this stage labels of the fields, notes, font types, navigation menu, etc. are specified in the design. It is an exact representation of the how the mobile app will look like or web pages will look like.