Storyboarding Your Website

The next step in planning your website is to figure out what content goes on what page and to come up with some simple links for navigation between those pages.

If you're using one of the structures described in the preceding section, much of the organization might arise from that structurein which case, this section will be easy. However, if you want to combine different kinds of structures or if you have a lot of content that needs to be linked together in sophisticated ways, sitting down and making a specific plan of what goes where will be incredibly useful later as you develop and link each individual page.

What's Storyboarding and Why Do I Need It?

Storyboarding a website is a concept borrowed from filmmaking in which each scene and each individual camera shot is sketched and roughed out in the order in which it occurs in the movie. Storyboarding provides an overall structure and plan to the film that enables the director and staff to have a distinct idea of where each individual shot fits into the overall movie.

The storyboarding concept works quite well for developing web pages. The storyboard provides an overall rough outline of what the website will look like when it's done, including which topics go on which pages, the primary links, and maybe even some conceptual idea of what sort of graphics you'll be using and where they'll go. With that representation in hand, you can develop each page without trying to remember exactly where that page fits into the overall website and its often complex relationships to other pages.

In the case of really large sets of documents, a storyboard enables different people to develop various portions of the same website. With a clear storyboard, you can minimize duplication of work and reduce the amount of contextual information each person needs to remember.

For smaller or simpler websites, or websites with a simple logical structure, storyboarding might be unnecessary. For larger and more complex projects, however, the existence of a storyboard can save enormous amounts of time and frustration. If you can't keep all the parts of your content and their relationships in your head, consider creating a storyboard.

So, what does a storyboard for a website look like? It can be as simple as a couple of sheets of paper. Each sheet can represent a page, with a list of topics each page will describe and some thoughts about the links that page will include. I've seen storyboards for very complex hypertext systems that involved a really large bulletin board, index cards, and string. Each index card had a topic written on it, and the links were represented by string tied on pins from card to card.

The point of a storyboard is that it organizes your web pages in a way that works for you. If you like index cards and string, work with these tools. If a simple outline on paper or on the computer works better, use that instead.

Hints for Storyboarding

Some things to think about when developing your storyboard are as follows:

• Which topics will go on each page?

  A simple rule of thumb is to have each topic represented by a single page. If you have several topics, however, maintaining and linking them can be a daunting task. Consider combining smaller, related topics onto a single page instead. Don't go overboard and put everything on one page, however; your visitors still have to download your document over the Net. Having several medium-sized pages (such as the size of two to ten pages in your word processor) is better than having one monolithic page or hundreds of little tiny pages.

• What are the primary forms of navigation between pages?

  What links will you need for your visitors to navigate from page to page? They are the main links in your document that enable your visitors to accomplish the goals you defined in the first section. Links for forward, back, up, down, and home all fall under the category of primary navigation.

• What alternative forms of navigation are you going to provide?

  In addition to the simple navigation links, some websites contain extra information that's parallel to the main web content, such as a glossary of terms, an alphabetical index of concepts, copyright information, or a credits page. Consider these extra forms of information when designing your plan, and think about how you're going to link them into the main content.

• What will you put on your home page?

  Because the home page is the starting point for the rest of the information in your website, consider what sort of information you're going to put on the home page. A general summary of what's to come? A list of links to other topics? Whatever you put on the home page, make sure that it's compelling enough so that members of your intended audience want to stick around.

• What are your goals?

  As you design the framework for your website, keep your goals in mind, and make sure that you aren't obscuring your goals with extra information or content.

Tip

Several utilities and packages can assist you in storyboarding. Foremost among them are site-management packages that can help you manage links in a site, view a graphical representation of the relationship of documents in your site, move documents around, and automatically update all relevant links in and to the documents. Some examples include consumer products such as Microsoft FrontPage and Adobe Dreamweaver.