Embed Size (px)
DESCRIPTION
Citation preview
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
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
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
