3

Multimedia storyboard

Introduction to storyboard

Advantages of using the storyboard technique

How are storyboards used

Information in a storyboard

Storyboard size

Sample storyboard page

The types and format of linear

o Advertising Storyboard
o Animation Storyboard

The types and format of hierarchy storyboard

o Corporate learning
o Web (hierarchy)

The types and format of composite storyboard

o Web

OBJECTIVES
At the end of this chapter students will be able
to:

storyboard

1. Explain what storyboard is.

2. Evaluate the advantages of using the
storyboard technique.
3. Conduct storyboard.
4. Identify the information in a storyboard.
5. Identify the storyboard size.
6. Enumerate the types and format of linear,
hierarchy and composite storyboard.
7. Optimize the utilization of the storyboard
tools.
8. Determine how to sketch the storyboard.
9. Enumerate the steps in sketching
storyboard.
10. Accept example of the storyboard process.
11. Recognize the types of storyboard needed
by clients.

M ULTIM EDIA DESIGN PRINCIPLES

3.1

INTRODUCTION
TO
STORYBOARD
Storyboard is a series of screen in the project
flow, arranged in sequence. It presents the real
picture (in 2D format) in the project, which will
be produced. A storyboard is a very useful tool
for designing multimedia documents. The
technique has been borrowed from the
animation industry and is now widely used in
multimedia development.
The storyboard allows the multimedia designer
to think in terms of images rather than words
and is an excellent tool for representing ideas
for screens of information and links between
screens. The designer does not need to be able
to draw the images in an artistic style, but
simply to represent all the elements as they
would be organized on the screen. It is a frame
of the TV, film presentation and also
navigation.

Example of Storyboard

There are two dimensions in producing storyboard:

1. First Dimension
Time (what happens in the introduction, in the
middle and the ending)
2. Second Dimension
Interaction / navigation methods
How voiceover interacts with image
How visual movement and effect can appear on
image
How voice over interacts with music soundtrack.

Present the storyboard to the

clients

3.2
ADVANTAGES OF USING THE STORYBOARD TECHNIQUE
There are several advantages of using the storyboard technique:
1. The author is forced to think visually, developing a document using clear, informative
images and text to convey the message.
2. The storyboard is definitely flexible, allowing the author to move ideas, images, even
whole sequences of events across the range of the document.
3. The storyboard can be used to show the links between the various screens in the
document, allowing the author to keep track of the action during the development
process.
4. The storyboard can be shown to the client to check that the author is working along
the right lines, before getting too far along the development process.

34

CHAPTER 3 M ULTIM EDIA STORYBOARD

3.3

HOW
ARE
STORYBOARDS USED
Storyboards are used as :
1. A s a lesson planning tool
Pages in storyboard should be
constructed to include every aspect
and element of your multimedia
product. It allows you to see where
everything will be and how it will
all fit together.
2. As a basis for projecting
production costs
A storyboard is a plan for spending
money. Using your storyboard, it is
possible to take each media
element and determine roughly
what it will cost to produce.

3
Storyboard allows you to see everything will be
and how it will all fit together

3. As a guide for media producers (internally or externally)

Storyboards help multimedia producers to produce the media you want or envision.
Make your requirements for media as specific as possible. The clearer and more
exact you are about what you want or envision will save you time and money when it
comes to producing your program. Storyboards are used heavily during production. It
is a lot cheaper to change a few sheets of paper than it is to make changes after
production is underway.
4. As documentation
Many multimedia products involve a number
of media elements. You may have several
hundred screens, each with a specific branch
or branches media elements such as
photographs, illustrations and voicing.
Without clear and accurate documentation,
there is no way to change or update the
program in the future.

Storyboard as a documentation

5. As the basis for gaining competitive bids

To insure that you get the best possible bids, bids that are realistic and fair, submit
your detailed storyboard as the basis for making the bid.
6. As the basis for preparing Internal Proposals
Allow you to develop detailed plans and project costs.
7. As the inexpensive test platform for validating that your instruction works
Start by validating the information in your storyboard by having content experts read
through your program and make suggestions for improvement. You also can ask
several people who are not familiar with the material contained in your program.

35

M ULTIM EDIA DESIGN PRINCIPLES

3.4

INFORMATION IN A STORYBOARD

Video 1:
Audio:
Sfx:

Animasi menunjukan pokok bunga tulip melentur

apabila dihinggapi rama-rama bersaiz besar.
Eiiit! (Bunyi dahan pokok bunga tulip melentur)

Video 1:
Audio:
Sfx:

Animasi menunjukan dahan bunga tulip patah dan

rama-rama terjatuh.
(FVO) Muzik suspen. Aa. (senyap)
Tap.. (Bunyi tangkai patah).

Example of Information in a storyboard

These should be included in the storyboard:

1. Sketches or screen drawings, pages or frames.
2. Colour, placing and graphic size if it is important.
3. Text, which will be included in each screens, pages, or frames.
4. Colour, size and font type if there is a text.
5. Narration (if any)
6. Animation (if any)
7. Audio (if any)
8. Video (if any)
9. User Interaction (if any)
10. Other things needed to be known by the production crew.
3.5
STORYBOARD SIZE
There is no fixed aspect ratio (the ratio between the width and height of the screen) for
storyboard.

36

CHAPTER 3 M ULTIM EDIA STORYBOARD

640 pixel

640 pixel

480
pixel

480
pixel

Storyboard size

3.6
SAMPLE STORYBOARD PAGE
This particular storyboard page is used when planning computer based training program
(courseware).

Samples of storyboard page

1. Area 1
Represents the monitor screen. This area shows how the screen will look to the user.
All information (both text and graphics) which will appear on the screen indicated.
2. Area 2
This space is for special instructions. Special instructions can include background
color, color of text, comments about animation, audio or video segments, screen
resolution desired or other information which describes how you want the screen to
look or perform.

37

M ULTIM EDIA DESIGN PRINCIPLES

3. Area 3
This space is used to indicate which screen is to appear next. It also indicates those
screens with test questions that respond to right and wrong responses.
4. Area 4
This area is used to write the voice script used by a narrator.

5. Area 5
This area is used to identify the name of the production and the number used to
designate the screen.
3.7
3.7.1

THE TYPES AND FORMAT OF LINEAR STORYBOARD

Advertising Storyboard

Advertising storyboard is a linear storyboard. But the screens usually follow the sequence
you have specified in the storyboard. The storyboard, the basic rough design of a TV
commercial, contains sketches of the scenes along with the script. To supplement the
storyboard and pre-test a commercial, an animatic may be used. Below is the template or
format for advertising storyboard.

Advertising storyboard

38

CHAPTER 3 M ULTIM EDIA STORYBOARD

STORY BOARD
Date : ___________ Page# : _______
Project Title : ___________________
Crew : _________________________

The advertising storyboard format / template

39

M ULTIM EDIA DESIGN PRINCIPLES

Example of advertising storyboard in color

40

CHAPTER 3 M ULTIM EDIA STORYBOARD

Example of storyboard for animated advertising in sketch

41

M ULTIM EDIA DESIGN PRINCIPLES

3.7.2
Animation Storyboard
Since animation is created frame-by-frame, storyboards are inherently more important than in
live action. While live-action boards, generally are for portraying special effects, stunts and
fancy camera moves, animation boards are very much about acting. Animators will draw
exactly what they see on the storyboards. If your storyboards show a scene where a character
has no reaction to something, the animator will not frame a shot differently. They are told to
draw exactly whats on the boards.

Animation Storyboard

42

CHAPTER 3 M ULTIM EDIA STORYBOARD

ANIMATION STORYBOARD TEMPLATE

PROJECT : ___________________

Action description :
___________________________

Sound cue :
___________________________

Action description :
___________________________
Sound cue :
___________________________

Action description :
___________________________
Sound cue :
___________________________

Animation storyboard template

43

M ULTIM EDIA DESIGN PRINCIPLES

Example of Animation Storyboard

44

CHAPTER 3 M ULTIM EDIA STORYBOARD

3.8

THE TYPES AND FORMAT OF HIERARCHY STORYBOARD

3.8.1
Corporate learning
Most of the corporate learning is hierarchy type. They have main menu and many chapters
below it. Inside the chapters are the sub topics. It is important for the instructional designer to
consider the contents of the subjects so that it is easier for them to design the page.
Main Page
Major Section
Content

Content

Major Section

Content

Major Section

Content

Major Section

Content Content

Corporate learning

Student Name :

Project Name :

Cards :
Text :

Cards :
Text :

Description :

Description :

Cards :
Text :

Cards :
Text :

Description :

Description :

Example of storyboard template for Corporate Learning

45

M ULTIM EDIA DESIGN PRINCIPLES

Example of courseware storyboard

46

CHAPTER 3 M ULTIM EDIA STORYBOARD

Card 1
Text
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Card 2
Text
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Description

Description
~~~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~~~

Card 3
Text
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Card 4
Text
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Description

Description
~~~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~~~

Example of corporate learning with color

47

M ULTIM EDIA DESIGN PRINCIPLES

3.8.2

Web (hierarchy)

A hierarchy flowchart for web

3.9
3.9.1

THE TYPES AND FORMAT OF COMPOSITE STORYBOARD

Web

Storyboard at least the main level of your site and two levels in. This will not only help you
sell your design to others, but, save time when actually creating the site. With all the
materials and information you want to work with in hand, you can sit down with paper and
pencil (or some nifty drawing software) and plot the web site out. Sketch your home page and
each page it will link to; include all the elements you're considering (text, images, buttons,
hyperlinks) and don't be afraid to make adjustments. Design a map of the site as a whole so
you can visualize how all the pages relate to each other and how they work together as an
organic whole. The bottom line is: You need to plan so that your Web site information can be
accessed by the user quickly and easily.
There are two different levels you need to consider when you plan your Web site:
1. Remember that the Web thrives on hypertext links and Web users do not expect to
read an entire Web site like a novel, moving from page to page in a linear fashion.
They want to jump quickly to an item that interests them and then move on to
something else.
2. Also, pay to attention to the flow of the information and the appearance of the page.
Viewers may enter your Web site at any point via a link from another site.
48

CHAPTER 3 M ULTIM EDIA STORYBOARD

Creating a storyboard is one of the most painstaking, yet critical steps to better information
design. In a storyboard, you develop a working model of your site, minus the interface, but
with all links. The storyboard should capture your entire information structure and primary
navigation. A storyboard allows you to see how the site's pages relate to each other, and how
a person can navigate your site.

Provide the following information for each page.

1.
2.
3.
4.
5.
6.
7.

A descriptive title
The main heading
The subheadings
The purpose of the page
A description of content
The type of images
A description of the links

49

M ULTIM EDIA DESIGN PRINCIPLES

50