Multimedia Design Principles - Chapter 3

8/18/2019 Multimedia Design Principles - Chapter 3

http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 1/18

3 Multimedia storyboard

OBJECTIVES

At the end of this chapter students will be able

to:

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.

o Introduction to storyboard

o Advantages of using the storyboard technique

o How are storyboards used

o Information in a storyboard

o Storyboard size

o Sample storyboard page

o The types and format of linear storyboard

o Advertising Storyboardo Animation Storyboard

o The types and format of hierarchy storyboardo Corporate learning

o Web (hierarchy)

o The types and format of composite storyboardo Web



3

M U L T I M E D I A D E S I G N P R I N C I P L E S

34

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 toolfor designing multimedia documents. The

technique has been borrowed from the

animation industry and is now widely used inmultimedia 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 frameof the TV, film presentation and also

navigation.

There are two dimensions in producing storyboard:

1. First Dimension

· Time (what happens in the introduction, in themiddle 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.

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 alongthe right lines, before getting too far along the development process.

Example of Storyboard

Present the storyboard to the

clients



3

C H A P T E R 3 M U L T I M E D I A S T O R Y B O A R D

35

3.3 HOW ARE

STORYBOARDS USED

Storyboards are used as :

1. A s a lesson planning toolPages in storyboard should beconstructed 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 costsA storyboard is a plan for spending

money. Using your storyboard, it is possible to take each media

element and determine roughlywhat it will cost to produce.

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.

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 worksStart by validating the information in your storyboard by having content experts read

through your program and make suggestions for improvement. You also can askseveral people who are not familiar with the material contained in your program.

Storyboard allows you to see everything will be

and how it will all fit together

Storyboard as a documentation



3


36

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

Video 1: Animasi menunjukan pokok bunga tulip melentur

apabila dihinggapi rama-rama bersaiz besar.

Audio: -

Sfx: Eiiit! (Bunyi dahan pokok bunga tulip melentur)

Video 1: Animasi menunjukan dahan bunga tulip patah dan

rama-rama terjatuh.

Audio: (FVO) Muzik suspen…. Aa…. (senyap)

Sfx: Tap.. (Bunyi tangkai patah).

Example of Information in a storyboard



3


37

3.6 SAMPLE STORYBOARD PAGE

This particular storyboard page is used when planning computer based training program

(courseware).

1. Area 1Represents 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 2This 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.

Samples of storyboard page

640 ixel 640 ixel

480 pixel

480 pixel

Storyboard size



3


38

3. Area 3This 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 THE TYPES AND FORMAT OF LINEAR STORYBOARD

3.7.1 Advertising Storyboard

Advertising storyboard is a linear storyboard. But the screens usually follow the sequenceyou 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



3


39

STORY BOARD

Date : ___________ Page# : _______

Project Title : ___________________

Crew : _________________________

The advertising storyboard format / template



3


40

Example of advertising storyboard in color



3


41

Example of storyboard for animated advertising in sketch



3


42

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 characterhas no reaction to something, the animator will not frame a shot differently. They are told to

draw exactly what’s on the boards.

Animation Storyboard



3


43

ANIMATION STORYBOARD TEMPLATE

PROJECT : ___________________

Action description :

___________________________

Sound cue :

___________________________


___________________________

Sound cue :

___________________________


___________________________

Sound cue :

___________________________

Animation storyboard template



3


44

Example of Animation Storyboard



3


45

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 toconsider the contents of the subjects so that it is easier for them to design the page.

Main Page

Major Section Major Section Major Section Major Section

Content Content Content Content Content Content

Student Name : Project Name :

Cards :

Text :

Description :

Cards :

Text :

Description :

Example of storyboard template for Corporate Learning

Cards :

Text :

Description :

Cards :

Text :

Description :

Corporate learning



3


46

Example of courseware storyboard



3


47

Example of corporate learning with color

Card 2

Text

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

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

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

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

Card 1

Text

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

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

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

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

Card 4

Text

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

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

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

Description

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

Card 3

Text

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

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

Description

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



3


48

3.8.2 Web hierarchy)

3.9 THE TYPES AND FORMAT OF COMPOSITE STORYBOARD

3.9.1 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 andeach 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 anorganic 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.

A hierarchy flowchart for web



3


49

Creating a storyboard is one of the most painstaking, yet critical steps to better informationdesign. 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 primarynavigation. 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. A descriptive title

2. The main heading

3. The subheadings

4. The purpose of the page

5. A description of content

6. The type of images

7. A description of the links



3


50

Documents

Multimedia Design Principles - Chapter 3