transmedia zurich - digital story and prototyping

Transmedia Zurich

Oct. 16th 2013Colab Zurich

Digital Publishing and Prototyping Tools

1

Digital Storytelling Tools

https://www.scrollkit.com

2

• Quick X Media Lab Recap / ProHelvetia Project Call

• Transmedia Toolkit• What is Transmedia• Why Transmedia - Communication Patterns• Transmedia Project Flow• Design / Prototyping• Publishing Tools

3

Thank You Colab Zurichfor hosting!

4

X Media Lab “Transmedia”

«Mobile – in Touch with Digital Creation»In September 2013, Pro Helvetia is launching a new program called «Mobile – in Touch with Digital Creation», the third component of its overall «Digital Culture» program. Taking the rapid spread of smartphones and tablets as a starting point, it will focus on interactive and transmedia creation.

prohelvetia.chwww.xmedialab.comtransmediaprojects.ch

Videos will be available from Masterclass recordings

5

prohelvetia.ch / transmediaprojects.ch / @mobile13156

Transmedia Toolkit

Story Consumption Container

Meetups Ideas Experiences

www.transmediatoolkit.org

7

Why Transmedia?

8

Trends

M2M Devices

Device Fragmentation

Evolving Communication

9

Evolution of Communication

Face to FaceWeb Static HTML

Blogging (active HTML)Instant Messaging

Email

Social Networks

Location ServicesWritingPrinting

Copier

TelephoneMobileSMS

MMS

Fragmented Lines

Push/PullTransmedia

10

Transmedia

Story

Media Channels

Users Audience

Engagement Narrative

Emotions

11

TransmediaProject Anatomy

12

Transmedia Project

Story Consumption Container

What is the story, the world it takes place in, the

character, etc.

How will this story world be

consumed by the audience or users?

How will the consumption be

realized, physically/virtually designed, etc?

Know your UserWireframe/prototyping

Webpage/AppVideo/ebook

Know your AudienceStory boarding

Pre-Visualization

User Experience/Interaction

13

Creator Product

Creates stories, art, movies, etc.

Builds physical/virtual products

The UsersThe Audience

User Experience/Interaction

Find your audience

Prototype/Test/Explore

14

How will the consumption be realized, physically/virtually designed, etc?

Wireframe/prototypingWebpage

Videoebook

ContainerConsumption

User Experience/Interaction

User Journey

Paper/Digital Mockup

InteractivePrototype

Final Experience

15

How does the user get into your story and engage in

your experience?

Story First

User Journey

User sees meme via Facebook/Tumblr

Searches for Zurich Dada Game

on Google

Starts reading/learning about the

Dada ghost in Zurich

Need to have good SEO base on landing page

Need fast consumption on desktop/mobile

Parallax page design

User is push/pull fragmented

reader

16

Design representation of your app/container to communicate and test the

user experience

Paper/Digital Mockup/Prototype

Communicate between design / development

Communicate with potential partners /

investors / users

Testing tool for fast user feedback before

development

Pape

rM

ocku

pD

emo

App

17

Web/App Prototyping

KeynotePowerpointOmniGraffle

HotGlooJetStrap

AppCookerBluePrintiMockups

Stencils

VisioBalsamiqAxure

iRise MXGUIToolkitsPhotoshopIllustrator

iPad

Online

Desktop

18

Digital StorytellingTools

19

Digital Publishing

App/Webpage Social Media Video Augmented Reality

Audience

CuratorPush/Pull

20

SnowFall

New York Times / http://www.nytimes.com/projects/2012/snow-fall/

Scroll page, easy to pull out bits of the story and be immersed in graphics, story, characters.

21

Text, animations, videos, different themes, consistent narrative

Pull-based consumption and reading of content

22

Parallax, easy to explorePull consumption

Easy to design/prototype

https://www.scrollkit.com

23

Dada Ghost StoryWeb of Things Hackathon

Swiss IronTrailPirate Hackathon

24

Easy to integrate, drag/drop images, embedded media

(video/audio/iframes)

Custom URL or publish on scrollkit.com

25

Social Media Curation

More powerful than Tumblr, connect to and search social media channels, present content in sequence

Flow/steam Slideshow

26

Connect to social media channels

Arrange e lements to group togetherAdd text and links

27

Publish as landing page on BrickFlow, share link to social media channels, remix

Embed externally as iframe element, view as slideshow experience

28

C o n n e c t t o a n d search social media channelsAdd content, text, etc.

29

Mixed Video/Interaction

Non-linear video navigationClickable elementsEasy assembly

Combine multi-media elementsView in video/slide formatVideos, audio, animations, text, etc.

30

http://www.raptmedia.com/product

Add clickable elements to videos, seamlessly jump from one video to another.

Allow choices for jumping between storylines/elements

31

Interactive layer allows clicking/hyperlinks

Dif ferent v ideo clips can be linked together

User can make decisions at plot points

Easy to create alternative story l i n e s o r a l l ow exploration

32

Connect to channels, ability to upload

Arrange elements Share

33

Next Meetup Idea

Character Driven World Driven

Story Creation

What comes first in story development? The characters or the world in which they exist, and how does starting in one influence the other?

34

Mark Melnykowycz@americanpeyoteidezo.chLostinreality.net

Liz Henry@whereareyoulizhenrygeneral.com

Transmedia Zurichhttp://www.transmediazh.ch/

35