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.
mark vernon	February 7, 2009 6:47 AM We have just launched iplotz.com which allows for fast and easy creation of mockups and wireframes for prototyping websites and software applications. If you'd like more details of what we have planned for the future please shoot me an email
Mark O'Brien	February 22, 2009 7:26 PM Spike, no, you're not crazy. Building websites without prototyping, now THAT'S crazy! Best of luck with the site. Mark
Dinos Papoulias	May 7, 2009 11:01 AM JumpChart has a new version with more features...it continues to be great. Its still not at all as complex as Axure software - but still great.
Seo Singapore	June 6, 2009 5:48 AM This is the first time I've heard of grey screen prototyping. This is an awesome practice. You guys are setting the industry standard. Great job!
Jason	July 27, 2009 7:33 PM I must be missing something. It seems like all you are doing is linking gray scale prototypes together. This has been standard industry practice for years. In any event, I think you are missing the point of paper.
Richard	October 10, 2009 1:53 AM Very good video. An out of the topic question - You are not using youtube for your videos and can I know which video hosting provider you use. Thanks in advance.