Storyboards

Storyboarding a perspective web site provides an overall rough outline of what the site will look like. You should include in the storyboard:

  • the overall design concept ,
  • the style of the site,
  • the name of each page (file name and header name),
  • which topics go where,
  • the links,
  • a conceptual idea of where your images go,
  • what type, size (on screen and file size) you need for graphics,
  • what the layout will look like,
  • notes to the programmers,
  • and many other things, depending on your unique situation.

A well-developed storyboard also allows you to show your client what you have in mind before any actual coding begins. If you have a storyboard that both you and your client agree on, fewer "surprises" will occur during the development phase. With a well-developed storyboard, you can develop each page in turn without "missing" something, making testing and debugging a site that much easier.

You don't have to be able to draw to produce a storyboard. You need only sketch in the outlines. 'This image goes in the top right hand corner, this heading is level 2 and centered, this paragraph goes here' etc. You can draw all this in simple shapes with a few notes. 'This page is a white background, the navigation links go here and point to' and so on. The usual purpose of the storyboard is to communicate your perspective development intentions, not to win an art prize. However, if you are attempting to sell the idea of the web site to a customer, you may want a storyboard that would win a prize!

Ideally, someone should be able to look at your storyboard, no matter how crude, and using the right material, put together the same site you would have done. If you have a large site to develop this can be very useful, allowing you to distribute work to others. From the storyboard they should be able to develop the pages as you want them. When you assemble the project you should have consistently designed pages despite having several different authors.

Here is an example of a storyboard for a simple site. It does not follow all the suggestions listed above, for in this case (one author who was also the subject matter expert), these things were not needed. This illustrates the point that each storyboard will be unique, reflecting the uniqueness of the particular project.