Newfangled works with independent agencies to create lead development web platforms for their clients.

Newfangled works with independent agencies to create lead development web platforms for their clients.

How We Prototype

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.

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.


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.


Jacqueline | January 29, 2011 3:43 PM
How much do you charge to build a website? I have a good idea, I'm familiar with building a website, but I need a little direction.

Thank you.

PS: Your article was very informative.

↑ top