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.

The Importance of Storytelling in Web Design, WordCamp Miami 2013


Published on

What if we strengthened our creations for the web by building them upon a foundation of Story? Let's explore the growing importance of storytelling in web design, how to communicate Story through all aspects of a website from content, to design, to ux; and how to apply key components of great storytelling in literature to the medium of the web.

Published in: Technology

The Importance of Storytelling in Web Design, WordCamp Miami 2013

  1. The Importanceof Storytelling in Web Design Denise R. Jacobs WordCamp Miami Miami, FL 6 April 2013
  2. Tweeting Web Design Tall Tales Your storyteller: @denisejacobs This fine event is: @wcmia #wcmia This story is about: #storyinwebdesign
  3. “The universe is made of stories, not of atoms.”- Muriel Rukeyser, Speed of Darkness
  4. 1Why stories?
  5. Missing the PointNot seeing the forest for the trees
  6. FocusTechnique, best practices, process
  7. Try to divine the futureOf web design, the web, and The Next Big Thing
  8. Because…Everyone is experiencing…
  9. Information overloadUsers have evolved as well…
  10. Information + MeaningUser are more sophisticated
  11. + connection
  12. We are powerfulAnd we don’t even realize it.
  13. We take for GrantedThat which we produce…
  14. influences…shapes, and manipulates users
  15. Enter into a pact with end-usersAnd manage our power
  16. How can we…Deliver information in a deep and meaningful way?
  17. Through Story!
  18. Designing and building for the future…Means going back to the past
  19. Storytelling is oldIt’s the very essence and beginning of being human.
  20. Can Practice SankofaCan plan for the future by looking at what has been done in the past
  21. Numbers don’t touch peopleNumbers and data are meaningful for very fewhumans.
  22. “Stories are important cognitive events, for they encapsulate, into one compact package, information, knowledge, context, and emotion.”- Don Norman, Things that Make Us Smart
  23. To be human is to seek Story
  24. Language + desire to help = solves problems
  25. The only animals that tell stories
  26. …unless this story has a hint of verity…“The Author of the Acacia Seeds” by Ursula Le Guin swimming-animals-nature-background.jpg acacia-seeds.html
  27. Our very physiology may be due to storyStory may well be how and why we evolved.
  28. How our Brains work
  29. We are wired for story
  30. Catalogue & store with Story
  31. Place facts into contextAnd infuse them with emotion to make them stick
  32. Persuade. Convince. Teach.
  33. Clarify complexity
  34. Story is rampant on the webFrom blogs, to news, to social outlets
  35. Unaware that it’s all about storyWe can be unaware that Story is what sucked us in
  36. The same process?How would this affect our creations?
  37. My goalIs two-fold…
  38. oneTo make explicit what can go into storytelling a digitalproperty
  39. twoTo raise awareness of that which has been implicit inyour planning process and to make it explicit
  40. 2Crafting Story for the Web
  41. 21st Century BardsWe are the creators, purveyors, and distributors of information,marketing, branding and services in the digital space.
  42. Craft a narrative
  43. Create CharactersLike Freddie Von Chimpenheimer IV!
  44. Establish scene & settingTo provide orientation in the site or app
  45. Additional layersContent, Visual, UX
  46. Non-LinearityWebsites are digital gamebooks
  47. Who CausalWhat ReferencialWhy LocationalWhere TemporalWhenContent coherenceMust create strong connections betweeninformation
  48. Comes from good contentBoth micro- and macro-
  49. VisualIlluminating the narrative
  50. PSE= Pictorial Superiority Effect
  51. Linguistic AnaloguesThe basis of stories is linguistic, so how can we achieve visualstorytelling?
  52. Sounds of web design
  53. Words of web design
  54. Sentences/Phrases
  55. Grammar and Punctuation
  56. Paragraphs
  57. Interactive: Turning the pagesThe stories of User Experience
  58. Aspirational Functional Memory3 types of storiesFrom a user experience standpoint
  59. AspirationalHow we believe or hope an object will help us in thefuture.
  60. FunctionalHow the object helps us accomplish a repeated task.
  61. MemoryPositive memories of having used an object. Photo: Denise Jacobs
  62. Stories, Clients, And ProjectsWhat does the process of incorporating Story into aproject look like?
  63. Reverse engineerStart at the end and work backwards from that.
  64. What is the client’s and brand’s story? What is the story the user wants to be told? What is the story you want to tell about the project at the end?Questions: The projectHere are a few good questions to start with…
  65. Types of stories to provide structureThese sorts of stories can help the client understandtheir goals better.
  66. 3Showing to Tell
  67. Stories should have Key elementsWhat do you think they are?
  68. Visual themeComes from the story you want to tell and based on agenre
  69. Components of StoryPlot, characters…what else?
  70. Literary DevicesLike similes!
  71. Ur Doin’ it wrong‘Nuff said.
  72. Where’s the story?
  73. Get your story straight
  74. Who’s Doing it WellIn stark contrast… Photo: Denise Jacobs
  75. Evocative
  76. Interactive
  77. Engaging
  78. Entertaining
  79. 4Happily Ever After?
  80. Why bother?Why go through the effort? What will I get out of this?What are the advantages?
  81. No promises, just an ideaBut one that has import…
  82. Intrinsic part of how we’re builtThe way we gather, process, organize, structure andstore information…
  83. The web is a repository of information…that is there to be processed, thought about, taken in,used, stored, and leveraged…
  84. Understand the mechanicsof storytelling so that you can convey information thebest way possible…
  85. Infuse Them with meaningEffectively connect with people’s emotional centers…
  86. EnchantmentYour stories will leave your end-users with little choicebut to become smitten with you.
  87. Start at the beginningStorytelling cannot be tacked on at the end – needs to bean integrated part of the process from the beginning.
  88. Will Help Avoid confusionBy increasing awareness about the company, brand,product and project at the beginning
  89. Contribute to BetternessBy give people what they hunger for
  90. Because“You are responsible for what you put into the world”- Mike Monteiro
  91. Give people the proper tools…To live a better life
  92. Create a better web for everyoneAnd create something you can be proud of.
  93. “The web is made of stories, not of pixels.”- Denise Jacobs, Web Design’s Lego
  94. And that’sThe End.
  95. My books! The CSS Detective Smashing Book #3 & InterAct With Guide #3⅓: The Extension Web Standards My chapter: My chapter: “Learning with the Web” “Storytelling in Webdesign”
  96. I speak. I tell stories. And I evangelize Photo used with permission:
  97. Thank You!Now it’s really The End!