of 60 /60
BUILDING INTERACTIVE STORIES Bjarke Myrthu, Storyplanet.com

Building Interactive Stories Miniworkshop

Embed Size (px)

DESCRIPTION

A mini workshop I did about interactive storytelling in september 2011 as part of the Photostories event at Noorderlicht photo festival in the Netherlands.

Citation preview

Page 1: Building Interactive Stories Miniworkshop

BUILDINGINTERACTIVESTORIESBjarke Myrthu, Storyplanet.com

Page 2: Building Interactive Stories Miniworkshop

CORE ELEMENTS OF A STORY

IDEA: MESSAGE, PURPOSE, SOURCES, FORMAT, CHANNELSASSETS: PHOTO, VIDEO, AUDIO, TEXT, GRAPHICSSTRUCTURE: STORYLINE, FUNCTIONALITYDESIGN: VISUAL IDENTITY, LAYOUT

Page 3: Building Interactive Stories Miniworkshop

TAKEAWAY

»TODAY YOU WILL DEVELOP AN IDEA AND BUILD A PAPER PROTOTYPE CONSISTING OF A STORY-GRID AND WIREFRAMES«

Page 4: Building Interactive Stories Miniworkshop

THE IDEA

Page 5: Building Interactive Stories Miniworkshop

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?

Page 6: Building Interactive Stories Miniworkshop

ASSIGNMENT

FIND AN IDEA...NEW OR AN EXISTING ONE

Page 7: Building Interactive Stories Miniworkshop

ASSETSWHAT ARE THE STRENGTHS AND WEAKNESSES OF DIFFERENT MEDIA TYPES?

Page 8: Building Interactive Stories Miniworkshop

PHOTOS

Page 9: Building Interactive Stories Miniworkshop
Page 10: Building Interactive Stories Miniworkshop
Page 11: Building Interactive Stories Miniworkshop
Page 12: Building Interactive Stories Miniworkshop
Page 13: Building Interactive Stories Miniworkshop
Page 14: Building Interactive Stories Miniworkshop
Page 15: Building Interactive Stories Miniworkshop

OBSERVATIONS:

THE POWER OF THE DECISIVE MOMENTMAKES YOUR IMAGINATION FILL IN THE BLANKSCAN ILLUSTRATE SYMBOLIC ELEMENTSCAN CREATE BALANCE AND CALMNESSDON’T NEED TRANSLATION

Page 16: Building Interactive Stories Miniworkshop

»TAKING PHOTOGRAPHS IS EASY - JUST READ THE INSTRUCTIONS ON THE BOX«

Elliott Erwitt

Page 17: Building Interactive Stories Miniworkshop

VIDEO

Page 18: Building Interactive Stories Miniworkshop
Page 19: Building Interactive Stories Miniworkshop
Page 20: Building Interactive Stories Miniworkshop
Page 21: Building Interactive Stories Miniworkshop
Page 22: Building Interactive Stories Miniworkshop

OBSERVATIONS:

GOOD FOR DOCUMENTING FACTSGREAT FOR SHOWING REACTIONS AND EMOTIONSCAN TAKE AWAY THE IMAGINATIONTAKES A LOT OF RESOURCES TO PRODUCE

Page 23: Building Interactive Stories Miniworkshop

AUDIO

Page 24: Building Interactive Stories Miniworkshop

RECOGNIZE THIS?

Page 25: Building Interactive Stories Miniworkshop

WHAT ABOUT THIS?

Page 26: Building Interactive Stories Miniworkshop
Page 27: Building Interactive Stories Miniworkshop
Page 28: Building Interactive Stories Miniworkshop

OBSERVATIONS:

GREAT FOR SETTING THE MOODCREATES RYTHM AND ACTS AS A MOTORGOOD FOR FILLING IN VISUAL GAPSTIES SEGMENTS OF A STORY TOGETHER (SPEAKS)CAN WORK IN THE BACKGROUND

Page 29: Building Interactive Stories Miniworkshop

TEXT

Page 30: Building Interactive Stories Miniworkshop
Page 31: Building Interactive Stories Miniworkshop
Page 32: Building Interactive Stories Miniworkshop
Page 33: Building Interactive Stories Miniworkshop

OBSERVATIONS:

GREAT FOR FACTUAL INFORMATIONGREAT FOR IN DEPT EXPLANATIONSCAN BE USED AS A VISUAL BREAKERTAKES LITTLE RESOURCE TO PRODUCE

Page 34: Building Interactive Stories Miniworkshop

GRAPHICS

Page 35: Building Interactive Stories Miniworkshop
Page 36: Building Interactive Stories Miniworkshop
Page 37: Building Interactive Stories Miniworkshop
Page 38: Building Interactive Stories Miniworkshop
Page 39: Building Interactive Stories Miniworkshop

OBSERVATIONS:

CAN PROVIDE OVERVIEW OF INFORMATIONCAN ADD ANOTHER LAYER TO VISUALSCAN BE USED AS AN INTERFACE

Page 40: Building Interactive Stories Miniworkshop

DESIGNTHE VISUAL FRAMEWORK & LAYOUT

Page 41: Building Interactive Stories Miniworkshop
Page 42: Building Interactive Stories Miniworkshop
Page 43: Building Interactive Stories Miniworkshop
Page 44: Building Interactive Stories Miniworkshop
Page 45: Building Interactive Stories Miniworkshop
Page 46: Building Interactive Stories Miniworkshop

OBSERVATIONS:

EXPOSES THE DNA OF THE STORYCREATES COHERENCE THROUGHOUT THE STORYHELPS THE USER GET TO THE RIGHT CONTENT

Page 47: Building Interactive Stories Miniworkshop

STRUCTUREHOW IS THE STRUCTURE AND FLOW OF THE STORY? HOW DOES THE USER ENGAGE?

Page 48: Building Interactive Stories Miniworkshop

Linear:

Side branches: Multiple directions:

Page 49: Building Interactive Stories Miniworkshop

INTERACTIVE NARRATIVEwww.stormingjuno.com

Page 50: Building Interactive Stories Miniworkshop

LINEAR MOVIEOne in 8 Million

Page 51: Building Interactive Stories Miniworkshop

PAGE BASED MAGAZINEInquiring Mind Magazine

Page 52: Building Interactive Stories Miniworkshop

USER DIRECTEDA different ending

Page 53: Building Interactive Stories Miniworkshop

USER DIRECTEDThe Taubman Museum

Page 54: Building Interactive Stories Miniworkshop
Page 55: Building Interactive Stories Miniworkshop

ASSIGNMENT

WIREFRAMES: COVER, SUB PAGES, TEMPLATES, FUNCTIONALITY

Page 56: Building Interactive Stories Miniworkshop

960 GRID SYSTEM

Page 57: Building Interactive Stories Miniworkshop

960 GRID SYSTEM

A MAIN TITLE

Feugait vel delenit ipsum elit vero eum ut feugait dolor wisi ea consequatvel. Molestie esse molestie facilisi dolore qui erat, odio velit dolor molestie autem enim, eum illum nisl molestie. Delenit nisl vel. Esse dolore at, iriure ut commodo ad lorem dignissim qui ut praesent velit nisl commodo amet. Commodo nonummy delenit adipiscing veniam eu, nostrud dolore molestie ipsum crisare. In duis, dignissim facilisi feugait et illum duis, odio blandit erat aliquip volutpat ea velit. Nulla in sciurus erat facilisis tincidunt, in aliquam wisi blandit sit elit. Hendrerit iusto wisi et delenit feugait ullamcorper

A SMALL TITLE:

Feugait vel delenit ipsum elit vero eum ut feugait dolor wisi ea consequatvel. Molestie esse molestie facilisi dolore qui erat, odio velit dolor molestie autem enim, eum illum nisl molestie. Delenit nisl vel. Esse dolore at, iriure ut commodo ad lorem dignissim qui ut praesent velit nisl commodo amet. Commodo nonummy delenit adipiscing veniam eu, nostrud dolore molestie ipsum crisare. In duis, dignissim facilisi feugait et illum duis, odio blandit erat aliquip volutpat ea velit. Nulla in sciurus erat facilisis tincidunt, in aliquam wisi blandit sit elit. Hendrerit iusto wisi et delenit feugait ullamcorper

Feugait vel delenit ipsum elit vero eum ut feugait dolor wisi ea consequatvel. Molestie esse molestie facilisi dolore qui erat,

GOES HERE

Page 58: Building Interactive Stories Miniworkshop

1: Main video will be playing when entering2: Bottom teasers for content3. “Watch” button - will start story

1

2

3

THE GREAT STORYThis is an introduction to the story and what it’s about

Page 59: Building Interactive Stories Miniworkshop
Page 60: Building Interactive Stories Miniworkshop