building interactive stories miniworkshop

BUILDINGINTERACTIVESTORIESBjarke Myrthu, Storyplanet.com

CORE ELEMENTS OF A STORY

IDEA: MESSAGE, PURPOSE, SOURCES, FORMAT, CHANNELSASSETS: PHOTO, VIDEO, AUDIO, TEXT, GRAPHICSSTRUCTURE: STORYLINE, FUNCTIONALITYDESIGN: 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

ASSETSWHAT ARE THE STRENGTHS AND WEAKNESSES OF DIFFERENT MEDIA TYPES?

PHOTOS

OBSERVATIONS:

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

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

Elliott Erwitt

VIDEO

OBSERVATIONS:

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

AUDIO

RECOGNIZE THIS?

WHAT ABOUT THIS?

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

TEXT

OBSERVATIONS:

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

GRAPHICS

OBSERVATIONS:

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

DESIGNTHE VISUAL FRAMEWORK & LAYOUT

OBSERVATIONS:

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

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

Linear:

Side branches: Multiple directions:

INTERACTIVE NARRATIVEwww.stormingjuno.com

LINEAR MOVIEOne in 8 Million

PAGE BASED MAGAZINEInquiring Mind Magazine

USER DIRECTEDA different ending

USER DIRECTEDThe Taubman Museum

ASSIGNMENT

WIREFRAMES: COVER, SUB PAGES, TEMPLATES, FUNCTIONALITY

960 GRID SYSTEM

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

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