Beruflich Dokumente
Kultur Dokumente
Storyboarding 1
What is storyboarding?
• Storyboards are visual organizers,
typically a series of illustrations displayed
in sequence for the purpose of pre –
visualizing a video, web – based training,
or interactive media sequence.
– http://www.instructionaldesign.org/storyboarding.html
Storyboarding 2
Storyboarding
Storyboarding 3
Storyboarding
Storyboarding 4
What is Storyboarding
Storyboarding 5
What is Storyboarding
Storyboarding 6
What is Storyboarding
Storyboarding 7
The Story of Storyboarding
• Where did
storyboards come
from?
– Walt Disney
– 1930s
– By the late 1930s
every major film studio
was using storyboards.
Storyboarding 8
The Story of Storyboarding
Storyboarding 9
The Story of Storyboarding
Storyboarding 10
The Story of Storyboarding
Storyboarding 11
The Purpose of Storyboarding
• The purpose of storyboarding is to gain an early
reaction from the users on the concepts
proposed for the application.
• Storyboards offer an effective technique for
addressing the "Yes, But" syndrome.
• Storyboarding is
– extremely inexpensive
– user friendly, informal, and interactive
– Provides an early review of the system’s interfaces
– easy to create and easy to modify
Storyboarding 12
The Purpose of Storyboarding
• Storyboard allows filmmaker to visualize and refine ideas.
• Serve to communicate ideas to produce team.
• Let production team start work early.
• It’s a link to preserve your ideas for use in the actual finished
product.
• In creating your storyboard, you must identify your goals?
– What is your presentation for?
• To educate?
• To sell?
• To convince?
• To inform?
• To entertain?
• Or a combination of the above?
Storyboarding 13
Reminders
• A presentation without a storyboard is
like....
Storyboarding 14
Reminders
• Storyboarding is an
element to capture and
refine ideas, not to
create them.
Storyboarding 15
How to start Storyboarding?
• With good old Pen and Paper
• Or go high tech with digital storyboard
Storyboarding 16
With good old Pen & Paper
Storyboarding 17
With good old Pen & Paper
Storyboarding 18
With good old Pen & Paper
Storyboarding 19
With good old Pen & Paper
Storyboarding 20
With good old Pen & Paper
Storyboarding 21
Or go digital...
Storyboarding 22
Or go digital...
Storyboarding 23
Or go digital...
Storyboarding 24
Storyboard Pro
Storyboarding 25
Media that Use Storyboards
• Film
• Television
• Animation
• Fiction
• Business
• Interactive Media
– Web Development
– Software Design
– Instructional Design and Technology
Storyboarding 26
Use for Story for Instructional Design
• There is no right or wrong way to
storyboard; developers and instructional
designers use a variety template and
methods. - Nicole Legault
Storyboarding 27
Anatomy of a Storyboard
Storyboarding 28
Reasons to use Storyboards
• Help a Subject Matter Expert (SME) fill in
their expert content.
– The designer can then rearrange the content
into an effective sequence.
• Can be given to a developer who will use
it as a blueprint to develop the final
product.
• Assist instructional designer in sequencing
the instruction
Storyboarding 29
Possible Elements to Include in a Storyboard
• Navigation
– GUI
– Includes the buttons needed to navigate through the program
• Audio Scripting
• Transitions
• Effects
• Voice Over
• Soundtrack
• Images
Storyboarding 30
Sample
Storyboarding 31
Types of Storyboarding
1. Passive storyboards
– Tell a story to the user.
– Consist of sketches, pictures, screen shots,
PowerPoint presentations, or sample application
outputs.
– Walks the user through the storyboard, with a
"When you do this, this happens" explanation.
2. Active storyboards
– Try to make the user see "a movie that hasn't
actually been produced yet.“
– Provide an automated description of the way the
system behaves in a typical usage or operational
scenario.
Storyboarding 32
Types of Storyboarding
3. Interactive storyboards
– Let the user experience the system in a
realistic and practical way.
– Require participation by the user.
Storyboarding 33
Storyboard Continuum
Storyboarding 34
What Storyboards Do?
• In software, storyboards are used most often to
work through the details of the human-to-machine
interface.
• In this area each user is likely to have a different
opinion of how the interface should work.
• Storyboards for user-based systems deal with the
three essential elements of any activity:
– Who the players are
– What happens to them
– How it happens
Storyboarding 35
Tools for Storyboarding
• Passive-storyboarding constructs have
been made out of tools as simple as
paper and pencil or Post-it notes.
• More advanced storyboards can be built
with presentation managers such as
PowerPoint.
• Passive, active, and user-interactive
storyboards have been built with various
packages that allow fast development of
user screens and output reports.
Storyboarding 36
Problem Solving Steps
• Understand the problem
– Create a textual description of what you are trying to
do or what story you are trying to tell
• Design a solution
– In a movie they create a storyboard to plan the movie
• Implement the solution
– Write the program code to tell the story or create the
movie
• Test the solution
– Run the animation
• Revise as needed
Storyboarding 37
Design
• Decide on the problem to be solved
• Design a solution
– We will use a storyboard design technique,
commonly used in the film industry
Storyboarding 38
Example
• The scenario is:
Princess Escape
A princess has been grounded by her father (a
wizard) and kept inside the castle. Being a
rather rebellious princess, she has emailed the
local dragon taxi service. The dragon will fly to
the princess and she will climb aboard the
dragon to escape from the castle – to meet
some friends at the village dance club.
• The problem is:
– How can we create this animation?
Storyboarding 39
Create an Initial World
Storyboarding 40
Storyboard Option 1: Sketches
Storyboarding 41
Storyboard Option 2: Screen Shots
Initial scene
The dragon is flying
towards the princess
Storyboarding 42
Storyboard Option 3: Text Form
Do in order
dragon takes off
dragon flies to princess
princess climbs on dragon's back
dragon and princess escape
knight shakes his arm (and sword) in protest
Storyboarding 43
Step 2: Implementation
• To implement the storyboard, translate the
actions in the storyboard to a program.
• Program (a.k.a. script)
– a list of instructions to have the objects
perform certain actions in the animation
Storyboarding 44
Writing the Program
Storyboarding 46
Translating the Design
• Some steps in the storyboard might
be written as a single instruction
– The robot turns to face the alien
• Other steps are composite actions
that require more than one instruction
– Let’s start with getting the dragon to
take off
Storyboarding 47
Action Blocks in Alice
Storyboarding 49
Testing
• An important step in creating a program is to run
it – to be sure it does what you expect it to do.
• We recommend that you use an incremental
development process:
• write a few lines of code and then run it
• write a few more lines and run it
• write a few more lines and run it…
– This process allows you to find any problems
and fix them as you go along.
Storyboarding 50
Comments
• While Alice instructions are easy to
understand, a particular combination of
the instructions may perform an action
that is not immediately obvious.
• Comments are used to document the
code – explain the purpose of a
particular segment of the program to
the human reader.
Storyboarding 51
Tips for Storyboarding
• Don't invest too much in a storyboard.
Storyboarding 52
Key Points
• The purpose of storyboarding is to elicit early
"Yes, But" reactions.
• Storyboards can be passive, active, or
interactive.
• Storyboards identify the players, explain what
happens to them, and describe how it happens.
• Make the storyboard sketchy, easy to modify, and
not shippable.
• Storyboard early and often on each project with
new or innovative content.
Storyboarding 53
Summary
• Storyboarding helps you design a story
• Break the action into scenes
• Break scenes into an existing method or create
a new method
– That uses existing methods
• The problem solving process is:
– Read and understand the problem or task
specification
– Design a solution (develop an algorithm)
– Implement (code)
– Test
– Revise, as needed
Storyboarding 54
References
• https://www.slideshare.net/ciellauren/storyboar
ding-1412888
• https://www.tc.columbia.edu/idesign/resources/past-wor
kshop-archive/Storyboarding-Workshop-.pdf
Storyboarding 55