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

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 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. Videos will be available from Masterclass recordings 5
  6. 6. / / @mobile1315 6
  7. 7. Meetups Ideas Experiences Transmedia Toolkit Story Consumption Container 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 / 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 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 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. 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 Mark Melnykowycz Liz Henry @americanpeyote @whereareyouliz 35
  1. A particular slide catching your eye?

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