2. Schedule
1. What and why of storyboard
– From Flowchart
– As a Communication tool
2. How
– Manual
• The power of visual
– wireframe
– Digital
• Top ten tools
• Working environment
8/20/2015 swling@mmu.edu.my 2
3. WHAT AND WHY OF STORYBOARD
https://www.powtoon.com/show/cTNTGK3KKmq/storyboard-
members/#/
8/20/2015 swling@mmu.edu.my 3
4. Storyboard
• A story on a board
• Visual organisers
• Illustrator, montage, photographs and others
8/20/2015 swling@mmu.edu.my 4
Pre-visualise
the look and feel
of an
instructional medium
5. Positions
• Instructional
Elements
– Course content
• Table of content
• Gagne’s Information
• And others
– Assessments-
Quizzes, test and
other
– And other
• Non- Instructional
Elements
– Navigation
• Graphical User
Interface (GUI)
– Multimedia
requirement
– File naming
convention
– And others
8/20/2015 swling@mmu.edu.my 5
10. Positions ->Anatomy of a storyboard
• Instructional Design
Elements
– Course content
• Table of content
• Gagne’s Information
• And others
– Assessments-
Quizzes, test and
other
– And other
• Non- Instructional
Design Elements
– Navigation
• Graphical User
Interface (GUI)
– Multimedia
requirement
– File naming
convention
– And others
8/20/2015 swling@mmu.edu.my 10
11. What comes before storyboard?
• Flowchart
• A diagram
that shows
the workflow
and
navigation of
a user.
• http://www.gliffy.com/
8/20/2015 swling@mmu.edu.my 11
14. Discuss: Who and how to use a
storyboard?
• Role play
–Guide the Subject Matter Expert (SME) to
fill in content
–A blue print for the instructional developer
–Allow sequencing of material by the
instructional designer
8/20/2015 swling@mmu.edu.my 15
15. HOW TO CREATE A STORYBOARD
Arts in Wireframe
“storyboards must demonstrate not only the details of a
specific interface but also higher level concepts surrounding
user motivation and emotion during system use. Users
increasingly need to see and understand the context,
including the environment of use, physical embodiment of
a system, and user interactions with and reactions to
system elements. “ (Truong, Hayes & Abowd, 2006,
http://www.cs.tufts.edu/comp/150TUI/storyboarding.pdf)
8/20/2015 swling@mmu.edu.my 16
17. Wireframe of monitor resolution
• List of monitor screens
– http://www.w3schools.com/browsers/browsers_d
isplay.asp
• Check your monitor screen resolution
– http://www.whatismyscreenresolution.com/
8/20/2015 swling@mmu.edu.my 18
Steps
1. Visualise the ratio for wireframe
2. Obtain grids on the base of storyboard
3. Write a project title, date and others
19. Ratio in software
• Understand the software requirement
– Case: Articulate, p.59
8/20/2015 swling@mmu.edu.my 20
20. Weekend Task
• Produce a storyboard for the elearning
project
• Suggested guide
–Step 1: Identify the monitor resolution
–Step 2: Identify the grid through paper
folding
–Step 3: Produce storyboard elements and
artefacts
8/20/2015 swling@mmu.edu.my 21
21. Positions -> Anatomy of a storyboard
• Instructional
Elements
– Course content
• Table of content
• Gagne’s Information
• And others
– Assessments-
Quizzes, test and
other
– And other
• Non- Instructional
Elements
– Navigation
• Graphical User
Interface (GUI)
– Multimedia
requirement
– File naming
convention
– And others
8/20/2015 swling@mmu.edu.my 22
22. Discuss: Naming convention
• What information are required?
– Storyboard levels map to flowchart (L)
– Buttons label (B)
– Background (bg)
– Title (T)
• Headings (Hx)
– Total page and Page number
– Version of updates
– Image (I), Animation (A), Video (V)
– And others
8/20/2015 swling@mmu.edu.my 23
41. Principles of Design for screen
• Gestalt design principles
8/20/2015 swling@mmu.edu.my 42
42. Gestalt principle
• "The sum of the
whole is greater
than its parts”
• Extract from
http://www.allgraphicdesign.com/graphicsbl
og/page/16
43. Navigation > Gestalt design principles
• Proximity — Objects placed close together are often
perceived as a group.
• Continuation — Continuation occurs when the human eyes
follow the direction from one object to another, perceiving
separate objects as one.
• Similarity — Similar objects are often perceived as a group.
• Figure and Ground — Different shapes that are formed by
the foreground (figure) and background (ground).
• Closure — When gaps appear between shapes, people
tend to mentally close those gaps and form a perception of
a whole object.
• Source: https://yusylvia.wordpress.com/tag/gestalt/
8/20/2015 swling@mmu.edu.my 44
54. Elements by Truong, Hayes & Abowd, 2006,
8/20/2015 swling@mmu.edu.my 55
http://www.floobynooby.com/pdfs/Will_Eisner-
Theory_of_Comics_and_Sequential_Art.pdf
55. With or without actors?
• Actors can build empathy and motivate.
• Only interface monotonous.
8/20/2015 swling@mmu.edu.my 56
56. Translate to softcopy
• Depend on individual
• Try Gliffy, Powerpoint or Storyline.
8/20/2015 swling@mmu.edu.my 57
58. READ MORE; LEARN MORE
1. Recommended source:
http://www.elearninglearning.com/storyboards/
2. Kern head an innovation and design company Kern Learning
Solutions and share on the tips of creating storyboard inspired by 3
Idiots
• http://geetabose.blogspot.com/2010/01/idiots-guide-to-
storyboarding.html
3. Kern’s justification on software usage for creating storyboard
• http://archiespeaksout.blogspot.com/2011/07/storyboarding-at-
kern.html
• Connie Malamed’s method of creating a storyboard
• http://theelearningcoach.com/elearning_design/storyboards-for-
elearning/
8/20/2015 swling@mmu.edu.my 59
59. READ MORE; LEARN MORE
1. Grid related
2. 5 Common Visual Design Mistakes by Rapid E-learning blog
• http://www.articulate.com/rapid-elearning/5-common-visual-design-
mistakes/
3. Grid-based layout by Martijn van Welie
• http://www.welie.com/patterns/showPattern.php?patternID=grid-
based-layout
• http://www.scoop.it/t/rapid-elearning/?tag=960-Grid-system
• Grid creator
• http://gridcalculator.dk/
8/20/2015 swling@mmu.edu.my 60
Gestalt (pronounced ge-SHTALT) is a German word that means roughly means “shape”, “form”, “essence”, or “whole”. Gestalt psychology is based on the idea that, when the human mind perceives the world, it seeks to recognize some kind of structure or order. Specifically, the Gestalt effect suggests that, when we are presented with a complex visual image, our minds recognize coherent, whole forms, rather than individually perceiving all of the smaller constituent parts that make up the image. Refer:http://architectingusability.com/2011/05/26/using-the-gestalt-laws-of-perception-in-ui-design/