Multimedia:Design:Methodology - storyboard

From virtualMVwiki

Jump to: navigation, search
 Home  Design, Home <


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.


A building analogy

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

  1. 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
  2. The architect then produces detailed plans (usually left to a draughtsperson).
  3. These are then approved by the client
  4. 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.
  5. The plans are then priced (usually by several building contractors)
  6. A price is selected and the building built.

Parts of a storyboard

Overview of production/Design brief

A brief description of what the site/multimedia presentation is about. This will give the rest of the storyboard a context.

Client requirements and User definition

What is the purpose of the web site - from the client's perspective?

Target audience

Identify some of the following:

And for each identify what should be done to address these needs. --vmvadmin 17:47, 21 August 2011 (EDT)

Answer the following questions:

University web sites: What there is v's what is wanted. A cartoon by Randall Munroe which has been used by Uni web developers to focus on what is important in their sites,

Concept plans

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

For each design

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"

Storyboard: Concept Designs Storyboard: Concept Designs


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).


Storyboard: Navigation map


The following navigation map was drawn using a demonstration version of creately ( - 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

Quick Tours of Hawkes Bay: Web site Navigation map Quick Tours of Hawkes Bay: Web site Frame/noFrame Navigation map

Ensure that the navigation map:

For a multimedia navigation map:

For a Web Navigation map include:

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


This is a model (or template) for all other pages, so a sample page should be carefully drawn. It sets the standard for backgrounds, fonts, colours, balance, screen size, and so forth.

This is the tool that will give your presentation the professional feel, and should be stabilised and agreed to before the presentation/site is constructed.

Example properties that should be discussed;

For a web site this is used to develop the CSS, so

  1. Identify the size of screen you are developing for: e.g. 800 x 600.
  2. Sketch the basic outline including headings, buttons, logos, backgrounds etc that are common on all pages then
  3. identify things you could put a css. For example h1 = Blue, Arial, etc.. h2 = ...

Scene and element detail

This is a single page that describes an individual scene/page. It must have enough detail so that if several people used this design, they should come up with the same result.

Storyboard: Page definition

One page for each scene showing layout, media interaction, and transition effects. The content of elements needs to be clear, for example, pictures should be sketched, text content indicated.

Each page should have consistent screen navigation links, and follow the generic template.

Scenes that should be included.

For a Web site pages that should be included:

On each page:

Element schedule

This is a list of all of the multimedia elements to be used in your presentation. It should be sorted by type (text, graphics, animation, sound, video) to be used by element creators.

This equates to a house Schedule of Quantities, where it is a list of elements to get for your house (doors, windows, timber, etc. ).

These elements commonly are gathered or created by specialists e.g. a video specialist.

The detail required is enough so that for example a photographer could take the list and gather images ready for inclusion into the multimedia presentation. Things to include;

For example

Filename Page Ref Descrip width x h(px) Size (KB) Comments
splash.png 1, 5 Splash logo 200x100 12 keep light and mainly green


Storyboard: Schedule of elements


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

For more information go to MS-Word2007: Compressing Pictures

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).



Other resources


  • Vmvadmin(5 months ago)Reply HideBlockApproveEdit
    • Good file compression tool irfanview - AN
Add comments here (use -~~~~~)

Icon References.png References

  1. Dia (2010) GNOME Live!. Retrieved November 25, 2010 from
  2. Phillips, J. (2010). 7 Steps To A More Effective And Productive Webdesign Process. Retrieved from

Multimedia:Design:Methodology - storyboard. (2014). In virtualMV's ( Michael Verhaart ) wiki. Retrieved October 25, 2014, from    (zotero)
Personal tools