The document provides guidance on creating storyboards for instructional design. It discusses that storyboards can be used as a communication tool and blueprint for multimedia projects. It recommends beginning with a flowchart to map out the workflow and navigation before creating the storyboard. The document then covers how to create storyboards manually with grids and digitally using various tools. It also discusses including essential instructional and non-instructional elements, as well as tips for visual design principles and naming conventions.

1. Mdm Ling Siew Woei
Academic, researcher & trainer
Faculty of Creative Multimedia
8/20/2015 swling@mmu.edu.my 1

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

6. Becomes a blueprint
8/20/2015 swling@mmu.edu.my 6

7. Communication
8/20/2015 swling@mmu.edu.my 7

8. Seven Steps
8/20/2015 swling@mmu.edu.my 8

9. During the process
8/20/2015 swling@mmu.edu.my 9
No right; No wrong

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

12. Map to flowchart activity
8/20/2015 swling@mmu.edu.my 13

13. Map to flowchart activity
8/20/2015 swling@mmu.edu.my 14

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

16. Grid in wireframe
8/20/2015 swling@mmu.edu.my 17

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

18. Web-based grid generator
• http://www.inc
ompetech.com/
graphpaper/gri
dlined/
8/20/2015 swling@mmu.edu.my 19

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

23. CREATING ARTEFACTS
Truong, Hayes & Abowd, 2006,
8/20/2015 swling@mmu.edu.my 24

24. Artefacts detail
8/20/2015 swling@mmu.edu.my 25
• Is the simplified
version
understandable?
• How do you feel
about the detailed
version?

25. Text detail
8/20/2015 swling@mmu.edu.my 26
• Would you understand the message of the
pictures without caption?

26. Text detail
8/20/2015 swling@mmu.edu.my 27
• Short forms of text such as bubbles or short
tagline captions are more effective than
longer passages.

27. elearning templates
• Explore on
http://elearningtemplates.com/free-
elearning-templates/
• Template Products> Interactions and Quizzes
• Template Products> Page Layouts
8/20/2015 swling@mmu.edu.my 28

28. Quiz Template
• http://elearning
templates.com/f
ree-elearning-
templates/
• Template
Products>
Interactions and
Quizzes
8/20/2015 swling@mmu.edu.my 29

29. Page Layout Template
• http://elearning
templates.com/f
ree-elearning-
templates/
• Template
Products> Page
Layouts>School
Storyline
8/20/2015 swling@mmu.edu.my 30

30. Template Products> Page Layouts
8/20/2015 swling@mmu.edu.my 31

31. Template Products> Page Layouts
8/20/2015 swling@mmu.edu.my 32

32. Template Products> Page Layouts
8/20/2015 swling@mmu.edu.my 33

33. Template Products> Page Layouts
8/20/2015 swling@mmu.edu.my 34

34. Template Products> Page Layouts
8/20/2015 swling@mmu.edu.my 35

35. Template Products> Page Layouts
8/20/2015 swling@mmu.edu.my 36

36. Grid in layout
8/20/2015 swling@mmu.edu.my 37

37. Template Products> Page Layouts
8/20/2015 swling@mmu.edu.my 38

38. Grid in layout
8/20/2015 swling@mmu.edu.my 39

39. Template Products> Page Layouts
8/20/2015 swling@mmu.edu.my 40

40. Grid in layout
8/20/2015 swling@mmu.edu.my 41

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

44. Proximity
8/20/2015 swling@mmu.edu.my 45

45. Continuation
8/20/2015 swling@mmu.edu.my 46

46. Similarity
8/20/2015 swling@mmu.edu.my 47

47. Figure-Ground
8/20/2015 swling@mmu.edu.my 48

48. Closure
8/20/2015 swling@mmu.edu.my 49
Icon

49. DISCUSSION
8/20/2015 swling@mmu.edu.my 50

50. Elements by Truong, Hayes & Abowd, 2006,
8/20/2015 swling@mmu.edu.my 51

51. Elements by Truong, Hayes & Abowd, 2006,
8/20/2015 swling@mmu.edu.my 52

52. Elements by Truong, Hayes & Abowd, 2006,
8/20/2015 swling@mmu.edu.my 53

53. Elements by Truong, Hayes & Abowd, 2006,
8/20/2015 swling@mmu.edu.my 54

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

57. Top ten tools
http://www.americalearningmedia.net/edicion-
001/245-solutions-a-apps/3308-ten-tools-
storyboarding
8/20/2015 swling@mmu.edu.my 58

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