The Importance of Storytelling in Web Design, WordCamp Miami 2013
10 likes•6,950 views
The document discusses the importance of storytelling in web design. It argues that storytelling is how humans naturally gather and process information, and that websites should incorporate story elements like characters, plots, and settings to effectively engage users. Specific examples of websites that successfully use stories are provided. The presentation encourages designers to think of themselves as modern storytellers and to integrate narrative elements into their design process from the beginning of a project.
The Importance of Storytelling in Web Design, WordCamp Miami 2013
- 1. The Importance of 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. 1 Why stories? http://www.flickr.com/photos/zlz212/198759134/
- 5. Missing the Point Not seeing the forest for the trees http://www.flickr.com/photos/verifex/3782787057/
- 6. Focus Technique, best practices, process
- 7. Try to divine the future Of web design, the web, and The Next Big Thing http://nilanda13.edublogs.org/files/2012/09/crystal-ball-1k6d25c.jpg
- 8. Because… Everyone is experiencing… http://www.flickr.com/photos/brendio/71252025/
- 9. Information overload Users have evolved as well… http://www.flickr.com/photos/freeflyer09/7574540716/
- 10. Information + Meaning User are more sophisticated http://www.flickr.com/photos/smoy/6143338263/
- 11. + connection http://www.flickr.com/photos/thivierr/1501007265/
- 12. We are powerful And we don’t even realize it. http://www.flickr.com/photos/89927155@N00/2144275209/
- 13. We take for Granted That which we produce… http://www.flickr.com/photos/seanstayte/263927107/
- 14. influences …shapes, and manipulates users http://www.flickr.com/photos/johannahobbs/2412291551/
- 15. Enter into a pact with end-users And manage our power http://www.flickr.com/photos/wrote/2646295354/
- 16. How can we… Deliver information in a deep and meaningful way? http://www.flickr.com/photos/frozencapybara/1376454002/
- 17. Through Story! http://www.flickr.com/photos/jeremyhall/3180031090/
- 18. Designing and building for the future …Means going back to the past http://wikamag.com/wp-content/uploads/2012/10/back-to-the-future-part-ii-original.jpeg
- 19. Storytelling is old It’s the very essence and beginning of being human. http://commons.wikimedia.org/wiki/File:Eastern_Story_Teller_%281878%29_-_TIMEA.jpg
- 20. Can Practice Sankofa Can plan for the future by looking at what has been done in the past
- 21. Numbers don’t touch people Numbers and data are meaningful for very few humans. http://www.flickr.com/photos/carolynwill/4407204251/
- 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 http://commons.wikimedia.org/wiki/File:Spannende_Geschichte_19Jh.jpg
- 24. Language + desire to help = solves problems http://commons.wikimedia.org/wiki/File:George_de_Forest_Brush_Study_for_The_Picture_Writer%27s_Story_c1884.jpg
- 25. The only animals that tell stories http://www.flickr.com/photos/elsie/417959889/
- 26. …unless this story has a hint of verity… “The Author of the Acacia Seeds” by Ursula Le Guin http://topwalls.net/wp-content/uploads/2012/01/Penguins-sea-blue- http://interconnected.org/home/more/2007/03/ http://www.flickr.com/photos/binux/2495709841/ swimming-animals-nature-background.jpg acacia-seeds.html
- 27. Our very physiology may be due to story Story may well be how and why we evolved. http://en.wikipedia.org/wiki/File:Craniums_of_Homo.svg
- 28. How our Brains work http://www.flickr.com/photos/44568283@N02/4097561067/
- 29. We are wired for story http://www.flickr.com/photos/lorelei-ranveig/2294885420/
- 30. Catalogue & store with Story http://www.flickr.com/photos/jonathanpberger/488748172/
- 31. Place facts into context And infuse them with emotion to make them stick http://www.flickr.com/photos/ableman/543078380/
- 32. Persuade. Convince. Teach. http://www.flickr.com/photos/mplemmon/2745435974/
- 33. Clarify complexity http://www.flickr.com/photos/bitterjug/7670055210/
- 34. Story is rampant on the web From blogs, to news, to social outlets http://dooce.com/ http://facebook.com/ http://www.bbc.com/
- 35. Unaware that it’s all about story We can be unaware that Story is what sucked us in http://www.flickr.com/photos/allyaubryphotography/2443089993/
- 36. The same process? How would this affect our creations? http://www.flickr.com/photos/jkannenberg/2772942288/
- 37. My goal Is two-fold… http://www.flickr.com/photos/listentothemountains/5612244584/
- 38. one To make explicit what can go into storytelling a digital property http://www.flickr.com/photos/thetruthabout/4321714366/
- 39. two To raise awareness of that which has been implicit in your planning process and to make it explicit http://www.flickr.com/photos/thetruthabout/4321713960/
- 40. 2 Crafting Story for the Web http://www.flickr.com/photos/assbach/267598910/
- 41. 21st Century Bards We are the creators, purveyors, and distributors of information, marketing, branding and services in the digital space. http://commons.wikimedia.org/wiki/File:Holl_Shakespeare2.png
- 42. Craft a narrative http://www.flickr.com/photos/cannedtuna/4852756417/
- 43. Create Characters Like Freddie Von Chimpenheimer IV! http://mailchimp.com/
- 44. Establish scene & setting To provide orientation in the site or app http://www.flickr.com/photos/bachmont/2633601262/
- 45. Additional layers Content, Visual, UX http://www.flickr.com/photos/ari/502329223/ http://www.flickr.com/photos/thorne-enterprises/292027130/ http://www.flickr.com/photos/xixidu/505627002/
- 46. Non-Linearity Websites are digital gamebooks
- 47. Who Causal What Referencial Why Locational Where Temporal When Content coherence Must create strong connections between information
- 48. Comes from good content Both micro- and macro- http://freshbooks.com/
- 49. Visual Illuminating the narrative http://www.flickr.com/photos/shyb/5027053990/
- 50. PSE = Pictorial Superiority Effect http://www.pythagora.com/the-picture-superiority-effect/
- 51. Linguistic Analogues The basis of stories is linguistic, so how can we achieve visual storytelling? http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/BilingualDictionaries.jpg/1038px-BilingualDictionaries.jpg
- 52. Sounds of web design http://www.taginterativa.com.br/
- 53. Words of web design http://mostlyserious.io/
- 54. Sentences/Phrases http://www.deweyspizza.com/
- 55. Grammar and Punctuation http://www.mydirtydesk.com/
- 56. Paragraphs http://patterntap.com/
- 57. Interactive: Turning the pages The stories of User Experience http://www.flickr.com/photos/msiebuhr/3527878691/
- 58. Aspirational Functional Memory 3 types of stories From a user experience standpoint http://www.flickr.com/photos/thetruthabout/4320980479/
- 59. Aspirational How we believe or hope an object will help us in the future. http://www.flickr.com/photos/seeminglee/3893561976/
- 60. Functional How the object helps us accomplish a repeated task. http://www.flickr.com/photos/ebarney/3348965637/
- 61. Memory Positive memories of having used an object. Photo: Denise Jacobs
- 62. Stories, Clients, And Projects What does the process of incorporating Story into a project look like? http://www.flickr.com/photos/glsims99/4661181012
- 63. Reverse engineer Start at the end and work backwards from that. http://www.flickr.com/photos/argonne/4441693270/
- 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 project Here are a few good questions to start with… http://www.flickr.com/photos/atomicity/22489512/
- 65. Types of stories to provide structure These sorts of stories can help the client understand their goals better. http://www.flickr.com/photos/carolynwill/4504703897/ http://www.themoleskin.com/2010/03/storytelling-in-business-elements-of-story-structure/
- 66. 3 Showing to Tell http://www.bang2write.com/wp-content/uploads/2013/03/tumblr_md87o5EcDB1r5inhvo1_500.jpg
- 67. Stories should have Key elements What do you think they are? http://www.flickr.com/photos/karent/3673326282/
- 68. Visual theme Comes from the story you want to tell and based on a genre http://carbonmade.com/
- 69. Components of Story Plot, characters…what else? http://www.themoleskin.com/2010/03/storytelling-in-business-elements-of-story-structure/
- 70. Literary Devices Like similes! http://www.barrelofmonkeys.org/
- 71. Ur Doin’ it wrong ‘Nuff said.
- 72. Where’s the story? http://xhtmlcafe.net/
- 73. Get your story straight http://wickedpalate.com/
- 74. Who’s Doing it Well In stark contrast… Photo: Denise Jacobs
- 75. Evocative http://impressapenguin.com/
- 76. Interactive http://captaindash.com/
- 77. Engaging http://www.spokespedicabs.com/
- 78. Entertaining http://forefathersgroup.com/
- 79. 4 Happily Ever After? http://www.flickr.com/photos/sonialuna/2942020058/
- 80. Why bother? Why go through the effort? What will I get out of this? What are the advantages? http://www.flickr.com/photos/auntiep/3083645776/
- 81. No promises, just an idea But one that has import… http://www.flickr.com/photos/onegiantleap/4124211492/
- 82. Intrinsic part of how we’re built The way we gather, process, organize, structure and store information… http://commons.wikimedia.org/wiki/File:The_Historian_%28The_How_and_Why_Library%29.jpg
- 83. The web is a repository of information… that is there to be processed, thought about, taken in, used, stored, and leveraged… http://commons.wikimedia.org/wiki/File:Library_of_Congress_Great_Hall_-_Jan_2006.jpg
- 84. Understand the mechanics of storytelling so that you can convey information the best way possible… http://www.flickr.com/photos/mag3737/304687602/
- 85. Infuse Them with meaning Effectively connect with people’s emotional centers… http://www.flickr.com/photos/pinksherbet/3212080263/
- 86. Enchantment Your stories will leave your end-users with little choice but to become smitten with you.
- 87. Start at the beginning Storytelling cannot be tacked on at the end – needs to be an integrated part of the process from the beginning. http://www.flickr.com/photos/ilike/3707503212/
- 88. Will Help Avoid confusion By increasing awareness about the company, brand, product and project at the beginning http://www.flickr.com/photos/anotherjesse/243020629/
- 89. Contribute to Betterness By give people what they hunger for http://commons.wikimedia.org/wiki/File:School_Lunch_Programs.gif
- 90. Because “You are responsible for what you put into the world” - Mike Monteiro http://www.flickr.com/photos/siutou_amy/2306794554/
- 91. Give people the proper tools… To live a better life http://commons.wikimedia.org/wiki/File:Colored_Childrens_Library_in_US.jpg
- 92. Create a better web for everyone And create something you can be proud of. http://www.flickr.com/photos/pocait/2847866615/
- 93. “The web is made of stories, not of pixels.” - Denise Jacobs, Web Design’s Lego
- 95. My books! The CSS Detective Smashing Book #3 & InterAct With Guide #3⅓: The Extension Web Standards InterActWithWebStandards.com CSSDetectiveGuide.com SmashingBook.com My chapter: My chapter: “Learning with the Web” “Storytelling in Webdesign”
- 96. I speak. I tell stories. And I evangelize creativity. DeniseJacobs.com twitter.com/denisejacobs denise@denisejacobs.com facebook.com/denisejacobsdotcom Photo used with permission: http://www.flickr.com/photos/aarronwalter/4629078087/
- 97. Thank You! Now it’s really The End!