Downloaded 77 times
Uploaded bymStoner, Inc.
Visual Design for Digital Storytelling
The webinar on visual design for digital storytelling aimed to equip participants with techniques and theories to create impactful visual stories online. It covered the origins of visual storytelling, elements of visual perception, responsive design, and emotional resonance with audiences. The session emphasized collaboration in storytelling and included case studies to illustrate key concepts.
More Related Content
Similar to Visual Design for Digital Storytelling
Visual Design for Digital Storytelling
- 1. Visual Design for DigitalStorytelling July 20, 2016
- 2. • 45 minutewebinar + 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 BenBilow SeniorCreativeDirector
- 4.
- 5. The Question: What happenedon February 8, 1900 that forever changed the way we tell stories to each other?
- 6. The Brownie Camera:Before & After
- 7.
- 8. Agenda 1. Origins ofVisual 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 VisualStorytelling
- 10. “There is nosociety 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.
- 12.
- 13.
- 14. Book of Kells Artistsaddedbrightcolorsandgold embellishmentstoillustrationsto enhanceperception, mark important passages, andcomment on the meaningofthetext.
- 15.
- 16. Photography Photographythatservesapurpose, suchasphotographsofreal people can establishan authentic sense oftheofferingor institution.
- 17. Graphic Design Typeandimage,composition and colorcombinedininnovativeways totellstories about products and servicesinadvertisingand entertainment.
- 18. Video Games Thisistheheightofstorytellingand thebirthofmoderndigitaluser experience.The audienceliterally becomes the main character.
- 19. … interpret experiences, heightenperception, illuminate, & share.
- 20. The Science of VisualPerception
- 21. About one quarterof 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 areincredible at remembering pictures. + three days later
- 23.
- 24. The brain ishighly involved in visual processing — this results in greater retention and increased comprehension. With visual design our ability to understand and engage vastly improves.
- 25.
- 26. “Painting is concernedwith 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
- 28.
- 29. 29 Motion Motioncreatestheimpressionoflife—establishingthepersonality ofthecharactersandtheemotionstheyexpress. • UserInterfaceAnimation(transform,transition,andfeedback) • UserExperienceChoreography(staging) • MovingPictures(video,animatedgifs,cinemagraphs) • AnimatedIllustrations&Infographics(gifs,svgs,css)
- 30. UIAnimation further reading andexamples at material.google.com/motion
- 31.
- 32.
- 33. Movingpictures cool examples andtool at flixel.com
- 34.
- 35.
- 36. 36 Perspective Perspectiveisthepointofview. Thetechniquecanaddasenseofrealism toyourstory.Itcanalsoexpandhumanvisualperception. • alterviewpointstoshowmicro and macroviews • extend beyondtheviewport • adddepthtocreateasenseofspace • provideaperspectivethatcan’t be seen anywhere else
- 37.
- 38.
- 39. “The audience doesnot 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 divinginto 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
- 41.
- 42. Over time theweb 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 Discoby Alex Asseily
- 44.
- 45.
- 46. 46 Balance Performance &Quality Thereisnosilverbulletforperformance.Test loadingspeedsandadjustvisual assetsasneededforasmootheruserexperience.Videosandcomplexanimations mayneedtobeconditionalbasedonavailablebandwidth.
- 47.
- 50.
- 51. Kevin Spacey, ActorandDirector,ContentMarketingWorldConference2014 “Thestory is everything, which means that it’s our job to tell better stories.”
- 52. Story first. Departmentsecond.
- 53. 53 Build your Team DesignEditorialStrategy Marketing & Data Technology Greatdigitalstorytellingisaccomplishedbygreatteams. Bringallthetalenttothe tableatthebeginningoftheprocess.
- 54. Nurture a cultureof collaboration.
- 55. Start small &celebrate success.
- 56. Our Storytelling SeriesTeam 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
- 58.