Transmedia Zurich

Oct. 16th 2013
Colab 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 - Communi...
Thank You Colab Zurich
for hosting!
4
X Media Lab “Transmedia”

«Mobile – in Touch with Digital Creation»
In September 2013, Pro Helvetia is launching a new
pro...
prohelvetia.ch / transmediaprojects.ch / @mobile1315
6
Meetups

Ideas

Experiences

Transmedia Toolkit

Story

Consumption

Container

www.transmediatoolkit.org

7
Why Transmedia?

8
Trends
M2M
Devices

Device
Fragmentation

Evolving
Communication

9
Evolution of Communication
Copier
Printing
Writing

Face to Face

Location Services

Email
Web Static HTML
Blogging (activ...
Media

Channels
Story

Engagement

Transmedia

Users

Narrative

Audience
Emotions
11
Transmedia
Project Anatomy

12
Transmedia Project
Story

Consumption

Container

What is the
story, the world it
takes place in, the
character, etc.

How...
Creator

Product

Creates stories,
art, movies, etc.

Builds physical/
virtual products

Find your
audience

User
Experien...
Consumption

Container

User Experience/Interaction

How will the consumption
be realized, physically/
virtually designed,...
User Journey

How does the user get into
your story and engage in
your experience?

Story First
User sees meme via
Faceboo...
Testing tool for fast
user feedback before
development

Mockup

Communicate between
design / development

Demo App

Commun...
Web/App Prototyping
Keynote
Powerpoint Stencils
OmniGraffle
Visio
Balsamiq
Axure
iRise MX
GUIToolkits
Photoshop
Illustrator...
Digital Storytelling
Tools

19
Digital Publishing
App/Webpage

Social Media

Push/Pull

Video

Augmented Reality

Curator

Audience
20
SnowFall

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

Scroll page, easy to pull out bits of the stor...
Text, animations, videos, different
themes, consistent narrative

Pull-based consumption and
reading of content
22
Parallax, easy to explore
Pull consumption
Easy to design/prototype

https://www.scrollkit.com

23
Dada Ghost Story
Web of Things Hackathon

Swiss IronTrail
Pirate Hackathon

24
Easy to integrate, drag/drop
images, embedded media
(video/audio/iframes)

Custom URL or publish
on scrollkit.com

25
Social Media Curation

Flow/steam

Slideshow

More powerful than Tumblr, connect to and search social
media channels, pres...
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
Publish as landing page on
BrickFlow, share link to social
media channels, remix

Embed externally as iframe
element, view...
Add content, text, etc.

Connect to and
search social media
channels

29
Mixed Video/Interaction

Non-linear video navigation
Clickable elements
Easy assembly

Combine multi-media elements
View i...
http://www.raptmedia.com/product

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

Allow choi...
Interactive layer allows clicking/hyperlinks

Different video
clips can be linked
together

User can make
decisions at plo...
Connect to channels,
ability to upload

Arrange elements

Share

33
Next Meetup Idea
Story
Creation

Character Driven

World Driven

What comes first in story development? The
characters or t...
Transmedia Zurich
http://www.transmediazh.ch/

Mark Melnykowycz

Liz Henry

@americanpeyote
idezo.ch
Lostinreality.net

@w...
Upcoming SlideShare
Loading in...5
×

Transmedia Zurich - Digital Story and Prototyping

1,042

Published on

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,042
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
9
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transmedia Zurich - Digital Story and Prototyping

  1. 1. Transmedia Zurich Oct. 16th 2013 Colab Zurich Digital Publishing and Prototyping Tools 1
  2. 2. Digital Storytelling Tools https://www.scrollkit.com 2
  3. 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. 4. Thank You Colab Zurich for hosting! 4
  5. 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. 6. prohelvetia.ch / transmediaprojects.ch / @mobile1315 6
  7. 7. Meetups Ideas Experiences Transmedia Toolkit Story Consumption Container www.transmediatoolkit.org 7
  8. 8. Why Transmedia? 8
  9. 9. Trends M2M Devices Device Fragmentation Evolving Communication 9
  10. 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. 11. Media Channels Story Engagement Transmedia Users Narrative Audience Emotions 11
  12. 12. Transmedia Project Anatomy 12
  13. 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. 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. 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. 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. 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. 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. 19. Digital Storytelling Tools 19
  20. 20. Digital Publishing App/Webpage Social Media Push/Pull Video Augmented Reality Curator Audience 20
  21. 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. 22. Text, animations, videos, different themes, consistent narrative Pull-based consumption and reading of content 22
  23. 23. Parallax, easy to explore Pull consumption Easy to design/prototype https://www.scrollkit.com 23
  24. 24. Dada Ghost Story Web of Things Hackathon Swiss IronTrail Pirate Hackathon 24
  25. 25. Easy to integrate, drag/drop images, embedded media (video/audio/iframes) Custom URL or publish on scrollkit.com 25
  26. 26. Social Media Curation Flow/steam Slideshow More powerful than Tumblr, connect to and search social media channels, present content in sequence 26
  27. 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. 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. 29. Add content, text, etc. Connect to and search social media channels 29
  30. 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. 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. 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. 33. Connect to channels, ability to upload Arrange elements Share 33
  34. 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. 35. Transmedia Zurich http://www.transmediazh.ch/ Mark Melnykowycz Liz Henry @americanpeyote idezo.ch Lostinreality.net @whereareyouliz henrygeneral.com 35
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×