Introduction

A storyboard is a graphical representation of the proposed multimedia project (the plan). Just as an architect draws plans for a house giving all the components, a multimedia production requires a storyboard. My thanks to students who have kindly given me permission to include samples of their work.

Benefits

They’re easy to create - can use pencil & paper

Allow the designer to anticipate problems

Serve as a common reference point for design teams and clients, providing firm specifications for both.

Becomes the "Contract" document between you and your client, and places a boundary on your presentation. This is *important since multimedia production can lead to forever changing specifications.

Becomes the working document for the multimedia project team.

A building analogy

Most of us are familiar with the way a building is designed and constructed.

A client visits an architect to discuss the concept. The architect draws concept plans, which are modified with the client until the basic structure is determined

The architect then produces detailed plans (usually left to a draughtsperson).

These are then approved by the client

If the plans are for large buildings, the items that make up the building are put into a Schedule of Quantities (by a Quantity Surveyor), so that all quotes for the building are based on the same information.

The plans are then priced (usually by several building contractors)

A price is selected and the building built.

Parts of a storyboard

Overview of production (Design brief)

Client requirements & user definition

What is purpose of the site from the client's perspective

Target audience

Defining the needs of the user will focus the design.

Concept plans

Sample designs that are used to form the basis of the look and feel of the web site. These should be of an informational page rather than the home page.

Navigation links:

A single page showing how the scenes are connected.

Should indicate the triggers that connect the scenes (eg. buttons).

The template/standards

To enable the production to have a consistent feel, it should be based around a template.

Concept plans

Several layouts should be drawn first. These should explore different possibilities. These may be referred to as scamps.

For each design

Two samples should be provided:

A sketch of the introduction/splash page, and

A sketch of an informational/detail page

A list of the advantages of the layout (what you like about it). You should also indicate which is the preferred layout.

A list of disadvantages of the layout

From the options drawn one will be chosen (or a composite) as the primary layout for the web site.

Remember for a web site there are two "users"

The client for whom the site is being built and

The eventual users of the site.

Research

Look at existing sites on the same or similar topics. Discuss the advantages and disadvantages of the approach taken. Consider what will make your site more appealing than the ones found.

Navigation map

In order to show how pages (in html) or scenes (in multimedia) link a navigation map can be used. The navigation map is a document that shows the relationship between the scenes/pages in a multimedia/web presentation (It is equivalent to an Entity relationship diagram in a database).

Multimedia

Storyboard: Navigation map

Internet

The following navigation map was drawn using a demonstration version of creately (http://creately.com/ - Used with permission Ash 20:55, 12 October 2010 (UTC))

Storyboard (Internet): Graphical Navigation map

The following navigation maps show a No-frames based site (left) converted to a frames/no frames site (right) - click to enlarge the images

Ensure that the navigation map:

Has intuitive navigation (linking direction clear )

is on a single page (as far as possible)

Has a title.

For a multimedia navigation map:

Clearly indicate which is the start scene, navigation between the pages shown and any external links.

For a Web Navigation map include:

Logical first page (usually index.html or default.htm)

If frames, clearly show pages

Pages with html name

A page description (if the page name is abbreviated or unclear)

a site map page (a page that links to all pages). If you use frames the site map can be the alternative no frames page.

a web links page (may also contain a bibliography)

There are several ways to organise the flow of a multimedia application.

Linear List

Commonly used in presentation programs such as Powerpoint, where the user clicks the mouse to activate the next object (slide, animation, etc)

Menus

The user is provided with a set of choices. These may be presented as hyperlinks, or pictures. Configuring a game is commonly done by using menus.

Notes

Include a total size estimate. This will give an indication that the presentation is feasible. E.g. for CD-ROM < 640 MB, and for a Web site an indication of how much disk space will be required on the Web Host.

Avoid using vague filenames e.g. image1.png, image2.png. They don't give any idea of what the file contains and don't scale well (if you increased the number of images say to 100 you may have to search them all to find the one you want).

Storyboard: Schedule of elements

Tips

If you scan drawn images of your storyboard into a Word document you may find you have created a monster file. Word 2007 has a picture compress facility that will dramatically reduce the document size. Also including PowerPoint slides can cause size issues. Link to the picture compress page for details

Warning ** if you create your storyboard in PowerPoint and create a Word document that is huge, it may be that every image is actually the PowerPoint. So, you can save the PowerPoint slides as images, or use print Screen and paste into Word..

Sample storyboards

The following pages give (reduced) samples of storyboards which students have kindly given me permission to include in the wiki. (If you are a student listed - and your pages are not included yet - and are happy for them to be added could you add four squiggles ( ~~~~ ) to the end of the line).