Website Prototyping Best Practices: How to Plan Your Website

What is the purpose of your website? What is it supposed to do? How is it supposed to serve the user who visits your site? These are the important questions that anyone taking on the monumental task of building a website faces. They are information architecture questions you must answer in order to create an effective and meaningful user experience. It’s imperative to consider these questions as you begin strategizing and planning your website design and eventual launch.

There are a few ways that people typically have approached website design through the years including creating site maps (outlines of the pages a website will be comprised of) and wireframes (diagrams that illustrate a website’s structure). Unfortunately, too often simply creating a “map” of how things will work isn’t enough. You need to test things and really experience the site the way the user will. And for that you’ll need a website prototype.

Why You Need Website Prototyping

butler_headshotWebsite prototyping means building a working model of your website before building the actual site. Site maps and wireframes have their time and place, but a prototype can be much more useful for really thinking through the way your audience will interact with your site. Christopher Butler, Chief Operating Officer of Newfangled (a web development firm on the cutting edge of modern digital marketing and technology) and author of The Strategic Web Designer, explains it like this:

“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.”

Website Prototyping

Here are few things to keep in mind when considering your website prototype:

  1. A good prototype should work just like a real website, allowing the user to click from page to page rather than forcing them to imagine a future interactive experience.
  2. A prototype should accurately represent the information your website will contain which includes the structural information (such as the hierarchy of pages and subpages within the site), as well as the site’s content.
  3. An effective prototype should answer the following questions: A) what is the purpose of the website? B) who is the site being built for?

In this excerpt from his guide to Information Architecture, Butler outlines the main prototyping stages:

Stage 1 Identify the overall page structure of the website and arrange pages within navigation menus in order to make them all intuitively accessible to users and indexable by search engines.

Stage 2 The key landing pages should begin to take shape. More than simply accounting for them in the structure of the site, this stage should involve specifically outlining the information that these pages will provide and organizing it within a usable template.

Stage 3 You should now devote your attention to those pages containing supporting content. Supporting content is the material your content strategy has planned for—newsletters, whitepapers, case studies, blogs, videos and the like.

Once you’ve completed Stages 1 through 3, finalizing the majority of the website’s pages and content types, you need to identify the calls to action that your website will include in Stage 4 and begin to associate individual ones to the specific pages where they will be most appropriate. You should also spend some time outlining a functional workflow for how the website’s content management system will enable its administrators to flexibly control the placement of calls to action as the site grows.

Stage 5 is focused only on your website’s home page. Since you’ve identified the structure of the site, its content and how it will engage with users, a sense of priority should now be clear and help to make home page content decisions simple.

Finally, Stage 6 is reserved for specifying the search and filtering tools that your website will provide users. This is intentionally left until the end in order to make sure that the content determines the tools rather than the other way around.

This overview of the stages should give you a bit of an idea of how the prototyping process works and insight into thinking about designing for user experience. This is really just the tip of the iceberg when you start contemplating the question of user experience (UX) design, but is meant to help you gain idea of how to begin website strategy and planning before undertaking your actual site design.

Information ArchitectureTo learn more about prototyping check out Chris Butler’s Information Architecture guide or his book The Strategic Web Designer.

To learn more about user experience design, check out this course available from HOW Design University: Intro to UX Design by Patrick McNeil.