Downloaded 46 times
Uploaded byLing Siew Woei
Storyboard
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.
More Related Content
More from Ling Siew Woei
Storyboard
- 1. Mdm Ling SiewWoei Academic, researcher & trainer Faculty of Creative Multimedia 8/20/2015 swling@mmu.edu.my 1
- 2. Schedule 1. What andwhy 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 WHYOF STORYBOARD https://www.powtoon.com/show/cTNTGK3KKmq/storyboard- members/#/ 8/20/2015 swling@mmu.edu.my 3
- 4. Storyboard • A storyon 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 – Coursecontent • 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/2015swling@mmu.edu.my 6
- 7.
- 8.
- 9. During the process 8/20/2015swling@mmu.edu.my 9 No right; No wrong
- 10. Positions ->Anatomy ofa 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 beforestoryboard? • 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 flowchartactivity 8/20/2015 swling@mmu.edu.my 13
- 13. Map to flowchartactivity 8/20/2015 swling@mmu.edu.my 14
- 14. Discuss: Who andhow 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 CREATEA 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/2015swling@mmu.edu.my 17
- 17. Wireframe of monitorresolution • 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 • Producea 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 -> Anatomyof 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.my25 • Is the simplified version understandable? • How do you feel about the detailed version?
- 25. Text detail 8/20/2015 swling@mmu.edu.my26 • Would you understand the message of the pictures without caption?
- 26. Text detail 8/20/2015 swling@mmu.edu.my27 • Short forms of text such as bubbles or short tagline captions are more effective than longer passages.
- 27. elearning templates • Exploreon 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> PageLayouts 8/20/2015 swling@mmu.edu.my 31
- 31. Template Products> PageLayouts 8/20/2015 swling@mmu.edu.my 32
- 32. Template Products> PageLayouts 8/20/2015 swling@mmu.edu.my 33
- 33. Template Products> PageLayouts 8/20/2015 swling@mmu.edu.my 34
- 34. Template Products> PageLayouts 8/20/2015 swling@mmu.edu.my 35
- 35. Template Products> PageLayouts 8/20/2015 swling@mmu.edu.my 36
- 36. Grid in layout 8/20/2015swling@mmu.edu.my 37
- 37. Template Products> PageLayouts 8/20/2015 swling@mmu.edu.my 38
- 38. Grid in layout 8/20/2015swling@mmu.edu.my 39
- 39. Template Products> PageLayouts 8/20/2015 swling@mmu.edu.my 40
- 40. Grid in layout 8/20/2015swling@mmu.edu.my 41
- 41. Principles of Designfor screen • Gestalt design principles 8/20/2015 swling@mmu.edu.my 42
- 42. Gestalt principle • "Thesum of the whole is greater than its parts” • Extract from http://www.allgraphicdesign.com/graphicsbl og/page/16
- 43. Navigation > Gestaltdesign 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.
- 45.
- 46.
- 47.
- 48.
- 49.
- 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 withoutactors? • 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.
- 58. READ MORE; LEARNMORE 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; LEARNMORE 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
Editor's Notes
- #43 https://yusylvia.files.wordpress.com/2010/03/gestalt_illustration-01.jpg
- #44 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/
- #45 https://yusylvia.files.wordpress.com/2010/03/gestalt_illustration-01.jpg
- #46 http://www.slideshare.net/gchristo94/gestalt-principles-of-design
- #47 http://www.slideshare.net/gchristo94/gestalt-principles-of-design
- #48 http://www.slideshare.net/gchristo94/gestalt-principles-of-design
- #49 http://www.slideshare.net/gchristo94/gestalt-principles-of-design
- #50 http://www.slideshare.net/gchristo94/gestalt-principles-of-design
- #59 http://mayraixavillar.wordpress.com/2012/11/05/10-great-tools-for-storyboarding/