Editor’s note: This is the first of a 3-part series by HOW Books author and HOW Interactive Design Conference speaker Christopher Butler on prototyping for web design. All 3 articles are excerpted from his book, The Strategic Web Designer. Watch for upcoming articles:
- The Language of Prototypes
- The Sequence of Prototyping
Website 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.
See more by Christopher Butler, including books and design tutorials, at MyDesignShop.com.
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.
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 an 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.
Want to learn more about how to prototype a website? Watch for the next two articles in this series:
- The Language of Prototypes
- The Sequence of Prototyping
More Resources for Website Designers
- The Strategic Web Designer by Christopher Butler—learn how to think about the web and lead website design projects from inception through development
- How Simple Usability Testing Benefits Your Web Design—interactive design tutorial with Christopher Butler
- Essential Tools and Concepts for Web Designers—on-demand interactive design tutorial with Patrick McNeil
