Visual Design for Digital Storytelling
•
1 j'aime•2,307 vues
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
Recommandé
Recommandé
Contenu connexe
Similaire à Visual Design for Digital Storytelling
Similaire à Visual Design for Digital Storytelling (20)
Plus de mStoner, Inc.
Plus de mStoner, Inc. (20)
Dernier
Dernier (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