Your SlideShare is downloading. ×

Transmedia Zurich - Digital Story and Prototyping


Published on

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Transmedia Zurich Oct. 16th 2013 Colab Zurich Digital Publishing and Prototyping Tools 1
  • 2. Digital Storytelling Tools 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. Videos will be available from Masterclass recordings 5
  • 6. / / @mobile1315 6
  • 7. Meetups Ideas Experiences Transmedia Toolkit Story Consumption Container 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 / 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 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 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. 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 Mark Melnykowycz Liz Henry @americanpeyote @whereareyouliz 35