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.
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
Finally, I'll show you the best priced, most used and my personal
favorite storyboard tool.
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
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:
Products and Services
Health and Beauty line
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
|About the contributor