How We Prototype

By Eric Holter, December 2007

1 | 2 | 3 | 4 >>

How We Prototype

»	How We Prototype
2.	Website Structure
3.	Website Content
4.	Website Functionality

We kicked off our 2007 newsletters with "Why We Prototype." It was a short re-telling of how we stumbled upon our grayscreen prototyping process. The longer version is recounted in our book, Client vs. Developer Wars.

We'll finish the year off with the subject of prototyping again--but this time we'll talk about how we prototype. We've also produced a ten minute video demonstration of our prototyping process.

This ten minute video shows our process of grayscreen prototyping.
To embed this video on your site copy and paste this code:

Our January newsletter was the story of how we discovered our grayscreen prototyping process. We learned the hard way that paper-based sitemaps and wireframes are not effective for communicating the subtleties of a website's structure, content and functionality. Paper leaves too much up to the imagination. Websites are non-linear, complex objects. They can't be reduced to linear, simplified, paper documents. And what's worse, paper-bound specifications leave both clients and developers under the illusion that they have effectively communicated. In reality, all they've done is produce a document whose meaning can later be argued about when the final results fail to match un-communicated expectations. Paper allows assumptions and misunderstandings to creep in. We lived this web development horror show from 1995 through 2000. But then we discovered grayscreen prototyping.

A grayscreen prototype is very much like a detailed paper-based wireframe, except that a grayscreen prototype is not presented on paper, it's presented online, in a browser, where it can be clicked and experienced as a website. This subtle difference captures insights and understanding in ways that paper documents can't produce.

My previous newsletter, and our book, go into the details about why grayscreen prototypes make such a difference. So I won't cover that ground again. Instead I'll focus on how we go about building prototypes, our process, our thinking, and our execution.

F.A.Q.

Let me answer a frequently asked question at the outset. Many web developers and designers follow this newsletter. So whenever I talk about prototyping they often ask what software we use to build them. We built a custom prototyping system using the NewfangledCMS, for our internal use. However, the principles for grayscreen prototyping are in no way dependent on our software. You can use a WYSIWYG tool like Dreamweaver, or any other CMS to build a grayscreen prototype. I have been told there are a couple software developers that have made tools for prototyping. Jumpchart and Intuitect are the two I've heard of. I have not used them but if anyone has, please use the comments below to let us know about your experience. Likewise, if you know of other systems let us all know via the comments.

The goal of a grayscreen prototype is to thoroughly represent the structure, content and functionality of a website. next >

1 | 2 | 3 | 4 >>

Comments

C. Dinos Papoulias - Weekend Webbie	March 1, 2008 12:41 AM Hello - about JumpChart: it's great. It's simple, easy to use. Not many options right since it was just launched, but I've used it on several projects and it's worked well for simple stuff. I hope they add more features in the future...'cause I'd like to use it for more. Untuitect is nice but it's software and I can't have my clients "login" and click. JumpChart is also relatively cheap!
Concerned Web User	March 21, 2008 5:14 PM Just a heads up - that's not GREEK! It's Latin, but the narrator of the video referred to it as Greek.
Eric Holter	April 1, 2008 5:10 PM Thanks, Concerned Web User. But why "Lorem ipsum" is referred to ask "greeking" is one of the mysteries of the universe. http://en.wikipedia.org/wiki/Lorem_ipsum.