Wireframe vs. Prototype

16 Apr 2008 - 9:20am
6 years ago
12 replies
4098 reads
Adam Connor
2007

A common point of confusion when I've partnered with other
IAs/Interaction Designers/UX Designers, yadda yadda yadda is what a
wireframe is vs. what a prototype is. Everyone seems to have a slightly
different take on them. Here's how I differentiate:

Wireframes - standalone "illustrations" of screens void of graphic
treatment, with indications of functionality and screen flow.
Prototypes - interactive versions of screens with varying levels of
graphic treatment/fidelity. The interactivity of the screens should
mimic the intended functionality of the final product.

So, am I missing something? Are their varying definitions out there for
these two deliverables.

------------------------------------------------------------------------
------------
Adam Connor, CUA
User eXperience Specialist
ISO, Enterprise Services Group
MassMutual Financial Group
Telephone: 413-744-7366
Mailing Address:1295 State Street; MIP E210; Springfield, MA 01111
MassMutual. We'll help you get there.SM
MassMutual Financial Group is a marketing name for Massachusetts Mutual
Life Insurance Company (MassMutual) and its affiliated companies and
sales representatives.

---------------------------------------------------------
This e-mail transmission may contain information that is
proprietary, privileged and/or confidential and is
intended exclusively for the person(s) to whom it is
addressed. Any use, copying, retention or disclosure by
any person other than the intended recipient or the
intended recipient's designees is strictly prohibited. If
you are not the intended recipient or their designee,
please notify the sender immediately by return e-mail and
delete all copies.
---------------------------------------------------------

Comments

16 Apr 2008 - 10:51am
Todd Warfel
2003

On Apr 16, 2008, at 10:20 AM, Connor, Adam wrote:

> [..] Here's how I differentiate:
>
> Wireframes - standalone "illustrations" of screens void of graphic
> treatment, with indications of functionality and screen flow.
> Prototypes - interactive versions of screens with varying levels of
> graphic treatment/fidelity. The interactivity of the screens should
> mimic the intended functionality of the final product.

Just came off this discussion at the IA summit. It's really fuzzy when
you're discussing wireframes vs. a prototype, as in reality prototypes
can be a very broad range of things. However, the one thing the group
I was discussing this with agreed on is that a wireframe doesn't have
to have a sequence of events, or display a sequence of screens. On the
other hand, to be considered a prototype it would need to have some
type of sequence, the ability to move from one state/screen/page to
another, or the ability to simulate moving from one point/state/screen
to another point/state/screen.

For instance, a prototype could be made up of a series of wireframes
that communicate how a customer/user would move through time and/or
space. A wireframe doesn't have that stipulation.

This was the one thing we all agreed on. There was some initial
disagreement as to whether or not prototypes had to be interactive—
half thought yes, half thought no. After we came to the consensus that
prototypes required the ability to show/communicate movement through
time/space, then there was consensus that prototypes could be built of
static screens stitched together w/o having to be truly interactive—
they could fake it.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

16 Apr 2008 - 11:00am
Switzky, Andrew
2007

Todd,

I love your definition of a prototype: A prototype needs to have some
type of sequence, the ability to move from one state/screen/page to
another, or the ability to simulate moving from one point/state/screen
to another point/state/screen.

I would argue that a process flow that described this type of sequence
would be a protope. Perhaps even a narrative describing a sequence would
be a prototype.

The essential core definition of a prototype is that it communicates the
flow through a sequence.

Andy Switzky
Senior Information Architect
Austin Energy - Web/Portal Services
www.austinenergy.com

w: 512.322.6318
f: 512.322.6025

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
Todd Zaki Warfel
Sent: Wednesday, April 16, 2008 10:52 AM
To: Connor, Adam
Cc: discuss at ixda.org
Subject: Re: [IxDA Discuss] Wireframe vs. Prototype

Just came off this discussion at the IA summit. It's really fuzzy when
you're discussing wireframes vs. a prototype, as in reality prototypes
can be a very broad range of things. However, the one thing the group
I was discussing this with agreed on is that a wireframe doesn't have
to have a sequence of events, or display a sequence of screens. On the
other hand, to be considered a prototype it would need to have some
type of sequence, the ability to move from one state/screen/page to
another, or the ability to simulate moving from one point/state/screen
to another point/state/screen.

For instance, a prototype could be made up of a series of wireframes
that communicate how a customer/user would move through time and/or
space. A wireframe doesn't have that stipulation.

This was the one thing we all agreed on. There was some initial
disagreement as to whether or not prototypes had to be interactive-
half thought yes, half thought no. After we came to the consensus that
prototypes required the ability to show/communicate movement through
time/space, then there was consensus that prototypes could be built of
static screens stitched together w/o having to be truly interactive-
they could fake it.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

16 Apr 2008 - 11:02am
Todd Warfel
2003

I would also add to that that it captures to core concept or original
intent and communicates this through a sequence of screens, stages, or
events.

On Apr 16, 2008, at 12:00 PM, Switzky, Andrew wrote:

> The essential core definition of a prototype is that it communicates
> the
> flow through a sequence.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

16 Apr 2008 - 11:17am
Uday Gajendar
2007

Pretty simple to me...

Wireframe: a static skeletal structure of content, drawn to proportion
for your screen

Prototype: a behavioral representation of the final product, at
varying degrees of fidelity (from skeletal to rich)

Hope this helps,

Uday Gajendar
Sr. Interaction Designer
Voice Technology Group
Cisco | San Jose
------------------------------
ugajenda at cisco.com
+1 408 902 2137

On Apr 16, 2008, at 7:20 AM, Connor, Adam wrote:

> A common point of confusion when I've partnered with other
> IAs/Interaction Designers/UX Designers, yadda yadda yadda is what a
> wireframe is vs. what a prototype is. Everyone seems to have a
> slightly
> different take on them. Here's how I differentiate:
>
> Wireframes - standalone "illustrations" of screens void of graphic
> treatment, with indications of functionality and screen flow.
> Prototypes - interactive versions of screens with varying levels of
> graphic treatment/fidelity. The interactivity of the screens should
> mimic the intended functionality of the final product.
>
> So, am I missing something? Are their varying definitions out there
> for
> these two deliverables.
>
> ------------------------------------------------------------------------
> ------------
> Adam Connor, CUA
> User eXperience Specialist
> ISO, Enterprise Services Group
> MassMutual Financial Group
> Telephone: 413-744-7366
> Mailing Address:1295 State Street; MIP E210; Springfield, MA 01111
> MassMutual. We'll help you get there.SM
> MassMutual Financial Group is a marketing name for Massachusetts
> Mutual
> Life Insurance Company (MassMutual) and its affiliated companies and
> sales representatives.
>
>
>
> ---------------------------------------------------------
> This e-mail transmission may contain information that is
> proprietary, privileged and/or confidential and is
> intended exclusively for the person(s) to whom it is
> addressed. Any use, copying, retention or disclosure by
> any person other than the intended recipient or the
> intended recipient's designees is strictly prohibited. If
> you are not the intended recipient or their designee,
> please notify the sender immediately by return e-mail and
> delete all copies.
> ---------------------------------------------------------
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help

16 Apr 2008 - 12:00pm
Andrei Herasimchuk
2004

On Apr 16, 2008, at 9:00 AM, Switzky, Andrew wrote:

> I love your definition of a prototype: A prototype needs to have some
> type of sequence, the ability to move from one state/screen/page to
> another, or the ability to simulate moving from one point/state/screen
> to another point/state/screen.

This is an unsatisfying definition.

Behavior is not reduced to a sequence. To think so is a web page model
of thinking. That mode of operation never was the genesis of
"interaction" in software design. The genesis was always applications,
and more so the early software apps like MS Word and Wordstar back
before graphical interfaces became popular, but even more so once
something like MacPaint and MacWrite hit the market.

Behavior is just that: behavior. It's interactive, however that
expresses itself. Sometimes it a sequence, but in the near future as
technology catches us back up to where we were in the late 1980s, it
won't be sequential at all. Example: How is a modeless palette that
updates and changes based on selection a "sequence" of anything? And
yet, that sort of widget is one of the most interactive things in
desktop software.

Uday's definition is far more appropriate. A prototype is a behavioral
representation of the final product, at varying degrees of fidelity
(from skeletal to rich).

A sequence can work sometimes as a prototype, but more often than not,
it fails at being a very good prototype, and it especially falls down
on learning any truly useful information from it when put in front of
real customers. Unless of course the product is a non-Ajaxified web
site.

--
Andrei Herasimchuk

Principal, Involution Studios
innovating the digital world

e. andrei at involutionstudios.com
c. +1 408 306 6422

16 Apr 2008 - 1:29pm
Dante Murphy
2006

I think this is close, but still not completely on target. I'm reminded of Jeff Hawkins of Palm, who carried around a block of wood in his pocket as a prototype for the first Palm Pilot.

To me, a prototype is a representation of some attribute(s) of your final product that you are evaluating. So, whether it has behavior (like a clickable PDF prototype of a website) or something more basic, like size, weight, or material, it's a prototype.

A wireframe is a description of the product you intend to create. It can be used to evaluate some attributes, but as others have noted, it's not usually very good at this because that is not the true nature of the thing.

Dante

16 Apr 2008 - 6:15pm
.pauric
2006

wireframe: http://tinyurl.com/3ndgy8
prototype: http://tinyurl.com/46trp5
specification: http://tinyurl.com/3mlsk2
documentation: http://tinyurl.com/42p28n

p.rototyper

23 Apr 2008 - 3:21am
Troy Gardner
2008

I develop RIA and games, where I find that webpage methodologies break
down, and use several terms/tools:

Wireframe - a single screen as output by IA's, typically representing
one state at a time, a skeleton to serve as a container for available
copy and for graphic design to flush out as 'Comps'
Storyboard - sequence of wireframes + graphical interaction (mouse
clicks, drags), typically a one way trip through a system, trying to
get buyin from the entire team.
Comps - a single screen as output by graphical designers based on Wireframes.
Interactive Wireframe - aka clickthroughs, wireframes stacked in time,
selectively hiding an showing things, to help flush out the
interactive architecture. As somethings have to be played to be
understood.
Mockup - a high graphic fidelity, but limited in interactivity similar
to a theme park ride. Great fun on the ride, but get a few feet off
the track and the whole thing breaks down.

Statemap/Lifecycle - a heirarchical statechart of all system states
and events between them, frequently having links/thumbnails to various
fidelity comps. Like a subway map it should encompass at varying
levels of detail the entire system of states relevant. I find this
missing in most designs. Screw this up then everything is already
broken. Been compiling a library of common LifeCycles (user
registration, media players), as I find that they are constantly
rediscovered, and getting them right..can be tricky.
Flow - a particular usecase/workflow across the statechart.

Prototypes - a typically technically driven 'spike' to answer a narrow
question if something is feasible or not, or better than another
scenario. Often using whatever is available ducktape, wood, paper +
glue. typically disposable.

23 Apr 2008 - 1:18pm
Troy Gardner
2008

You are correct, anything that isn't building the final release meets
the definition of a prototype. Thus I find it's more practical to
have more specific terms (like mockup) to describe what I expect of a
deliverable, what it does and what it won't do. However in the case
for questions like 'can we sort 10000 items clientside, based on the
dominate color' generally there isn't any other term available, so I
use spike/prototype.

On Wed, Apr 23, 2008 at 8:09 AM, junu <bubble.bling at gmail.com> wrote:
> Aren't wireframes a type of Prototyping? Maybe not in the corporate jargon,
> but certainly from a design process POW. Anything that starts to simulate
> the final product in form, behavior, material/technology is a form of
> prototyping. I guess maybe it's b/c I regard prototyping almost analogous to
> sketching (a la Bill Buxton)...

23 Apr 2008 - 6:14pm
Daniel
2004

I consider a wireframe a type of prototype.

If the type of prototype has active interactive functions I call it
"interactive prototype".

Prototype > Non-Active Functionality > Wireframe
Prototype > Active Functionality > Interactive Prototype

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=28118

24 Apr 2008 - 10:34am
Peter Uchytil
2008

At my company we are building a prototyping tool and we ran into this issue
of wireframe vs. prototype. What we came up with was the notion of the
fidelity of the prototype. A low fidelity prototype would be a straight
wireframe. Adding more functionality like clickable regions, navigation and
css raises the fidelity. Backing a prototype with data to simulate a process
also raises the fidelity.

We found that this was the easiest way to address people's different ideas
of the broad terms wireframe and prototype. One customer might say they want
a prototype and mean just a simple proof-of-concept wireframe. Another might
mean a site that has like 90% of the functionality of a real site with
complete pixel accurate design and functioning Ajax type components. They
are both prototypes. It's just the fidelity that is different.

On Wed, Apr 23, 2008 at 4:14 PM, Daniel <letranova at earthlink.net> wrote:

> I consider a wireframe a type of prototype.
>
> If the type of prototype has active interactive functions I call it
> "interactive prototype".
>
> Prototype > Non-Active Functionality > Wireframe
> Prototype > Active Functionality > Interactive Prototype
>
>
>
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=28118
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

27 Apr 2008 - 7:58am
kimbieler
2007

Troy,

I'm way behind on my IxDA emails and just saw your post of several
days ago.

Do you have any examples of statemap/lifecycle diagrams you can share?
I'm curious as to what these look like and how they work.

Cheers,

On Apr 23, 2008, at 4:21 AM, Troy Gardner wrote:

> I develop RIA and games, where I find that webpage methodologies break
> down, and use several terms/tools:
>
> Wireframe - a single screen as output by IA's, typically representing
> one state at a time, a skeleton to serve as a container for available
> copy and for graphic design to flush out as 'Comps'
> Storyboard - sequence of wireframes + graphical interaction (mouse
> clicks, drags), typically a one way trip through a system, trying to
> get buyin from the entire team.
> Comps - a single screen as output by graphical designers based on
> Wireframes.
> Interactive Wireframe - aka clickthroughs, wireframes stacked in time,
> selectively hiding an showing things, to help flush out the
> interactive architecture. As somethings have to be played to be
> understood.
> Mockup - a high graphic fidelity, but limited in interactivity similar
> to a theme park ride. Great fun on the ride, but get a few feet off
> the track and the whole thing breaks down.
>
> Statemap/Lifecycle - a heirarchical statechart of all system states
> and events between them, frequently having links/thumbnails to various
> fidelity comps. Like a subway map it should encompass at varying
> levels of detail the entire system of states relevant. I find this
> missing in most designs. Screw this up then everything is already
> broken. Been compiling a library of common LifeCycles (user
> registration, media players), as I find that they are constantly
> rediscovered, and getting them right..can be tricky.
> Flow - a particular usecase/workflow across the statechart.
>
> Prototypes - a typically technically driven 'spike' to answer a narrow
> question if something is feasible or not, or better than another
> scenario. Often using whatever is available ducktape, wood, paper +
> glue. typically disposable.
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help

-- Kim

+ + + + + + + + + + + + + + + + + +
Kim Bieler Graphic Design
www.kbgd.com
www.stargazertees.com
c. 240-476-3129
+ + + + + + + + + + + + + + + + + +

Syndicate content Get the feed