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