STORYBOARDS

Designing and Planning Your Site      Sample Web Page Sketch

Sample Web Site Storyboard              Storyboard for This Site

Web Site Design Rubric

DESIGNING AND PLANNING YOUR SITE  

Starting NOW,  always keep a backup copy of your entire web site in the turn-in folder because crashes happen!   Make sure you have at least one complete and accurate offline copy of your plans, storyboards, web pages, etc. in case of technical difficulties. Okay, let's talk storyboards!    

A.        THINK ABOUT IT:  WHO IS YOUR AUDIENCE (OR WHO ARE YOUR IDEAL CUSTOMERS)?  WHO DO YOU HOPE WILL VISIT AND ENJOY YOUR SITE?  WHAT IS THE PURPOSE OF YOUR SITE?

You will need to figure this out before anything else. Once that is done, think about the information and graphics that your audience would be interested in.   Narrow or expand your topic so that it will fit on 5 - 7 web pages.  Ask yourself these questions.  It's a lot easier if you decide ahead of time how many levels or branches you’ll need. Storyboarding will help you decide how to name the individual page files too.

*   What do I want on my index (home) page?

*   What categories or subtopics of information do I want to have in my site?  (If you only have 5 pages, that would mean a home page + 4 subtopic pages.  You can think of your pages as yellows and the details on that page as the reds.)

Then you can start to make your storyboard.  Think of this as a little like planning a writing piece.

WHAT DO WE MEAN BY A STORY-BOARD?

A web site storyboard looks like a flow chart or graphic organizer.  It is like a map of your site.    A well-done storyboard has three parts:

1.      A quick sketch of the site's structure

  1. A detailed structural outline
  2. A detailed sketch of each page

The storyboard is your blueprint. Just like a building needs a blueprint, so does a web site. Your visitors might arrive at any page on your site. Your job is to see that they can get into the main areas of your site to locate information with a minimum of clicks. Visitors like to get to the information they wanted within three clicks of arriving at a web site. 

B.        MAKE A DRAFT STORYBOARD BY DRAWING A QUICK SKETCH ON SCRATCH PAPER SHOWING THE STRUCTURE YOU WANT FOR YOUR SITE

This fake site for an online spa products store has a total of seven pages.  You must have a minimum of 5 pages in your own web.  (You do not have to make an online store.)   

  • Keep in mind that your visitors should always know where they are and how to get back Home. 
  • Visitors should be also able to provide feedback or contact you form so you need a page about you with an email link or a guest book.

·        What do you think is the easiest way to link pages so your visitors can easily get from one topic to another?

  • If the visitor arrives at a sub-topic page (category page), how will they get to the other categories or the Home page?  

  C.       LIST THE NAMES YOU ARE GOING TO GIVE YOUR PAGES; USE AN ORGANIZED FORMAT.  Every page should have a useful title. Titles not only tell the visitor about the page, the title is used by search engines, too. Each word is important.

 www.suzannesspa.com                                      www.suzannesspa.com/candles
www.suzannesspa.com/lotions                           www.suzannesspa.com/accessories
www.suzannesspa.com/fragrances                      www.suzannesspa.com/contacts
You will also want to include .html names in your storyboard.  Often times people will mis-spell or mis-title a page by accident.  It is really hard to fix a mistake like that after you publish your site, so do it right at the beginning.

 index.html                      candles.html          lotions.html                               accessories.html

fragrances.html                          contacts.html             soaps.html

 D.        MAKE A DETAILED SKETCH OF EACH PAGE

1.      Each page is sketched in detail (by hand) showing placement of all text, graphics and hyperlinks.  The simpler your site is, the easier it will be for visitors to find information and for you to update later.  

2.      While planning your storyboard, think through the steps visitors must take to go from point A -- nearly always your home (index) page -- to point B.  Does it take 3 clicks or less? 

3.      You should explain each page’s purpose because your visitors might not see any of the others. Be sure to link back to the home page. 

4.      Make a note of your theme and color schemes on each page.  *See my links about color choices.

You need to have at least 5 pages total.  Each page must have at least 1 graphic and 3 paragraphs. (The paragraphs can be scattered all over the page if you like.) You may also add lists, pictures, graphs, tables, etc.  provided they enhance your content.

E.        DECISIONS ABOUT DESIGN

determining folders, filenames and templatesConsider your Content

  • A consistent design theme (backgrounds, colors, etc.) lets visitors know when they are on your site and when they’ve  moved to external links.  You will need to have at least 3 hyperlinks to related sites about your topic.  You may choose which page to use for those.
  • Are you going to rely on lots of pictures to express your message? Remember to plan for at least 1 graphic per page.

·        How many graphics can you have and still keep a fast loading time?   Don’t overdo it.

·        Don’t forget you will have to make your page-width suitable for all browsers.

·        Do you have long text reports or paragraphs? You will have at least 3 paragraphs per page.

·        Will the words need to be modified for easy reading online?

·        Your information is valuable--how can you make it easy for visitors to get it?

F.         BEGIN TO MAKE THE REAL STORYBOARD WITH INSPIRATION

You could make one  on paper in real life – but it’s much easier with Inspiration.