BUILDING
INTERACTIVE
STORIES
Bjarke Myrthu, Storyplanet.com
CORE ELEMENTS OF A STORY


IDEA: MESSAGE, PURPOSE, SOURCES, FORMAT, CHANNELS
ASSETS: PHOTO, VIDEO, AUDIO, TEXT, GRAPHICS
STRUCTURE: STORYLINE, FUNCTIONALITY
DESIGN: VISUAL IDENTITY, LAYOUT
TAKEAWAY



 »TODAY YOU WILL DEVELOP AN IDEA AND
 BUILD A PAPER PROTOTYPE CONSISTING OF
 A STORY-GRID AND WIREFRAMES«
THE IDEA
IT STARTS WITH QUESTIONS


WHY IS IT IMPORTANT FOR THE WORLD?
WHAT IS THE GENERAL AND SPECIFIC STORY?
WHAT ARE THE AUDIO AND VISUAL OPTIONS?
WHAT HAS BEEN DONE BEFORE?
WHY IS MY ANGLE SURPRISING?
DOES IT HOOK ONTO CURRENT EVENTS?
WHO CAN TELL THE STORY?
ASSIGNMENT




  FIND AN IDEA...NEW OR AN EXISTING ONE
ASSETS
WHAT ARE THE STRENGTHS AND
WEAKNESSES OF DIFFERENT MEDIA TYPES?
PHOTOS
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
OBSERVATIONS:


THE POWER OF THE DECISIVE MOMENT
MAKES YOUR IMAGINATION FILL IN THE BLANKS
CAN ILLUSTRATE SYMBOLIC ELEMENTS
CAN CREATE BALANCE AND CALMNESS
DON’T NEED TRANSLATION
»TAKING PHOTOGRAPHS IS EASY - JUST
READ THE INSTRUCTIONS ON THE BOX«
                       Elliott Erwitt
VIDEO
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
OBSERVATIONS:


GOOD FOR DOCUMENTING FACTS
GREAT FOR SHOWING REACTIONS AND EMOTIONS
CAN TAKE AWAY THE IMAGINATION
TAKES A LOT OF RESOURCES TO PRODUCE
AUDIO
RECOGNIZE THIS?
WHAT ABOUT THIS?
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
OBSERVATIONS:


GREAT FOR SETTING THE MOOD
CREATES RYTHM AND ACTS AS A MOTOR
GOOD FOR FILLING IN VISUAL GAPS
TIES SEGMENTS OF A STORY TOGETHER (SPEAKS)
CAN WORK IN THE BACKGROUND
TEXT
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
OBSERVATIONS:


GREAT FOR FACTUAL INFORMATION
GREAT FOR IN DEPT EXPLANATIONS
CAN BE USED AS A VISUAL BREAKER
TAKES LITTLE RESOURCE TO PRODUCE
GRAPHICS
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
OBSERVATIONS:


CAN PROVIDE OVERVIEW OF INFORMATION
CAN ADD ANOTHER LAYER TO VISUALS
CAN BE USED AS AN INTERFACE
DESIGN
THE VISUAL FRAMEWORK & LAYOUT
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop
OBSERVATIONS:


EXPOSES THE DNA OF THE STORY
CREATES COHERENCE THROUGHOUT THE STORY
HELPS THE USER GET TO THE RIGHT CONTENT
STRUCTURE
HOW IS THE STRUCTURE AND FLOW OF THE
STORY? HOW DOES THE USER ENGAGE?
Linear:




Side branches:        Multiple directions:
INTERACTIVE NARRATIVE
www.stormingjuno.com
LINEAR MOVIE
One in 8 Million
PAGE BASED MAGAZINE
Inquiring Mind Magazine
USER DIRECTED
A different ending
USER DIRECTED
The Taubman Museum
Building Interactive Stories Miniworkshop
ASSIGNMENT


 WIREFRAMES: COVER, SUB PAGES,
 TEMPLATES, FUNCTIONALITY
960 GRID SYSTEM
960 GRID SYSTEM

A SMALL TITLE:
A MAIN TITLE
GOES HERE
Feugait vel delenit ipsum elit vero    Feugait vel delenit ipsum elit vero
eum ut feugait dolor wisi ea           eum ut feugait dolor wisi ea
consequatvel. Molestie esse            consequatvel. Molestie esse
molestie facilisi dolore qui erat,     molestie facilisi dolore qui erat,
odio velit dolor molestie autem        odio velit dolor molestie autem
enim, eum illum nisl molestie.         enim, eum illum nisl molestie.
Delenit nisl vel. Esse dolore at,      Delenit nisl vel. Esse dolore at,
iriure ut commodo ad lorem             iriure ut commodo ad lorem
dignissim qui ut praesent velit nisl   dignissim qui ut praesent velit nisl
commodo amet. Commodo                  commodo amet. Commodo
nonummy delenit adipiscing             nonummy delenit adipiscing
veniam eu, nostrud dolore              veniam eu, nostrud dolore
molestie ipsum crisare. In duis,       molestie ipsum crisare. In duis,
dignissim facilisi feugait et illum    dignissim facilisi feugait et illum
duis, odio blandit erat aliquip        duis, odio blandit erat aliquip
volutpat ea velit.
    Nulla in sciurus erat facilisis
                                       volutpat ea velit.
                                                                              Feugait vel delenit ipsum elit vero eum ut
                                           Nulla in sciurus erat facilisis
tincidunt, in aliquam wisi blandit     tincidunt, in aliquam wisi blandit     feugait dolor wisi ea consequatvel. Molestie
sit elit. Hendrerit iusto wisi et      sit elit. Hendrerit iusto wisi et      esse molestie facilisi dolore qui erat,
delenit feugait ullamcorper            delenit feugait ullamcorper
THE GREAT STORY
    This is an introduction to the story and what it’s about




     1
                                             3


      2

1: Main video will be playing when entering
2: Bottom teasers for content
3. “Watch” button - will start story
Building Interactive Stories Miniworkshop
Building Interactive Stories Miniworkshop

More Related Content

PPTX
Genre conventions in film openings
PPTX
Conventions of an Opening Sequence - Alessia Mezzela and Usama Niazi
PPTX
Uses and Gratifications Theory
PPTX
Uses and Gratifications t
PPTX
Research into horror_films_and_codal_analysis
DOCX
Evaluation Question 1
PPTX
Research into horror_films_and_codal_analysis final
PPTX
Mood board
Genre conventions in film openings
Conventions of an Opening Sequence - Alessia Mezzela and Usama Niazi
Uses and Gratifications Theory
Uses and Gratifications t
Research into horror_films_and_codal_analysis
Evaluation Question 1
Research into horror_films_and_codal_analysis final
Mood board

Viewers also liked (20)

PDF
Getting Started With Sketchnoting
PDF
Practical Sketchnoting
PDF
Digital Sketchnotes 101
PDF
Sketchnoting: 10 Tips to get Started
PDF
2 Step Sketchnotes
PDF
Organizing Sketchnotes — MidwestUX 2012
PDF
Sketchnote Collection 1 - Sacha Chua
PPTX
Sketchnoting for beginners #LW2016
PDF
Let's Sketchnote — MidwestUX 2012
PDF
SKETCHNOTING IN EDUCATION: THE BEST PRACTICES, BENEFITS AND HOW-TO’S OF SKETC...
PDF
Sketchnote Workshop Deck: That Conference 2013
PPTX
Creative Mornings San Diego 2016
PDF
Why and How to Start Sketchnoting, IA Summit 2012
PPTX
Social Media Marketing World Sketchnotes – #smmw15
PDF
See->Sort->Sketch : Pen & Paper Tools to get from Research to Design : IA Sum...
PDF
Sketchnoting FOR Learning
PDF
Hashtag Strategies Manifesto And How To Apply Them.
PDF
Sketchnote Mini-Workshop: DSGNDAY 2014
PDF
15 Pinterest Strategy Tips To Get Your Pins Go Viral. via @annazubarev
PDF
The Sketchnote Mini-Workshop
Getting Started With Sketchnoting
Practical Sketchnoting
Digital Sketchnotes 101
Sketchnoting: 10 Tips to get Started
2 Step Sketchnotes
Organizing Sketchnotes — MidwestUX 2012
Sketchnote Collection 1 - Sacha Chua
Sketchnoting for beginners #LW2016
Let's Sketchnote — MidwestUX 2012
SKETCHNOTING IN EDUCATION: THE BEST PRACTICES, BENEFITS AND HOW-TO’S OF SKETC...
Sketchnote Workshop Deck: That Conference 2013
Creative Mornings San Diego 2016
Why and How to Start Sketchnoting, IA Summit 2012
Social Media Marketing World Sketchnotes – #smmw15
See->Sort->Sketch : Pen & Paper Tools to get from Research to Design : IA Sum...
Sketchnoting FOR Learning
Hashtag Strategies Manifesto And How To Apply Them.
Sketchnote Mini-Workshop: DSGNDAY 2014
15 Pinterest Strategy Tips To Get Your Pins Go Viral. via @annazubarev
The Sketchnote Mini-Workshop
Ad

Similar to Building Interactive Stories Miniworkshop (20)

PPT
5030 Digitalstorytelling Mediatypes Storyboarding Feb 05 09ppt
PPT
5030 Digital Story Telling Media Types Story Boarding February 28 08
PDF
Elements of good multimedia story telling
PPTX
Jour 3340 March 9 2010 Convergence
PPTX
Jour203 Week1 Introduction to Multimedia
PPTX
AAM 2014: Tech Tutorial: Principles of Effective Video
PDF
The Importance of Storytelling in Web Design, WordCamp Miami 2013
PPTX
Telling the Story
PDF
StoryScaping(tm) Short Version
PPTX
Building Storyworlds - lecture from 9.12.12 class
PPTX
Workshop 4 - Storytelling with digital video (PPT)
PDF
Design Stories Are The New User Stories
PDF
Edward segel interactive_storytelling
PDF
Interactive Journalism - What is a Story? - Science Po
PDF
Designing Around Storytelling - Digital Pond, London 06 Feb 2014
PPTX
Power point basics content-1
PDF
Multimedia Planning
PPTX
Intro to multimedia 2014 4
PPT
Storyboarding
PDF
Digital Storytelling New Generation
5030 Digitalstorytelling Mediatypes Storyboarding Feb 05 09ppt
5030 Digital Story Telling Media Types Story Boarding February 28 08
Elements of good multimedia story telling
Jour 3340 March 9 2010 Convergence
Jour203 Week1 Introduction to Multimedia
AAM 2014: Tech Tutorial: Principles of Effective Video
The Importance of Storytelling in Web Design, WordCamp Miami 2013
Telling the Story
StoryScaping(tm) Short Version
Building Storyworlds - lecture from 9.12.12 class
Workshop 4 - Storytelling with digital video (PPT)
Design Stories Are The New User Stories
Edward segel interactive_storytelling
Interactive Journalism - What is a Story? - Science Po
Designing Around Storytelling - Digital Pond, London 06 Feb 2014
Power point basics content-1
Multimedia Planning
Intro to multimedia 2014 4
Storyboarding
Digital Storytelling New Generation
Ad

Recently uploaded (20)

PPTX
Lagura-Gender & Developmentkmkmkmkmkmk.pptx
PDF
Himalayan Nature and Tibetan Buddhist Culture in Arunachal -- Kazuharu Mizuno...
PPTX
Yellow-Colorful-Playful-Surrealism-Art-Presentation.pptx
PPT
Minyak 09-01 pendahuddddddddddddluan.ppt
PPTX
PRACTICAL_RESEARCH_2_Q1_WEEK_11_PR2.pptx
PPTX
Camera Mode DSLR Camera mode and its function
PDF
Annah la Javanaise_ The Truth Behind Gauguin’s Model.pdf
PDF
INSEAD_Executive_Education_At-A-Glance.pdf
PPTX
Classification of human activities.pptx ankit
PDF
AIRPORT PLANNING PATAN GUJARAT HUVGFCCJIG
PDF
2_Lesson-1_Mathematical-Language-art.pdf
PPTX
unit 2 Bzc zxxzxz zxxzvzxv zv zvx iodiversity.pptx
PPT
huyfuygkgkugi iyugib jiygi uyuyguygv uyguyv
PPTX
SOCSCI-III-XI-SIRIUS.pptxaaaaaaaaaaaaaaa
PPT
Postmodernism In Post-World War IIEurope.ppt
PPTX
opp research this is good for field research
PPTX
Indian Knowledge System . More information in the Indiaa
PDF
bell hooks - Black Looks_ Race and Representation -South End Press (1999).pdf
PPTX
arts-history-and-development-week-7.1.pptx
PPTX
community ophthalmology jwuhwwj usuhwhushhwyw
Lagura-Gender & Developmentkmkmkmkmkmk.pptx
Himalayan Nature and Tibetan Buddhist Culture in Arunachal -- Kazuharu Mizuno...
Yellow-Colorful-Playful-Surrealism-Art-Presentation.pptx
Minyak 09-01 pendahuddddddddddddluan.ppt
PRACTICAL_RESEARCH_2_Q1_WEEK_11_PR2.pptx
Camera Mode DSLR Camera mode and its function
Annah la Javanaise_ The Truth Behind Gauguin’s Model.pdf
INSEAD_Executive_Education_At-A-Glance.pdf
Classification of human activities.pptx ankit
AIRPORT PLANNING PATAN GUJARAT HUVGFCCJIG
2_Lesson-1_Mathematical-Language-art.pdf
unit 2 Bzc zxxzxz zxxzvzxv zv zvx iodiversity.pptx
huyfuygkgkugi iyugib jiygi uyuyguygv uyguyv
SOCSCI-III-XI-SIRIUS.pptxaaaaaaaaaaaaaaa
Postmodernism In Post-World War IIEurope.ppt
opp research this is good for field research
Indian Knowledge System . More information in the Indiaa
bell hooks - Black Looks_ Race and Representation -South End Press (1999).pdf
arts-history-and-development-week-7.1.pptx
community ophthalmology jwuhwwj usuhwhushhwyw

Building Interactive Stories Miniworkshop

  • 2. CORE ELEMENTS OF A STORY IDEA: MESSAGE, PURPOSE, SOURCES, FORMAT, CHANNELS ASSETS: PHOTO, VIDEO, AUDIO, TEXT, GRAPHICS STRUCTURE: STORYLINE, FUNCTIONALITY DESIGN: VISUAL IDENTITY, LAYOUT
  • 3. TAKEAWAY »TODAY YOU WILL DEVELOP AN IDEA AND BUILD A PAPER PROTOTYPE CONSISTING OF A STORY-GRID AND WIREFRAMES«
  • 5. IT STARTS WITH QUESTIONS WHY IS IT IMPORTANT FOR THE WORLD? WHAT IS THE GENERAL AND SPECIFIC STORY? WHAT ARE THE AUDIO AND VISUAL OPTIONS? WHAT HAS BEEN DONE BEFORE? WHY IS MY ANGLE SURPRISING? DOES IT HOOK ONTO CURRENT EVENTS? WHO CAN TELL THE STORY?
  • 6. ASSIGNMENT FIND AN IDEA...NEW OR AN EXISTING ONE
  • 7. ASSETS WHAT ARE THE STRENGTHS AND WEAKNESSES OF DIFFERENT MEDIA TYPES?
  • 15. OBSERVATIONS: THE POWER OF THE DECISIVE MOMENT MAKES YOUR IMAGINATION FILL IN THE BLANKS CAN ILLUSTRATE SYMBOLIC ELEMENTS CAN CREATE BALANCE AND CALMNESS DON’T NEED TRANSLATION
  • 16. »TAKING PHOTOGRAPHS IS EASY - JUST READ THE INSTRUCTIONS ON THE BOX« Elliott Erwitt
  • 17. VIDEO
  • 22. OBSERVATIONS: GOOD FOR DOCUMENTING FACTS GREAT FOR SHOWING REACTIONS AND EMOTIONS CAN TAKE AWAY THE IMAGINATION TAKES A LOT OF RESOURCES TO PRODUCE
  • 23. AUDIO
  • 28. OBSERVATIONS: GREAT FOR SETTING THE MOOD CREATES RYTHM AND ACTS AS A MOTOR GOOD FOR FILLING IN VISUAL GAPS TIES SEGMENTS OF A STORY TOGETHER (SPEAKS) CAN WORK IN THE BACKGROUND
  • 29. TEXT
  • 33. OBSERVATIONS: GREAT FOR FACTUAL INFORMATION GREAT FOR IN DEPT EXPLANATIONS CAN BE USED AS A VISUAL BREAKER TAKES LITTLE RESOURCE TO PRODUCE
  • 39. OBSERVATIONS: CAN PROVIDE OVERVIEW OF INFORMATION CAN ADD ANOTHER LAYER TO VISUALS CAN BE USED AS AN INTERFACE
  • 46. OBSERVATIONS: EXPOSES THE DNA OF THE STORY CREATES COHERENCE THROUGHOUT THE STORY HELPS THE USER GET TO THE RIGHT CONTENT
  • 47. STRUCTURE HOW IS THE STRUCTURE AND FLOW OF THE STORY? HOW DOES THE USER ENGAGE?
  • 48. Linear: Side branches: Multiple directions:
  • 50. LINEAR MOVIE One in 8 Million
  • 55. ASSIGNMENT WIREFRAMES: COVER, SUB PAGES, TEMPLATES, FUNCTIONALITY
  • 57. 960 GRID SYSTEM A SMALL TITLE: A MAIN TITLE GOES HERE Feugait vel delenit ipsum elit vero Feugait vel delenit ipsum elit vero eum ut feugait dolor wisi ea eum ut feugait dolor wisi ea consequatvel. Molestie esse consequatvel. Molestie esse molestie facilisi dolore qui erat, molestie facilisi dolore qui erat, odio velit dolor molestie autem odio velit dolor molestie autem enim, eum illum nisl molestie. enim, eum illum nisl molestie. Delenit nisl vel. Esse dolore at, Delenit nisl vel. Esse dolore at, iriure ut commodo ad lorem iriure ut commodo ad lorem dignissim qui ut praesent velit nisl dignissim qui ut praesent velit nisl commodo amet. Commodo commodo amet. Commodo nonummy delenit adipiscing nonummy delenit adipiscing veniam eu, nostrud dolore veniam eu, nostrud dolore molestie ipsum crisare. In duis, molestie ipsum crisare. In duis, dignissim facilisi feugait et illum dignissim facilisi feugait et illum duis, odio blandit erat aliquip duis, odio blandit erat aliquip volutpat ea velit. Nulla in sciurus erat facilisis volutpat ea velit. Feugait vel delenit ipsum elit vero eum ut Nulla in sciurus erat facilisis tincidunt, in aliquam wisi blandit tincidunt, in aliquam wisi blandit feugait dolor wisi ea consequatvel. Molestie sit elit. Hendrerit iusto wisi et sit elit. Hendrerit iusto wisi et esse molestie facilisi dolore qui erat, delenit feugait ullamcorper delenit feugait ullamcorper
  • 58. THE GREAT STORY This is an introduction to the story and what it’s about 1 3 2 1: Main video will be playing when entering 2: Bottom teasers for content 3. “Watch” button - will start story