The document summarizes a presentation on digital storytelling and transmedia tools. It discusses scrollkit for digital storytelling, brickflow for curating social media, and raptmedia for creating interactive videos. Transmedia projects are described as having a story, methods of consumption, and containers to realize the experience. Prototyping tools like balsamiq and keynote are presented to design user experiences. The document promotes thinking about how users interact with and engage in the story world through consumption.

1. Transmedia Zurich
Oct. 16th 2013
Colab Zurich
Digital Publishing and
Prototyping Tools
1

2. Digital Storytelling Tools
https://www.scrollkit.com
2

3. • 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

4. Thank You Colab Zurich
for hosting!
4

5. 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.
www.xmedialab.com
Videos will be available from
Masterclass recordings
prohelvetia.ch
transmediaprojects.ch
5

6. prohelvetia.ch / transmediaprojects.ch / @mobile1315
6

7. Meetups
Ideas
Experiences
Transmedia Toolkit
Story
Consumption
Container
www.transmediatoolkit.org
7

8. Why Transmedia?
8

9. Trends
M2M
Devices
Device
Fragmentation
Evolving
Communication
9

10. Evolution of Communication
Copier
Printing
Writing
Face to Face
Location Services
Email
Web Static HTML
Blogging (active HTML)
Instant Messaging
Telephone
MobileSMS
MMS
Fragmented
Lines
Push/Pull
Transmedia
Social Networks
10

11. Media
Channels
Story
Engagement
Transmedia
Users
Narrative
Audience
Emotions
11

12. Transmedia
Project Anatomy
12

13. 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?
User Experience/Interaction
Know your Audience
Story boarding
Pre-Visualization
Know your User
Wireframe/prototyping
Webpage/App
Video/ebook
13

14. Creator
Product
Creates stories,
art, movies, etc.
Builds physical/
virtual products
Find your
audience
User
Experience/
Interaction
The Audience
The Users
Prototype/Test/Explore
14

15. Consumption
Container
User Experience/Interaction
How will the consumption
be realized, physically/
virtually designed, etc?
Wireframe/prototyping
Webpage
Video
ebook
User Journey
Paper/Digital
Mockup
Interactive
Prototype
Final
Experience
15

16. User Journey
How does the user get into
your story and engage in
your experience?
Story First
User sees meme via
Facebook/Tumblr
Searches for
Zurich Dada Game
on Google
User is push/pull
fragmented
reader
Need to have good
SEO base on
landing page
Starts reading/
learning about the
Dada ghost in
Zurich
Need fast
consumption on
desktop/mobile
Parallax page
design
16

17. Testing tool for fast
user feedback before
development
Mockup
Communicate between
design / development
Demo App
Communicate with
potential partners /
investors / users
Paper
Paper/Digital
Mockup/Prototype
Design representation of your app/
container to communicate and test the
user experience
17

18. Web/App Prototyping
Keynote
Powerpoint Stencils
OmniGraffle
Visio
Balsamiq
Axure
iRise MX
GUIToolkits
Photoshop
Illustrator
AppCooker
BluePrint iPad
iMockups
HotGloo
JetStrap Online
Desktop
18

19. Digital Storytelling
Tools
19

20. Digital Publishing
App/Webpage
Social Media
Push/Pull
Video
Augmented Reality
Curator
Audience
20

21. 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

22. Text, animations, videos, different
themes, consistent narrative
Pull-based consumption and
reading of content
22

23. Parallax, easy to explore
Pull consumption
Easy to design/prototype
https://www.scrollkit.com
23

24. Dada Ghost Story
Web of Things Hackathon
Swiss IronTrail
Pirate Hackathon
24

25. Easy to integrate, drag/drop
images, embedded media
(video/audio/iframes)
Custom URL or publish
on scrollkit.com
25

26. Social Media Curation
Flow/steam
Slideshow
More powerful than Tumblr, connect to and search social
media channels, present content in sequence
26

27. Connect to social media
channels
A rr a n g e e l e m e n t s t o
group together
Add text and links
27

28. Publish as landing page on
BrickFlow, share link to social
media channels, remix
Embed externally as iframe
element, view as slideshow
experience
28

29. Add content, text, etc.
Connect to and
search social media
channels
29

30. Mixed Video/Interaction
Non-linear video navigation
Clickable elements
Easy assembly
Combine multi-media elements
View in video/slide format
Videos, audio, animations, text,
etc.
30

31. 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

32. Interactive layer allows clicking/hyperlinks
Different video
clips can be linked
together
User can make
decisions at plot
points
E a s y t o c re a t e
alternative story
lines or allow
exploration
32

33. Connect to channels,
ability to upload
Arrange elements
Share
33

34. Next Meetup Idea
Story
Creation
Character Driven
World Driven
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

35. Transmedia Zurich
http://www.transmediazh.ch/
Mark Melnykowycz
Liz Henry
@americanpeyote
idezo.ch
Lostinreality.net
@whereareyouliz
henrygeneral.com
35