Storyboarding is an easy way to see what information goes on which page and how that page will flow with the other pages on the site. It will also allow you to see how the site navigation needs to be set up and avoid you having to redo the menus or content on multiple pages.

References

This article is based on material from the following websites and has been adapted for educational purposes:

1. eHow: How to Storyboard Your Web Site
2. grokdotcom.com
3. Dr. Diane Davis, UTexas: Storyboarding your Website

Basic Steps

The table below outlines the basic steps of the storyboarding process:

1. Collect the information that you want to include on the Web site. This includes text as well as images.
2. Sort the information into topics. Topics should start at the broadest and work toward the narrowest.
3. For each page of the Web site, determine page title, headings, sub headings and content.
4. Plan the structure of the information and how the pages will link. This needs to be logical. It can be linear, hierarchical or a branch design, in the form of a web.
5. Layout the menu structure.
6. Layout your template page. This should be the interior page of the Web site.
7. Test the layout. Imagine that you are a visitor to the Web site. You can enter on any page. Does it work? If not, start again.

Each and every element in your storyboard must address these critical questions:

1. What do I want my visitors to know here?
2. What do I want my visitors to do at this point?
3. What do I want my visitors to feel right now?
4. Where do I want my visitors to go next?
5. How do I make it easy for them to do that?
6. How do I "reinforce" them after they've done it?

Consider all issues. Sometimes visitors may land on one of your interior pages. Will they know where they are, where they might go, what they are supposed to do? The final storyboard should allow a visitor to enter your site anywhere, know where they are and quickly understand how they can get to where they want to be.

Instructions

For EACH PAGE of your website, complete one storyboarding form that you can get from here. This form asks you to do several things:

1. Figure out what content you want to include in your site
2. Sketch out the site you want to build in Visio. Begin with the front page, which is the most important: determine what you will include there and how you will organize it. Where should your writing go on the page? Where should an opening image go? And where will you put the links? Once you have it all laid out, determine what resources you need to make it happen and list those (the introductory text, perhaps a navigation bar, links, maybe a logo image?) When the first page is sketched, go through the same process for each of the subsequent pages. So, for example, a sketch of one page, along with the resources needed for it, might look something like this:

http://www.cwrl.utexas.edu/%7Edavis/crs/309/story.gif

3. Determine a color scheme. You may have different colors on different pages, but the overall color scheme should be somewhat consistent. Be sure that the text and link colors are different enough to be discernable and that both are visible against the background color
4. Determine a font scheme: you'll want headings and subheadings, as well as the regular font to be relatively consistent in size, style, and color from page to page
5. Assign both descriptive names and file names (html names) for each page of your site. For instance, if you were doing a site on Poets and Poetry, you might set the following descriptive names for pages in your web site, along with the corresponding file names (in parentheses):
    • Poets (poets.htm)
    • Poetry books (books.htm)
    • Up and coming poets (newpoets.htm)
    • An interview with Ali Saloom (interview.htm)
Assigning both descriptive and file names up front and documenting them on your story board will make it much easier to keep your names straight--so that you don't start linking to some non-existent page called saloom.htm or something (or interview.htmL)
6. Determine how you will link your pages together. For example:

http://www.cwrl.utexas.edu/%7Edavis/crs/309/storyboard1.gif

7. Sketch of the flow of the entire site (see above) on a separate sheet. Do this in Visio as well.
8. Another example of a site map is as follows:

website layout and navigation

Resources

1. Storyboarding template document