The Strategic Web Designer: Creating a Website Prototype

Editor’s note: This article on prototyping for web design is excerpted from The Strategic Web Designer by HOW Books author and 2013 HOW Interactive Design Conference speaker Christopher Butler.

Website prototyping is just one of the many relevant interactive topics being explored by the best in the biz at this year’s HOW Interactive Design Conference. If you haven’t registered, it isn’t too late to get the early bird discount–extended until midnight tonight!

Website Prototyping

Prototyping involves the creation of an interactive experience that effectively communicates the structure, information and functionality of a website in a way that enables the remaining steps in the process, specifically design and development, to proceed without the possibility of emerging on the other side with contradictory results. Essentially, prototyping means building a model of the website before you build the actual website. Of course, from a developmental standpoint, a prototype isn’t actually built in the same way that a sophisticated website would be. A simple prototype might be a collection of clickable HTML pages that describe more complex, database-driven functionality—for example, by depicting the results of a search rather than actually receiving and processing queries—without being concerned with design-related issues of look and feel, colors, typography, images and the like.

What Does a Website Prototype Look Like?

At my firm, we call these prototypes “grayscreens” to emphasize the lack of design and focus our clients’ attention on the kinds of decision making that really matter at this stage in the process. Namely how the website will be structured, what specific pages will be included, the specific functionality they contain and a general sense of the layout of information on each page. While we use a proprietary system to construct these prototypes, there are many online tools available5 that will enable you to construct something very similar.

In the past, I often would describe a website prototype as a plan for how a website works, not how it looks. While, in a sense, I still think that’s true, I’ve come to realize that it’s actually pretty confusing. Especially since we go on and on about how sitemaps and wireframes are inadequate website planning techniques because they can’t be experienced interactively, like a website. But a very big part of the web experience is visual! Every aspect of a website’s structure and functionality is represented in some visual way by its prototype. With that in mind, it’s much easier to see how the distinction between prototyping and design is fuzzier than I’d thought.

See more by Christopher Butler, including The Strategic Web Designer and design tutorials, at

So, to better describe what exactly a website prototype is, I’d like to start by drawing a pretty simple analogy: Just as architectural plans use a consistent visual language to describe buildings, prototypes use a consistent visual language to describe websites. In both cases, there are many good reasons for the consistency part. Architects are trained to read plans and discern critical specifications from them that are later translated into three-dimensional structures. Likewise, website developers are trained to interpret prototypes and translate their specifications into functional code. You could say that the use of conventions make the plans look very similar, but that doesn’t stop the results from being quite distinct.

Here’s a prototyping example:

See what I mean?

For designers, rather than seeing the prototype as a document that imposes limitations, I think it makes more sense to see it as one that enables creative freedom. Believe me, I’m not trying to spin this. To milk my architecture analogy just a bit more, imagine if blueprints didn’t exist. Without them, it would be amazing if buildings were built at all, but it would be even more incredible if the ones that did remained standing! In the same way, prototypes provide a structure that ensures a website is even possible. No matter how great a design might be, if it’s not possible, it’s useless.

HIDC 2013

Want to learn more about prototyping? Check out interactive thinker Todd Zaki Warfel’s session: Interactive Prototyping & Introduction to Standard Prototyping Tools at the 2013 HOW Interactive Design Conference. Get registered today to get the early bird discount–extended until midnight tonight!


6 thoughts on “The Strategic Web Designer: Creating a Website Prototype

  1. mlgoldner050

    I completely agree with your article and the comparison to Architecture. Having been a life-long devotee to Architecture, and have studied it, I great similarities within Graphic Design as well as Web Design. I have always approached my design ideas through the structural foundations one learns in the study of Architecture. From layout, to the value of historical Architectural principles that have carried on for centuries. I recall when one of my professors at Parsons stated that, when you try to find trends in Graphic Design, Architecture is at the forefront in setting the table for design trends. Thank you, Michael.

  2. birdbrain

    Prototyping means building a model of the website before you build the actual website.So it is a kind of foundation layout or architecture which is the best practice to start with while working on designing of any website.

  3. ajosh9078

    Nice article, not the way I have gone about building sites in the past but I guess I have kind of used a frame from one site to build on another site.