Website storyboard

There are two considerations in the custom web site design:
you must inform and guide the web user through a complex body of linked information.
you must create a visual design storyboard appropriate for interactive computer displays composed in (X)HTML.

Steps for a successful storyboard

Define the purpose of your presentation and the audience or reader that you are planning to address.

Break up your content into main topics and group related information under a single topic.

Use paper-based templates or flowcharting software to create a rough outline of each web page starting with the home page.

Provide the following information for each page:
- a descriptive title
- the main heading
- the subheadings
- the purpose of the page
- a description of content
- the type of images
- a description of the links

Successful tips

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 structure, best seen on a storyboard. 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.

Name your pages - 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
Though this may seem like an obvious thing to do, often times people will misspell a page by accident. For example, you 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.

Trace the flow of your web site - While viewing your storyboard, think through the logical steps to get your visitor from point A (your index page) to point B which could be "my products or services" (depending on your goal for the site).