Creating a Link Storyboard for Your Site

Let me welcome you to most useful yet overlooked step in web design. Creating a link storyboard before you start designing has some incredible benefits.

First things first, a link storyboard 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, just be sure to take advantage of this powerful exercise prior to designing your web site.

There are a variety of tools available to help you with creating a link storyboard, from sophisticated to simple.

For those who love to have the best tools for everything you do, then I suggest Visio 2000, which was recently gobbled up by Microsoft. This is a terrific tool, but will set you back $200.

Visio 2000

Also try:

http://www.pacestar.com $130
http://www.smartdraw.com $49

Many of you already have a storyboard tool, but probably don't even know it. If you have any of the Microsoft Office editions that contain Powerpoint, then you have a storyboard tool, albeit not too sophisticated.

Simply open up Powerpoint, choose a new blank presentation, then choose the organizational chart template. It is limited, but I've used this successfully on several occasions to present a link storyboard to clients.

Finally, I'll show you the best priced, most used and my personal favorite storyboard tool.

http://www.wordnet.net/imc/storyboard.htm

That's right. Good old paper and pencil. I'm sure many of you draw neater and with more clarity, but this works for me and the price is right.

Now the storyboard I just showed you was an initial sketch and far from complete. There several things that you want to accomplish from a complete, final version of your story board.

1. ESTABLISH YOUR LINKS - This really goes without saying and is of course one of the main reasons you're doing a storyboard in the first place.

In my experience, most new designers approach their first few web sites with a low level of anxiety and frustration for which they cannot explain. I believe it's because we naturally approach web design from a linear approach when in fact the entire concept of web design is it's 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.

2. 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:

Company
About Us
Job opportunities
Philosophy

Products and Services
Health and Beauty line
Vitamins
Clothing

You will also want to include html names in your storyboard, which might look like this.

Company - company.htm
About Us - about.htm
Job opportunities - employment.htm
Philosophy - philosophy.htm

Products and Services - products.htm
Health and Beauty line - beauty.htm
Vitamins - vitamins.htm
Clothing - clothing.htm

Now this may seem an obvious thing to do, but I don't know of anyone who hasn't at some time created the page name as products.htm and when later creating the links in their navigation, used product.htm leaving out the 's'.

This is usually not discovered until after publishing the site, leaving them with the dreary task of finding which pages were linked correctly and which were not.

When you have your html page names down in writing, it's much easier to create your html pages by referring to your storyboard, thereby eliminating those time consuming, irritating mistakes.

3. HIGHLIGHT THE TRAFFIC FLOW THROUGH THE SITE - While viewing your storyboard, think through the logical steps to get your visitor from point A (nearly always your index page) to point "make a sale" or "make contact" depending on your goal for the site.

Let me emphasize that this little exercise can make or break the sales effectiveness of your site.

If your goal is to get the visitor from your index page to making a purchase, you definitely won't be guiding them through your philosophy and mission statement, you'll be taking them to the features and benefits of your product or service, then to a page where they can order or you can at least make contact with them.

On your storyboard, this will appear as a colored line or boxes, (time to break out the markers), showing the most direct and logical flow from entry to sale/contact to exit.

This exercise may require you to rethink your storyboard and move things around a bit to get the best flow, but better now than after the site is already complete.

As touched on briefly above, the real overall benefits of a a storyboard are the confidence you take to the design since you now have the "big picture" for the site, the speed at which you will design since you have a well layed out plan and the time you will save by making fewer mistakes.