For  Instruc+onal  Design  

Storyboarding

Robert  Rector  

What is Storyboarding?

•  “Storyboards  are  visual  organizers,  typically  a  series  of  illustra+ons  displayed  in  sequence  for  the  purpose  of  pre-­‐visualizing  a  video,  web-­‐based  training,  or  interac+ve  media  sequence.”  

     – h"p://www.instruc/onaldesign.org/storyboarding.html  

The Story of Storyboarding

•  Where  did  storyboards  come  from?  

•  Walt  Disney    •  1930s  •  By  the  late  1930s  every    major  film  studio  was  using    storyboards    

Media that Use Storyboards

•  Film  •  Television  •  Anima/on  •  Fic/on  •  Business  •  Interac/ve  Media  – Web  Development  –  SoLware  Design  –  Instruc/onal  Design  and  Technology    

Use for Storyboards for Instructional Design

•  “There  is  no  right  or  wrong  way  to  storyboard;  developers  and  instruc+onal  designers  use  a  variety  of  different  templates  and  methods.”  – Nicole  Legault  

•  h"p://flir/ngwelearning.wordpress.com/  

Anatomy of a Storyboard

-­‐  hGp://flir+ngwelearning.wordpress.com  

Instructional Design Storyboard Examples!Slide 1

-­‐  hGp://flir+ngwelearning.wordpress.com  

Slide 2

-­‐  hGp://flir+ngwelearning.wordpress.com  

Slide 3

-­‐  hGp://flir+ngwelearning.wordpress.com  

Reasons to use Storyboards

– Helps  a  Subject  MaGer  Expert  (SME)  fill  in  their  expert  content.  •  The  designer  can  then  rearrange  the  content  into  an  effec+ve  sequence  

– Can  be  given  to  a  developer  who  will  use  it  as  a  blueprint  to  develop  the  final  product  

– Assists  instruc+onal  designer  in  sequencing  the  instruc+on  

Possible Elements to Include in a Storyboard

•  Naviga+on  –  GUI  (Graphical  User  Interface)  –  Includes  the  buGons  needed  to  navigate  through  the  program  

•  Course  Contents  – Must  have  a  frame  with  a  sample  of  the  Table  of  Contents,  outline  and  map  

•  Quizzes/Tes+ng  •  Audio  Scrip+ng  •  Learning  Objec+ves  •  Module  Name  

Storyboard Design Guidelines

– Make  sure  that  the  media  used  supports  the  learning  objec+ves  

– Cogni+ve  load  theory  •  For  interac+ve  media,  try  to  minimize  text  and  images  occurring  at  the  same  +me  

– Make  sure  that  quizzes  and  tes+ng  are  aligned  with  learning  objec+ves  •  Ensure  that  they  will  provide  valid  evidence  of  understanding  

Tools to Create Storyboards

•  MicrosoL  Word  – Widely  available  and  understood  soLware  – Not  easy  to  rearrange  content  

•  PowerPoint  – The  most  popular  

• Widely  known  and  understood  • Widely  available  •  Slide  Sorter  View  makes  it  easy  to  rearrange  frames    

E-Learning Authoring Tools that Benefit from

Storyboards •  Lectora  Snap  – A  PowerPoint  Add-­‐On    – hGp://lectora.com/  

•  Ar+culate  Storyline  – hGp://www.ar+culate.com/products/storyline-­‐overview.php    

•  Adobe  Cap+vate  – hGp://www.adobe.com/products/cap+vate.html  

 

E-Learning Authoring Tools that Benefit from

Storyboards

•  Celtx  –  Screenwri+ng  and  storyboarding  so\ware  –  Free!  – www.celtx.com  

   

 

Celtx Storyboarding

Sample Word Storyboard Template  

•  The  following    two  slides  show  what  a  Microso\  Word  storyboard  template  looks  like.    –  Courtesy  of  Connie  Malamed  

•  hGp://theelearningcoach.com  

•  (PowerPoint  is  recommended  over  Word,  because  it  is  easier  to  rearrange  the  sequence  of  your  content.)  

Sample PowerPoint Storyboard Template

– The  following  slide  is  a  free  template  that  you  can  use  to  create  your  own  storyboard.  •  Courtesy  of  Jeffrey  Goldman  of  MinuteBio    

•  hGp://theelearningcoach.com/  

Project  name: Date:          /    /   Screen  ID:

Media  informa5on

Naviga5on  info Screen        of  

Notes:

PowerPoint Slide Sorter View

•  It  is  easy  to  rearrange  storyboard  slides/frames  in  Slide  Sorter  View  –  a  major  advantage  of  PowerPoint  

Example of Captivate Project  

•  Following  is  an  Adobe  Cap+vate  e-­‐Learning  project  that  I  created.  

•  Cap+vate  allows  you  to  import  PowerPoint  slides,  like  many  e-­‐Learning  authoring  tools.  

•  I  wish  that  I  had  known  more  about  storyboarding  when  I  made  this.  

•  (Nerdy,  over-­‐the-­‐top  narra+on  intended!)  

Captivate Project – Robert Rector  

•  hGp://robert-­‐rector.com/projects.html  

•  This  is  my  pordolio  of  Instruc+onal  Tech  projects.    – Go  to  the  Open  Office  Impress  project.  

•  You  don’t  have  to  watch  the  whole  video,  but  think  about  how  storyboarding  makes  e-­‐Learning  authoring  easier.  (Again,  I  wish  I  had  known  more!)  

•  In  par+cular,  think  about  branching  points,  and  how  storyboarding  can  help  the  designer  organize  them  more  effec+vely.  

Now it Is Time to Create Our Own Storyboard  

•  Using  the  PowerPoint  storyboard  template  in  the  previous  slide,  let’s  create  our  own  storyboard!  

•  Download  the  template  here.  –  It  is  the  third  one  –  “Visual  Storyboard  2”.  

•  Think  about  a  learning  outcome  that  you  think  would  be  achieved  with  e-­‐Learning,  and  create  a  few  storyboard  frames!  

•  Be  crea+ve  and  enjoy!  

Thank you for coming to the workshop, and enjoy your

storyboarding!!!