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
While I feel quite confident with HTML and CSS, it seems to take a bit of
pain to use Dreamweaver for wireframing, perhaps because it tends to force
you into detail too early, when you are still on the "vision" stage of the
process, and feel like a WYSIWYG tool would be more appropriate.
On the other hand, wireframing in the WYSIWYG way entirely without HTML also
feels wrong, because first, the target medium is Web so it's closer to the
reality to think in HTML, and second, HTML is a powerful and expressive
language, and quite a mature one.
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.
All drawing and diagramming tools that we use to create wireframes are based
on shapes or widgets. You drag a widget from a palette and drop it onto the
page, then set its position and size with mouse. The operation is easier if
the editor supports snapping to the grid and guides.
I wonder however if this is the optimal way of drawing wireframes, because
it doesn't account for their peculiarities, namely:
* Content rectangles never overlap each other but cover the entire page
* Content rectangles are mostly aligned in columns and rows, i.e.
I was reading that transcript that Gabriel pointed to earlier today: (link:
here is the last question's answer:
"Coop[er]: Bad idea. Prototypes are software. I believe that there's a role
for prototypes in interaction design, but I believe it's a very small and
limited role. It's primarily done as a narrative, not as software. The risk
of doing interaction design in a medium of code is much greater than the
benefits yield for you.
Any recommendations on GUI prototyping tools specially for desktop
application prototyping. I could find a good list at http://c2.com/cgi/wiki?GuiPrototypingTools and am looking at any feedback
on the ones listed or maybe a new tool not listed there but somebody has
used and strongly recommends.
The need is to capture the paper prototypes into higher fidelity prototypes
that can be tested and reviewed before getting commited for actually coding.
> Paper! ... Good for drafting out, materialising and visualising the > ideas I have > in mind, before moving on the the standards like Visio, Omni Graffe
Paper is not a prototyping tool. It's a design tool. It's a sketching
tool. It's a way to get ideas directly from one's brain into the
world with as little information loss as possible. But it's not a
After having the foresight to co-author the book "Information
Architecture for the World Wide Web" in 1998, Peter is looking
forward again to understand how we'll reconcile the timeless
principles of design and organization with new transmedia models
of interaction, co-creation, tagging, and user participation.
His article "Information Architecture 3.0"  drew heated
reactions, and soon he'll bring these ideas to New York in a
workshop  to examine how integrating product developmen
So, this whole discussion about making clickable wireframes got me
thinking about something. As I'm working through my book,
interviewing a number of people from different backgrounds, I've come
across 5 different types, or purposes perhaps, for prototype:
1. As a common communication platform–using them to get everyone on
the same page, avoiding misinterpretation of ideas, using them as a
method to show and tell.