Website Prototyping, part 3: The Structure of Prototyping

Editor’s note: This is the third 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. See the previous articles:

Actually articulating how pages work, which is the heart of prototyping, is where I think most of the fuzziness between prototyping and design comes into play. Because the prototype must communicate the website experience (that phenomenological language again), it has to work like a website—which means you need to be able to click from page to page. But in order to work like a website, it has to look like one, too. That’s why I began this chapter by discussing how site maps (in that they don’t look or work like a website) and wireframes (in that they look in a Flatland kind of way like websites but don’t work like them) fail to communicate anything useful about, well, using websites. Where I’m heading with this is all about the “looking” part is that since prototypes need to look like websites, they can’t look just any way. The honest truth is that building a prototype does involve a kind of design.

See more by Christopher Butler, including books and design tutorials, at

The kind of design I’m talking about has to do with communicating the priority of information on a page—or, to put it simply, information design. Information design, as it pertains to web pages, is an enormous topic that I certainly cannot cover in depth in this chapter alone. With humility, I’d rather defer to Steve Krug and recommend his book “Don’t Make Me Think” as the best source on the topic. (Everyone involved in web work of any kind should own it.) But for now, and with all the caveats required of such simplification, I will summarize the role of information design in creating an effective prototype as returning to two core principles over and over again with every information design decision that the team makes:

  1. What is the purpose of the website?
  2. For whom are we building it?

The answers to those questions should lead to very focused pages with a clear sense of priority. This is often manifested in visual decisions, such as the relative sizes and positions of elements on a page or typographical details if the volume of information on a page warrants it.

Let me unpack this with another example:

Though the prototyped homepage has a very deliberate layout in which the information on the page has been clearly and intentionally ordered, the spectrum of possibilities for what the final website can look like is still wide open.

Each visual design example takes liberties with elements of the page, but neither removes essential information nor disrupts the order of the information in a way that fundamentally changes the focus of the page. The interactive slide show element, for example, which occupies about three-fourths of the horizontal space at the top of the page, is still the most prominent visual element in both designs, even though Option 1 has made it slightly wider. The sign-up form, too, has not been fundamentally affected, though in Option 2 it is relocated to the left side of the page. Nor has the choice to limit the number of blog posts aggregated on Option 2’s home page significantly altered the overall priority of blog content on the page. Aside from these specific layout choices, Option 1 and Option 2 represent very different creative directions without undermining the integrity or violating the intent of the prototype.

Want to learn more about how to prototype a website? Watch for the next two articles in this series:

More Resources for Website Designers