Embed Size (px)
Citation preview
05/03/2023 [email protected] 1
Storyboard Mdm Ling Siew WoeiAcademic, researcher & trainerFaculty of Creative Multimedia
05/03/2023 [email protected] 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
05/03/2023 [email protected] 3
WHAT AND WHY OF STORYBOARD
https://www.powtoon.com/show/cTNTGK3KKmq/storyboard-members/#/
05/03/2023 [email protected] 4
Storyboard
• A story on a board • Visual organisers• Illustrator, montage, photographs and others
Pre-visualise the look and feel
of an instructional medium
05/03/2023 [email protected] 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
05/03/2023 [email protected] 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
05/03/2023 [email protected] 11
What comes before storyboard?
• Flowchart• A diagram that
shows the workflow and navigation of a user.
• http://www.gliffy.com/
05/03/2023 [email protected] 15
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
05/03/2023 [email protected] 16
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)
05/03/2023 [email protected] 18
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/
Steps1. Visualise the ratio for wireframe2. Obtain grids on the base of storyboard3. Write a project title, date and others
05/03/2023 [email protected] 19
Web-based grid generator
• http://www.incompetech.com/graphpaper/gridlined/
05/03/2023 [email protected] 20
Ratio in software
• Understand the software requirement– Case: Articulate, p.59
05/03/2023 [email protected] 21
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
05/03/2023 [email protected] 22
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
05/03/2023 [email protected] 23
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
05/03/2023 [email protected] 25
Artefacts detail
• Is the simplified version understandable?
• How do you feel about the detailed version?
05/03/2023 [email protected] 26
Text detail
• Would you understand the message of the pictures without caption?
05/03/2023 [email protected] 27
Text detail
• Short forms of text such as bubbles or short tagline captions are more effective than longer passages.
05/03/2023 [email protected] 28
elearning templates
• Explore on http://elearningtemplates.com/free-elearning-templates/
• Template Products> Interactions and Quizzes• Template Products> Page Layouts
05/03/2023 [email protected] 29
Quiz Template• http://elearning
templates.com/free-elearning-templates/
• Template Products> Interactions and Quizzes
05/03/2023 [email protected] 30
Page Layout Template• http://elearning
templates.com/free-elearning-templates/
• Template Products> Page Layouts>School Storyline
Gestalt principle
• "The sum of the whole is greater than its parts”
• Extract from http://www.allgraphicdesign.com/graphicsblog/page/16
05/03/2023 [email protected] 44
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/
05/03/2023 [email protected] 55
Elements by Truong, Hayes & Abowd, 2006,
http://www.floobynooby.com/pdfs/Will_Eisner-Theory_of_Comics_and_Sequential_Art.pdf
05/03/2023 [email protected] 56
With or without actors?
• Actors can build empathy and motivate.• Only interface monotonous.
05/03/2023 [email protected] 57
Translate to softcopy
• Depend on individual• Try Gliffy, Powerpoint or Storyline.
05/03/2023 [email protected] 58
Top ten tools
http://www.americalearningmedia.net/edicion-001/245-solutions-a-apps/3308-ten-tools-storyboarding
05/03/2023 [email protected] 59
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.html3. 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/
05/03/2023 [email protected] 60
READ MORE; LEARN MORE
1. Grid related2. 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-base
d-layout• http://www.scoop.it/t/rapid-elearning/?tag=960-Grid-system• Grid creator• http://gridcalculator.dk/
