Storyboard

05/03/2023 swling@mmu.edu.my 1

Storyboard Mdm Ling Siew WoeiAcademic, researcher & trainerFaculty of Creative Multimedia

05/03/2023 swling@mmu.edu.my 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 swling@mmu.edu.my 3

WHAT AND WHY OF STORYBOARD

https://www.powtoon.com/show/cTNTGK3KKmq/storyboard-members/#/

05/03/2023 swling@mmu.edu.my 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 swling@mmu.edu.my 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 swling@mmu.edu.my 6

Becomes a blueprint

05/03/2023 swling@mmu.edu.my 7

Communication

05/03/2023 swling@mmu.edu.my 8

Seven Steps

05/03/2023 swling@mmu.edu.my 9

During the process

No right; No wrong

05/03/2023 swling@mmu.edu.my 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 swling@mmu.edu.my 11

What comes before storyboard?

• Flowchart• A diagram that

shows the workflow and navigation of a user.

• http://www.gliffy.com/

05/03/2023 swling@mmu.edu.my 13

Map to flowchart activity

05/03/2023 swling@mmu.edu.my 14

Map to flowchart activity

05/03/2023 swling@mmu.edu.my 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 swling@mmu.edu.my 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 swling@mmu.edu.my 17

Grid in wireframe

05/03/2023 swling@mmu.edu.my 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 swling@mmu.edu.my 19

Web-based grid generator

• http://www.incompetech.com/graphpaper/gridlined/

05/03/2023 swling@mmu.edu.my 20

Ratio in software

• Understand the software requirement– Case: Articulate, p.59

05/03/2023 swling@mmu.edu.my 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 swling@mmu.edu.my 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 swling@mmu.edu.my 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 swling@mmu.edu.my 24

CREATING ARTEFACTSTruong, Hayes & Abowd, 2006,

05/03/2023 swling@mmu.edu.my 25

Artefacts detail

• Is the simplified version understandable?

• How do you feel about the detailed version?

05/03/2023 swling@mmu.edu.my 26

Text detail

• Would you understand the message of the pictures without caption?

05/03/2023 swling@mmu.edu.my 27

Text detail

• Short forms of text such as bubbles or short tagline captions are more effective than longer passages.

05/03/2023 swling@mmu.edu.my 28

elearning templates

• Explore on http://elearningtemplates.com/free-elearning-templates/

• Template Products> Interactions and Quizzes• Template Products> Page Layouts

05/03/2023 swling@mmu.edu.my 29

Quiz Template• http://elearning

templates.com/free-elearning-templates/

• Template Products> Interactions and Quizzes

05/03/2023 swling@mmu.edu.my 30

Page Layout Template• http://elearning

templates.com/free-elearning-templates/

• Template Products> Page Layouts>School Storyline

05/03/2023 swling@mmu.edu.my 31

Template Products> Page Layouts

05/03/2023 swling@mmu.edu.my 32

Template Products> Page Layouts

05/03/2023 swling@mmu.edu.my 33

Template Products> Page Layouts

05/03/2023 swling@mmu.edu.my 34

Template Products> Page Layouts

05/03/2023 swling@mmu.edu.my 35

Template Products> Page Layouts

05/03/2023 swling@mmu.edu.my 36

Template Products> Page Layouts

05/03/2023 swling@mmu.edu.my 37

Grid in layout

05/03/2023 swling@mmu.edu.my 38

Template Products> Page Layouts

05/03/2023 swling@mmu.edu.my 39

Grid in layout

05/03/2023 swling@mmu.edu.my 40

Template Products> Page Layouts

05/03/2023 swling@mmu.edu.my 41

Grid in layout

05/03/2023 swling@mmu.edu.my 42

Principles of Design for screen

• Gestalt design principles

Gestalt principle

• "The sum of the whole is greater than its parts”

• Extract from http://www.allgraphicdesign.com/graphicsblog/page/16

05/03/2023 swling@mmu.edu.my 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 swling@mmu.edu.my 45

Proximity

05/03/2023 swling@mmu.edu.my 46

Continuation

05/03/2023 swling@mmu.edu.my 47

Similarity

05/03/2023 swling@mmu.edu.my 48

Figure-Ground

05/03/2023 swling@mmu.edu.my 49

Closure

Icon

05/03/2023 swling@mmu.edu.my 50

DISCUSSION

05/03/2023 swling@mmu.edu.my 51

Elements by Truong, Hayes & Abowd, 2006,

05/03/2023 swling@mmu.edu.my 52

Elements by Truong, Hayes & Abowd, 2006,

05/03/2023 swling@mmu.edu.my 53

Elements by Truong, Hayes & Abowd, 2006,

05/03/2023 swling@mmu.edu.my 54

Elements by Truong, Hayes & Abowd, 2006,

05/03/2023 swling@mmu.edu.my 55

Elements by Truong, Hayes & Abowd, 2006,

http://www.floobynooby.com/pdfs/Will_Eisner-Theory_of_Comics_and_Sequential_Art.pdf

05/03/2023 swling@mmu.edu.my 56

With or without actors?

• Actors can build empathy and motivate.• Only interface monotonous.

05/03/2023 swling@mmu.edu.my 57

Translate to softcopy

• Depend on individual• Try Gliffy, Powerpoint or Storyline.

05/03/2023 swling@mmu.edu.my 58

Top ten tools

http://www.americalearningmedia.net/edicion-001/245-solutions-a-apps/3308-ten-tools-storyboarding

05/03/2023 swling@mmu.edu.my 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 swling@mmu.edu.my 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/