multimedia design principles - chapter 3
Post on 07-Jul-2018
214 Views
Preview:
TRANSCRIPT
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
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 2/18
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
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 3/18
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
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 4/18
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
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
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 5/18
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
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
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 6/18
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
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
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 7/18
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
39
STORY BOARD
Date : ___________ Page# : _______
Project Title : ___________________
Crew : _________________________
The advertising storyboard format / template
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 8/18
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
40
Example of advertising storyboard in color
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 9/18
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
41
Example of storyboard for animated advertising in sketch
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 10/18
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
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
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 11/18
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
43
ANIMATION STORYBOARD TEMPLATE
PROJECT : ___________________
Action description :
___________________________
Sound cue :
___________________________
Action description :
___________________________
Sound cue :
___________________________
Action description :
___________________________
Sound cue :
___________________________
Animation storyboard template
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 12/18
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
44
Example of Animation Storyboard
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 13/18
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
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
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 14/18
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
46
Example of courseware storyboard
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 15/18
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
47
Example of corporate learning with color
Card 2
Text
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Description~~~~~~~~~~~~~~~~~~~~~~
Card 1
Text
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Description~~~~~~~~~~~~~~~~~~~~~~
Card 4
Text
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Description
~~~~~~~~~~~~~~~~~~~~~~
Card 3
Text
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Description
~~~~~~~~~~~~~~~~~~~~~~
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 16/18
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
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
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 17/18
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
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
8/18/2019 Multimedia Design Principles - Chapter 3
http://slidepdf.com/reader/full/multimedia-design-principles-chapter-3 18/18
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
50
top related