Use a Storyboard to Plan Your Web Site
by Agatha Taormina

 

Table of Contents

Planning
Organization
Contents
The Flow Chart

Planning Plan your site before you start to create it. Ask yourself:
  • What is the purpose of my site?
  • Who will be the audience for my site?
    •
  • What content will I put on my site?
  • How will people want to use my site?
Organization Gather  and organize your site content:
  • Divide your information into chunks of data.
  • Organize these chunks into categories or larger units.
  • Establish the importance of each unit.
  • Establish the relationships between and among units.
    •
Content Your site will have some pages standard to all well-designed web sites:
  • Home Page-- file saved as default.htm
  • Cover or Menu Pages--the opening page of each discrete area of a site

Your home page should either take the reader to a Main Menu page with a list of all the different areas of the site or, in the case of a smaller or more focused site, simply link to all of the Menu Pages in the site.

Your home page should fit on a standard monitor area without any scrolling. Currently most users set their monitor screen resolution at 1024 x 768 pixels or higher.
The Flow Chart Because of the nature of their design, web sites don't lend themselves to traditional, linear outlines.

Instead, create a simple site map with a flow chart. Your topmost box will be your splash page.

  • Identify the major areas of your site.
  • Identify the areas subordinate to each main area. Be careful to keep similar areas parallel in the flow chart.
  • Use the flow chart to get a sense of the framework of your site and the relative importance of the various elements of your site.
    •
A flow chart, or storyboard, is an illustration of the relationships among the various individual files (i.e., web pages) that constitute your site. The storyboard will be a picture of the levels of your site.
  • You might want to base your storyboard on your sentence outline.
  • You might want to start with a blank sheet of paper and Post-It notes:  write the titles of topics and subtopics on the Post-It notes and experiment with their arrangement on the blank sheet.
  • You can use the organization chart software that comes with Microsoft Word to create a storyboard.
  • High-end web page editing software can also help you create your storyboard.
For this site you are likely to want a home page with links to the major sections of your site.

Simple Storyboard

As you develop the individual pages in each area of your site, you will add boxes subordinate to each of the boxes listing the main areas of your site.

 
  • Use the flow chart to keep track of your navigational structure.
  • Each page should also link back to its parent page.
  • Each child page should also link back to its parent and its aunts and uncles.
  • In addition, all pages should contain your address file (i.e., an e-mail address to contact you as author of the site and a Last Update date) and a link to your home page.
    •
:  
Remember that your storyboard structure must reflect the structure of your web site and your web site should take advantage of the nonlinear structure of the web itself.

Sometimes, however, an early storyboard will project a linear view of the web site, a view that implies that the visitor will be directed to view your files in a particular order. 

Here is a storyboard that implies that a site section (in this case, Free Choice #1) is to be viewed in a linear fashion:
Incorrect Storyboard

Incorrect Storyboard

But in a typical well-designed web site, a section of the site (such as your Free Choice #1 section) has a cover page.  From that cover page, the site visitor can access any of the other pages related to that subject.

Here is what such a storyboard would look like:
Correct Storyboard

Correct Storyboard

 

Here are three ways to create a storyboard in Microsoft Office:

  

 

Button:: Readings Menu

Web Design Center Readings
Last Revised: January 22, 2010
©  Agatha Taormina