Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Visual Design for
Digital Storytelling
July 20, 2016
• 45 minute webinar + 15 minutes for questions and answers
• Ask questions through the Zoom Control Panel
• Tweet during t...
Voltaire Santos Miran
Co-FounderandCEO
@vsantosmiran
Ben Bilow
SeniorCreativeDirector
World-changers
for
two books,
please.
The Question:
What happened on February 8,
1900 that forever changed the way
we tell stories to each other?
The Brownie Camera: Before & After
The Goal
Wewanttoequipyouwiththetheoryand techniquestocreategreat
visualstoriesonthewebthatresonatewithyouraudiences.Wedes...
Agenda
1. Origins of Visual Storytelling
2. The Science of Visual Perception

3. Hierarchy, Motion, Perspective, &
Resonan...
The Origins of
Visual Storytelling
“There is no society ever discovered in the remotest
corner of the world that has not had something that we
would consider...
Storytelling may have 

evolved because it was a useful “thought
experiment”. By running a scenario and
visualising what h...
Lascaux Caves
2,000figuresincludinganimals,
humanfigures,abstractsignsand
geometricimages.Animalsappear
tobeinmotionandvis...
Egyptian
Hieroglyphics
Visuallyhieroglyphsareallmoreor
lessfigurative;theyrepresentreal
thingsinperfectlyrecognizable
form...
Book of Kells
Artistsaddedbrightcolorsandgold
embellishmentstoillustrationsto
enhance perception, mark
important passages,...
Painting Masterpieces
Paintingisanunlimitedmodeof
humanexpression.From
representationaltoabstract
mastersoftheformcanconju...
Photography
Photographythatservesapurpose,
suchasphotographsofreal
people can establish an
authentic sense oftheofferingor...
Graphic Design
Typeandimage,composition and
colorcombinedininnovativeways
totell stories about products
and servicesinadve...
Video Games
Thisistheheightofstorytellingand
thebirthofmoderndigitaluser
experience.The audience literally
becomes the mai...
… interpret experiences,
heighten perception, illuminate,
& share.
The Science of
Visual Perception
About one quarter of the human brain is
involved in visual processing — more than
any other sense.
DR. JOHN J. MEDINA, a d...
10% 60%
We are incredible at remembering pictures.
+
three days later
Light Memory
The brain is highly involved in visual
processing — this results in greater
retention and increased comprehension.
With vi...
Hierarchy Motion
Perspective Resonance
“Painting is concerned with all the 10
attributes of sight, which are darkness, light,
solidity and color, form and positi...
27
Hierarchy
Ratherthantakinginvisualinformationandprocessingitevenly,people
organizewhattheyseeonyourwebsiteintermsof“vis...
CaseStudy:UncleGoose
29
Motion
Motioncreatestheimpressionoflife—establishingthepersonality
ofthecharactersandtheemotionstheyexpress.
• UserInte...
UIAnimation
further reading and examples at material.google.com/motion
UXChoreography
dribbble.com
CaseStudy:SpeciesinPieces
Movingpictures
cool examples and tool at flixel.com
CaseStudy:ArtCenterCollegeofDesign
AnimatedIllustrations&Infographic
36
Perspective
Perspectiveisthepointofview. Thetechniquecanaddasenseofrealism
toyourstory.Itcanalsoexpandhumanvisualpercep...
CaseStudy:BearsEyeViewofYellowstone
38
Resonance
Choosingvisualsthatcreateanemotionalandintellectual
connectionwithyouraudiences.
• determiningyourstrategyand...
“The audience does not need to tune themselves to you
—you need to tune your message to them. Understand
their hearts and ...
“It’s about diving into that story, about the
characters leaping off the page, about feeling yourself
in the room, about b...
CaseStudy:BostonUniversityAnnualReport2015
Over time the web has evolved toward making
text easier to read and content easier to
understand in order to support more ...
Responsive Design
Disco Disco by Alex Asseily
44
Design for Everywhere
Thewebsiteshouldautomaticallyrespondtotheuser’sdevice
preferences.Onedesignacrossalldevicesusingr...
Case Study:

BearsEyeViewofYellowstone
(mobile)
46
Balance Performance & Quality
Thereisnosilverbulletforperformance.Test loadingspeedsandadjustvisual
assetsasneededforas...
testmysite.thinkwithgoogle.com
Visualizing Action
Kevin Spacey, ActorandDirector,ContentMarketingWorldConference2014
“The story is everything,
which means that it’s our job...
Story first. Department second.
53
Build your Team
Design EditorialStrategy Marketing & Data Technology
Greatdigitalstorytellingisaccomplishedbygreatteams...
Nurture a culture of collaboration.
Start small & celebrate success.
Our Storytelling Series Team
Ben Conley
Visual/UXDesigner


ben.conley@mstoner.com
Abby McLean
Visual/UXDesigner


abby.mc...
Voltaire Santos
Miran
ChiefExecutive
Officer


@vsantosmiran
312.420.6778
voltaire.miran@mstoner.com
Mallory Wood
Director...
Questions & Answers
Visual Design for Digital Storytelling
Visual Design for Digital Storytelling
Upcoming SlideShare
Loading in …5
×

Visual Design for Digital Storytelling

1,938 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

Visual Design for Digital Storytelling

  1. 1. Visual Design for Digital Storytelling July 20, 2016
  2. 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. 3. Voltaire Santos Miran Co-FounderandCEO @vsantosmiran Ben Bilow SeniorCreativeDirector
  4. 4. World-changers for two books, please.
  5. 5. The Question: What happened on February 8, 1900 that forever changed the way we tell stories to each other?
  6. 6. The Brownie Camera: Before & After
  7. 7. The Goal Wewanttoequipyouwiththetheoryand techniquestocreategreat visualstoriesonthewebthatresonatewithyouraudiences.Wedesigned thiswebinartoexpandyourarrayofconceptualandpracticaltoolsfor visualstorytelling.We’llshowyouthewhyandwhatandhowofpowerful imagesandinteractivedesign.
  8. 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. 9. The Origins of Visual Storytelling
  10. 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. 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. 12. Lascaux Caves 2,000figuresincludinganimals, humanfigures,abstractsignsand geometricimages.Animalsappear tobeinmotionandvisual depth inthescenedemonstratesa primitiveformofperspective.
  13. 13. Egyptian Hieroglyphics Visuallyhieroglyphsareallmoreor lessfigurative;theyrepresentreal thingsinperfectlyrecognizable forms.Theycanberead phoneticallyorseenasideograms. Meaning can be literal and also conceptual.
  14. 14. Book of Kells Artistsaddedbrightcolorsandgold embellishmentstoillustrationsto enhance perception, mark important passages, andcomment on the meaningofthetext.
  15. 15. Painting Masterpieces Paintingisanunlimitedmodeof humanexpression.From representationaltoabstract mastersoftheformcanconjure narrative and evoke strong emotions.
  16. 16. Photography Photographythatservesapurpose, suchasphotographsofreal people can establish an authentic sense oftheofferingor institution.
  17. 17. Graphic Design Typeandimage,composition and colorcombinedininnovativeways totell stories about products and servicesinadvertisingand entertainment.
  18. 18. Video Games Thisistheheightofstorytellingand thebirthofmoderndigitaluser experience.The audience literally becomes the main character.
  19. 19. … interpret experiences, heighten perception, illuminate, & share.
  20. 20. The Science of Visual Perception
  21. 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. 22. 10% 60% We are incredible at remembering pictures. + three days later
  23. 23. Light Memory
  24. 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.
  25. 25. Hierarchy Motion Perspective Resonance
  26. 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. 27 Hierarchy Ratherthantakinginvisualinformationandprocessingitevenly,people organizewhattheyseeonyourwebsiteintermsof“visualrelationships.” • correlatesizewithimportance • classifywithcolor • usecontrasttoseparate • arrangeincloseproximitytorelate
  28. 28. CaseStudy:UncleGoose
  29. 29. 29 Motion Motioncreatestheimpressionoflife—establishingthepersonality ofthecharactersandtheemotionstheyexpress. • UserInterfaceAnimation(transform,transition,andfeedback) • UserExperience Choreography(staging) • MovingPictures(video,animatedgifs,cinemagraphs) • AnimatedIllustrations&Infographics(gifs,svgs,css)
  30. 30. UIAnimation further reading and examples at material.google.com/motion
  31. 31. UXChoreography dribbble.com
  32. 32. CaseStudy:SpeciesinPieces
  33. 33. Movingpictures cool examples and tool at flixel.com
  34. 34. CaseStudy:ArtCenterCollegeofDesign
  35. 35. AnimatedIllustrations&Infographic
  36. 36. 36 Perspective Perspectiveisthepointofview. Thetechniquecanaddasenseofrealism toyourstory.Itcanalsoexpandhumanvisualperception. • alterviewpointstoshow micro and macroviews • extend beyondtheviewport • adddepthtocreateasenseofspace • provideaperspectivethatcan’t be seen anywhere else
  37. 37. CaseStudy:BearsEyeViewofYellowstone
  38. 38. 38 Resonance Choosingvisualsthatcreateanemotionalandintellectual connectionwithyouraudiences. • determiningyourstrategyandpurpose • identifyingmotivesandaspirations • understandingtheirheadandheart
  39. 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. 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
  41. 41. CaseStudy:BostonUniversityAnnualReport2015
  42. 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. 43. Responsive Design Disco Disco by Alex Asseily
  44. 44. 44 Design for Everywhere Thewebsiteshouldautomaticallyrespondtotheuser’sdevice preferences.Onedesignacrossalldevicesusingrelativesizes,common ratios,aflexiblegridsystem,andcssmediaqueries.
  45. 45. Case Study:
 BearsEyeViewofYellowstone (mobile)
  46. 46. 46 Balance Performance & Quality Thereisnosilverbulletforperformance.Test loadingspeedsandadjustvisual assetsasneededforasmootheruserexperience.Videosandcomplexanimations mayneedtobeconditionalbasedonavailablebandwidth.
  47. 47. testmysite.thinkwithgoogle.com
  48. 48. Visualizing Action
  49. 49. Kevin Spacey, ActorandDirector,ContentMarketingWorldConference2014 “The story is everything, which means that it’s our job to tell better stories.”
  50. 50. Story first. Department second.
  51. 51. 53 Build your Team Design EditorialStrategy Marketing & Data Technology Greatdigitalstorytellingisaccomplishedbygreatteams. Bringallthetalenttothe tableatthebeginningoftheprocess.
  52. 52. Nurture a culture of collaboration.
  53. 53. Start small & celebrate success.
  54. 54. 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
  55. 55. 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
  56. 56. Questions & Answers

×