Visual Design for Digital Storytelling
•
1 like•2,308 views
Download this webinar for free: http://mstnr.me/2bG0hmf How does strong visual design support storytelling? In this webinar, we’ll explore principles for creating visual interfaces that encourage reading, exploration, and interaction. What You’ll Learn • Current best practices and emerging trends in visual design for storytelling. • Ways to develop clear visual hierarchies of photography and type. • Planning considerations for optimizing visual design across mobile, tablet, laptop, desktop, and widescreen. • Techniques for a creating a cohesive visual experience across social media channels
Recommended
More Related Content
Similar to Visual Design for Digital Storytelling
Similar to Visual Design for Digital Storytelling (20)
More from mStoner, Inc.
More from mStoner, Inc. (20)
Recently uploaded
Recently uploaded (20)
Visual Design for Digital Storytelling
- 1. Visual Design for Digital Storytelling July 20, 2016
- 2. • 45 minute webinar + 15 minutes for questions and answers • Ask questions through the Zoom Control Panel • Tweet during the webinar with #mStonerNow • Please fill out the post-webinar evaluation • Check your inbox later this week for the webinar recording and slide deck The Plan
- 3. Voltaire Santos Miran Co-FounderandCEO @vsantosmiran Ben Bilow SeniorCreativeDirector
- 5. The Question: What happened on February 8, 1900 that forever changed the way we tell stories to each other?
- 6. The Brownie Camera: Before & After
- 8. Agenda 1. Origins of Visual Storytelling 2. The Science of Visual Perception 3. Hierarchy, Motion, Perspective, & Resonance in Digital Design 4. Responsive Storytelling 5. Visualizing Action 6. Questions
- 9. The Origins of Visual Storytelling
- 10. “There is no society ever discovered in the remotest corner of the world that has not had something that we would consider the arts. Visual arts — decoration of surfaces and bodies — appears to be a human universal.” STEVEN PINKER, Cognitive Scientist
- 11. Storytelling may have evolved because it was a useful “thought experiment”. By running a scenario and visualising what happens we learnt what might happen in real life.
- 13. Egyptian Hieroglyphics Visuallyhieroglyphsareallmoreor lessfigurative;theyrepresentreal thingsinperfectlyrecognizable forms.Theycanberead phoneticallyorseenasideograms. Meaning can be literal and also conceptual.
- 14. Book of Kells Artistsaddedbrightcolorsandgold embellishmentstoillustrationsto enhance perception, mark important passages, andcomment on the meaningofthetext.
- 15. Painting Masterpieces Paintingisanunlimitedmodeof humanexpression.From representationaltoabstract mastersoftheformcanconjure narrative and evoke strong emotions.
- 16. Photography Photographythatservesapurpose, suchasphotographsofreal people can establish an authentic sense oftheofferingor institution.
- 17. Graphic Design Typeandimage,composition and colorcombinedininnovativeways totell stories about products and servicesinadvertisingand entertainment.
- 18. Video Games Thisistheheightofstorytellingand thebirthofmoderndigitaluser experience.The audience literally becomes the main character.
- 19. … interpret experiences, heighten perception, illuminate, & share.
- 20. The Science of Visual Perception
- 21. About one quarter of the human brain is involved in visual processing — more than any other sense. DR. JOHN J. MEDINA, a developmental molecular biologist
- 22. 10% 60% We are incredible at remembering pictures. + three days later
- 23. Light Memory
- 24. The brain is highly involved in visual processing — this results in greater retention and increased comprehension. With visual design our ability to understand and engage vastly improves.
- 26. “Painting is concerned with all the 10 attributes of sight, which are darkness, light, solidity and color, form and position, distance and propinquity, motion and rest.” Leonardo da Vinci
- 27. 27 Hierarchy Ratherthantakinginvisualinformationandprocessingitevenly,people organizewhattheyseeonyourwebsiteintermsof“visualrelationships.” • correlatesizewithimportance • classifywithcolor • usecontrasttoseparate • arrangeincloseproximitytorelate
- 29. 29 Motion Motioncreatestheimpressionoflife—establishingthepersonality ofthecharactersandtheemotionstheyexpress. • UserInterfaceAnimation(transform,transition,andfeedback) • UserExperience Choreography(staging) • MovingPictures(video,animatedgifs,cinemagraphs) • AnimatedIllustrations&Infographics(gifs,svgs,css)
- 30. UIAnimation further reading and examples at material.google.com/motion
- 33. Movingpictures cool examples and tool at flixel.com
- 36. 36 Perspective Perspectiveisthepointofview. Thetechniquecanaddasenseofrealism toyourstory.Itcanalsoexpandhumanvisualperception. • alterviewpointstoshow micro and macroviews • extend beyondtheviewport • adddepthtocreateasenseofspace • provideaperspectivethatcan’t be seen anywhere else
- 38. 38 Resonance Choosingvisualsthatcreateanemotionalandintellectual connectionwithyouraudiences. • determiningyourstrategyandpurpose • identifyingmotivesandaspirations • understandingtheirheadandheart
- 39. “The audience does not need to tune themselves to you —you need to tune your message to them. Understand their hearts and minds and create a message to resonate with what’s already there.” Nancy Duarte, Author of Resonate: Present Visual Stories that Transform Audiences
- 40. “It’s about diving into that story, about the characters leaping off the page, about feeling yourself in the room, about being transported.” Scott Dadich, Editor-in-Chief, Wired Magazine
- 42. Over time the web has evolved toward making text easier to read and content easier to understand in order to support more complex interactions and deeper engagements.
- 43. Responsive Design Disco Disco by Alex Asseily
- 46. 46 Balance Performance & Quality Thereisnosilverbulletforperformance.Test loadingspeedsandadjustvisual assetsasneededforasmootheruserexperience.Videosandcomplexanimations mayneedtobeconditionalbasedonavailablebandwidth.
- 51. Kevin Spacey, ActorandDirector,ContentMarketingWorldConference2014 “The story is everything, which means that it’s our job to tell better stories.”
- 52. Story first. Department second.
- 53. 53 Build your Team Design EditorialStrategy Marketing & Data Technology Greatdigitalstorytellingisaccomplishedbygreatteams. Bringallthetalenttothe tableatthebeginningoftheprocess.
- 54. Nurture a culture of collaboration.
- 55. Start small & celebrate success.
- 56. Our Storytelling Series Team Ben Conley Visual/UXDesigner ben.conley@mstoner.com Abby McLean Visual/UXDesigner abby.mclean@mstoner.com Fran Zablocki InformationArchitect fran.zablocki@mstoner.com Soni Oliver Visual/UXDesigner soni.oliver@mstoner.com Joel Pattison DirectorofStrategy joel.pattison@mstoner.com Greg Zguta Technologist greg.zguta@mstoner.com
- 57. Voltaire Santos Miran ChiefExecutive Officer @vsantosmiran 312.420.6778 voltaire.miran@mstoner.com Mallory Wood DirectorofMarketing @mallorywood 802.457.9234 mallory.wood@mstoner.com Resources • Learn more about digital storytelling: http://mstnr.me/ DigStoryWebinar • Join the digital storytelling mailing list: http://mstnr.me/DigStoryEmail Ben Bilow SeniorCreativeDirector 773.620.5655 ben.bilow@mstoner.com