Storyboarding your Website

Overview:

Before you open up Dreamweaver, your group should sit down and sketch out the design and contents of your site as you envision them now. It is likely that you will also return to this storyboarding phase as you begin to develop and revise your vision of your site. You don't have to be an artist to storyboard well; the most important thing is that you get a sense of how the site will be laid out, what goes where, and what needs to be included.

Specifics:

Download and complete one storyboarding form for EACH PAGE of your website. This form asks you to do several things that are commonly accomplished in the first storyboarding phase (though the preliminary vision is often revised as you go):

1. Determine what content you want to include in your site
2. Determine how you will invite others to contribute to the content of this site. Perhaps you will simply invite visitors to send you info and provide an email link or an email form. In any case, part of your assignment invovles inviting your audience to contribute to the site, to "grow" it.
3. Sketch out the site you want to build with pencil and paper. 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:

4. 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
5. 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
6. Assign both descriptive names and file names (html names) for each page of your site. For instance, if you were doing a site on Cyberpunk, you might set the following descriptive names for pages in your web site, along with the corresponding file names (in parentheses):
   
   
   • Cyberpunk Novels (novels.htm)
     
   • Cyberpunk Writers (writers.htm)
     
   • Cyberpunk's Technological Predictions (predictions.htm)
     
   • An Interview with William Gibson (interview.htm)
     

[Note: 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 gibson.htm or something (or interview.htmL).]

7. Determine how you will link your pages together. Think through the logical steps to get your visitor from point A (your index page) to point B "learn more about X," though often times you'll want/need to offer links between subpages, as well. For example:

Once you have a good sense of all of this, download the storyboard form, fill out one form for each page of your site, making your page sketches at the bottom of each form and then a sketch of the flow of the entire site on a separate sheet.