Okay, I've heard lots of words around here that I think we all have
different meanings to us personally. The one that seems to be currently
messing up a few of us in one thread is the word "prototype", so let's start
To me, a prototype is a scaled down model of what you want things to look
like. I think what's messing us up the most is that it's too general of a
term and could be used to describe just about anything we do at any point.
I'll break down some of the terminology I use with the client and you can
agree or disagree from there. The goal of this thread is to get some clarity
when we're talking about this stuff and to prevent future arguments on
At the beginning of a project, when I'm starting to put the business
requirements to design, I prefer the term "wireframe". I'm sure most of you
know what this term means, and those of you who don't, you can probably pick
up what it means -- a wireframe is a line drawing of a page or application
layout. I sometimes describe wireframes as the page or application
"blueprint". Another metaphor that I've used for wireframes or wireframe
documentation is "the skeleton" -- the bare bones of the application or site
Anyway, you can use pencil and paper for wireframing or a vector-based
design tool like Visio or Illustrator. I prefer Visio because I have a huge
selection of stencil templates for page and application elements and
behavior. Color isn't used yet (although, I sometimes use blue to denote
links, buttons and "hot" areas like linked images, etc.) mainly because I
don't want the client to get distracted with the visual design yet. Someone
on the prototype tools thread used the metaphor of color as "the prism in
the classroom" -- something that dazzles, but usually distracts. My
wireframes spec out every dropdown, every drag-n-drop menu, link location,
etc... -- all page or application behavior as reflected in the business
requirements. Then, I go into a review cycle with the client and make
adjustments as necessary.
Once the general layout is figured out, I can then move to the color
version, or visual design, of the site -- what I sometimes call the "skin".
These I create using a mix of Illustrator and Photoshop and are pixel
perfect... with a few caveats here and there, of course. I usually create 3
to 5 versions, all as stylistically different as possible, so the client has
a well-rounded selection. Since we're not also deciding upon the page or
application behavior or general layout, the client doesn't usually need more
than 3 design compositions. Then, I go into another review cycle with the
client, adjusting and redesigning as necessary.
When the visual design and wireframe documentation is finished, I have
occasionally used the term "prototype" with the client. Prototype, like I
stated earlier, is a scaled down version of what things will look like. The
prototype, in this case, is the final visual design and the final wireframe
Once that is decided upon, I start on the CSS and HTML templates for the
developers, while they start figuring out how to code the "muscle" to get my
skeleton and skin moving.
Heh, okay, sorry for the long-winded definition or explanation of
"prototype", but I thought describing my process would also help with the
definition... or maybe I just like writing about this stuff. ;-) You decide.
Oh -- just thought of this -- does IxDA have a wiki? Using a wiki, we can
hammer out some of these definitions in a public format... just an idea.