Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Storyboard

732 views

Published on

Creating a storyboard for elearning project.

Published in: Education
  • Be the first to comment

Storyboard

  1. 1. Mdm Ling Siew Woei Academic, researcher & trainer Faculty of Creative Multimedia 8/20/2015 swling@mmu.edu.my 1
  2. 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. 3. WHAT AND WHY OF STORYBOARD https://www.powtoon.com/show/cTNTGK3KKmq/storyboard- members/#/ 8/20/2015 swling@mmu.edu.my 3
  4. 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. 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. 6. Becomes a blueprint 8/20/2015 swling@mmu.edu.my 6
  7. 7. Communication 8/20/2015 swling@mmu.edu.my 7
  8. 8. Seven Steps 8/20/2015 swling@mmu.edu.my 8
  9. 9. During the process 8/20/2015 swling@mmu.edu.my 9 No right; No wrong
  10. 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. 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. 12. Map to flowchart activity 8/20/2015 swling@mmu.edu.my 13
  13. 13. Map to flowchart activity 8/20/2015 swling@mmu.edu.my 14
  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. 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. 16. Grid in wireframe 8/20/2015 swling@mmu.edu.my 17
  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. 18. Web-based grid generator • http://www.inc ompetech.com/ graphpaper/gri dlined/ 8/20/2015 swling@mmu.edu.my 19
  19. 19. Ratio in software • Understand the software requirement – Case: Articulate, p.59 8/20/2015 swling@mmu.edu.my 20
  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. 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. 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. 23. CREATING ARTEFACTS Truong, Hayes & Abowd, 2006, 8/20/2015 swling@mmu.edu.my 24
  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. 25. Text detail 8/20/2015 swling@mmu.edu.my 26 • Would you understand the message of the pictures without caption?
  26. 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. 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. 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. 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. 30. Template Products> Page Layouts 8/20/2015 swling@mmu.edu.my 31
  31. 31. Template Products> Page Layouts 8/20/2015 swling@mmu.edu.my 32
  32. 32. Template Products> Page Layouts 8/20/2015 swling@mmu.edu.my 33
  33. 33. Template Products> Page Layouts 8/20/2015 swling@mmu.edu.my 34
  34. 34. Template Products> Page Layouts 8/20/2015 swling@mmu.edu.my 35
  35. 35. Template Products> Page Layouts 8/20/2015 swling@mmu.edu.my 36
  36. 36. Grid in layout 8/20/2015 swling@mmu.edu.my 37
  37. 37. Template Products> Page Layouts 8/20/2015 swling@mmu.edu.my 38
  38. 38. Grid in layout 8/20/2015 swling@mmu.edu.my 39
  39. 39. Template Products> Page Layouts 8/20/2015 swling@mmu.edu.my 40
  40. 40. Grid in layout 8/20/2015 swling@mmu.edu.my 41
  41. 41. Principles of Design for screen • Gestalt design principles 8/20/2015 swling@mmu.edu.my 42
  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. 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. 44. Proximity 8/20/2015 swling@mmu.edu.my 45
  45. 45. Continuation 8/20/2015 swling@mmu.edu.my 46
  46. 46. Similarity 8/20/2015 swling@mmu.edu.my 47
  47. 47. Figure-Ground 8/20/2015 swling@mmu.edu.my 48
  48. 48. Closure 8/20/2015 swling@mmu.edu.my 49 Icon
  49. 49. DISCUSSION 8/20/2015 swling@mmu.edu.my 50
  50. 50. Elements by Truong, Hayes & Abowd, 2006, 8/20/2015 swling@mmu.edu.my 51
  51. 51. Elements by Truong, Hayes & Abowd, 2006, 8/20/2015 swling@mmu.edu.my 52
  52. 52. Elements by Truong, Hayes & Abowd, 2006, 8/20/2015 swling@mmu.edu.my 53
  53. 53. Elements by Truong, Hayes & Abowd, 2006, 8/20/2015 swling@mmu.edu.my 54
  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. 55. With or without actors? • Actors can build empathy and motivate. • Only interface monotonous. 8/20/2015 swling@mmu.edu.my 56
  56. 56. Translate to softcopy • Depend on individual • Try Gliffy, Powerpoint or Storyline. 8/20/2015 swling@mmu.edu.my 57
  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. 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. 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

×