Storyboarding Your Web Site

Storyboarding is a way to get your ideas organized on to paper. It is nothing more than a chart that tells the 'story' of how your site will link pages, both internally and externally. Others might call this a flow chart, organizational chart or even a family tree for your web site. Whatever you decide to call it, be sure to make sure students understand the importance of storyboarding before designing a website. By creating your layout on paper, it will save them time when they are ready to create their web pages.

Three Successful Tips to Storyboarding...

Tip #1 - Define Your Links

This is already understood since this is one of the main reasons you are doing a storyboard in the first place. Many first time web designers approach their first few web sites with a high level of anxiety and frustration for which they cannot explain.We naturally approach web design from a linear approach when in fact the entire concept of web design is its dynamic, multi-layered advantages. Creating a storyboard and defining the links between the pages gives you as the designer a "Big Picture" of your project and more confidence and speed (with less errors) during the actual design phase.

Tip #2 - Name Your Pages (URLs)

In addition to the descriptive names for each page of your site, also create real URL names for your html pages. For instance, lets assume you will have the following descriptive names for pages in your web site:

  • Who Am I
  • Hobbies
  • Career
  • Cool Links
  • My Favorite Things
  • Photo Album

You will also want to include .html names in your storyboard:

  • Who Am I - who_am_i.html
  • Hobbies- hobbies.html
  • Career - career.html
  • Cool Links - cool_links.html
  • My Favorite Things- favorite.html
  • Photo Album- album.html

Though this may seem like an obvious thing to do, often times people will mis-spell or mis-title a page by accident. For example, I might refer to the Photo Album page as album.html in one link and call it photoalbum.html in another link. These types of errors are not usually discovered until after publishing the site, leaving you with the frustrating task of trying to determine which pages were linked correctly and which were not. When you have your html page names down in writing, it is much easier to create your html pages by referring to your storyboard, thereby eliminating those time consuming, irritating mistakes.

Tip #3 - Trace the Flow of Your Site

While viewing your storyboard, think through the logical steps to get your visitor from point A (nearly always your index page) to point B "learn more about me" (depending on your goal for the site.)