Additional Resource Links:


Creating a Storyboard for WWW

With all the materials and information you want to work with in hand, sit down with paper and pencil (or some nifty drawing software) and plot the site out. Storyboard (sketch) your home page and each page it will link to; include all the elements you’re considering (text, images, buttons, hyperlinks) and don’t be afraid to make adjustments. Design a map of the site as a whole so you can visualize how all the pages relate to each other and how they work together as an organic whole. The bottom line is: You need to plan so that your Web site information can be accessed by the user quickly and easily. There are two different levels you need to consider when you plan your Web site: Design each page of your Web site so that it stands alone and yet is part of a larger whole. Remember that the Web thrives on hypertext links and Web users don’t expect to read an entire Web site like a novel, moving from page to page in a linear fashion. They want to jump quickly to an item that interests them and then move on to something else. Also, pay to attention to the flow of the information and the appearance of the page. Viewers may enter your Web site at any point via a link from another site. Note: This diagram illustrates how all the Web pages are linked together and how each can be accessed from within any page. Making Site Navigation Easy for Viewers Users need to be able to move around a Web site quickly and easily to locate and access information with a minimum of fuss and bother. If you make your Web site hard to navigate, users will just leave and won’t come back. Hence, organization is the keyword here and that is the reason why creating a storyboard is so important in your Web site development. Working Out a Directory Structure A very simple Web site may consist of a couple of HTML files and a few images. If that’s all you need, you can store al the files in a single directory. Anything more complex will probably need some file management—you’ll want to organize your files into subdirectories to make them easier to identify and maintain. For example, you might want to set up separate subdirectories for graphics and multimedia files.

Setting up a directory structure for your Web site is fairly easy, provided you do it in advance. You must know the correct path for each file you specify in a hypertext link or other reference on a Web page.

Production Storyboard

The treatment described in a Request for Proposal will give the Studio (and you) information on the overall mood and feel of the final product. The production flowchart provides a roadmap of events. The storyboard now takes the treatment and the roadmap and combines them into a detailed description of the final product.

The storyboard contains information on graphics, video, sound, text, audience interaction, color, type fonts, type size, etc. In other words, everything necessary for production crew members to do their jobs. It doesn’t have to be a work of art. It needs to be detailed enough so each crew member knows what to do and the Studio gets a clear picture of what will be happening throughout the whole program and exactly what it will look like.

Production Storyboard Examples

Again, the storyboard does not have to be a work of art. Graphics can be hand drawn. The idea is to give the production team enough information so each member can take the storyboards and begin to develop his/her portion of the final product. For instance, the “Understanding Your Automobile” storyboard team didn’t need to make a perfect drawing of the car. The team just let the graphic artist know that the car should be red and sporty-looking so he/she wouldn’t draw a gray sedan or some other kind of car that didn’t fit the approach being used (i.e., of a car with a smart-alecky, but lovable personality).

No matter which storyboard format you choose,
the following information must be included:  

  1. A sketch or drawing of the screen, page, or frame.
  2. Color, placement, and size of graphics, if important.
  3. Actual text, if any, for each screen, page, or frame.*
  4.  Color, size, and type of font, if there is text.
  5. Narration, if any.*
  6. Animation, if any.
  7. Video, if any.
  8. Audio, if any.
  9. Audience interaction, if any.
  10. Anything else the production crew needs to know.

*Narration or text for individual storyboards may be written on a separate sheet of paper, but you must reference the corresponding storyboard number.

Production Storyboard Checklist

  1. There is a storyboard for each page, screen, or frame.
  2. Each storyboard is numbered.
  3. All relevant details(color, graphics, sound, font,  interactivity, visuals, etc. are indicated.
  4. All text or narration is included and cross with its corresponding storyboard number.
  5. Each production team member has a copy or each has access to a copy of the storyboards.