Storyboarding

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

–A cart without a horse.

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

• A textual storyboard is like a "to-do" list.

• The Learning to Program in Alice textbook
puts a textual storyboard in a box:

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

• Our planned storyboard (to-do list) is:

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

• The idea now is to translate the

design steps to program instructions.
Storyboarding 45
Traditional Problem Solving in CS
• Read and understand the problem or task
specification
• Design a solution (develop an algorithm)
• Implement (code)
• Test
• Revise, as needed

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

Sequential Action Block

Simultaneous Action Block

Storyboarding 48
Dragon Takes Off Method
• We want the dragon to move up and flap
its wings at the same time
• Later when the dragon flies to the princess
we will want it to move forward and flap its
wings
• We should create a flag wings method to
use in both of these steps

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.

• If you don't change anything, you don't

learn anything..
• Don't make the storyboard too functional.

• Whenever possible, make the storyboard

interactive.

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