The Importance of Storytelling in Web Design, WordCamp Miami 2013

2,999
-1

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
3 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,999
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
70
Comments
3
Likes
9
Embeds 0
No embeds

No notes for slide

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? http://www.flickr.com/photos/zlz212/198759134/
  5. Missing the PointNot seeing the forest for the trees http://www.flickr.com/photos/verifex/3782787057/
  6. FocusTechnique, best practices, process
  7. Try to divine the futureOf 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 overloadUsers have evolved as well… http://www.flickr.com/photos/freeflyer09/7574540716/
  10. Information + MeaningUser are more sophisticated http://www.flickr.com/photos/smoy/6143338263/
  11. + connection http://www.flickr.com/photos/thivierr/1501007265/
  12. We are powerfulAnd we don’t even realize it. http://www.flickr.com/photos/89927155@N00/2144275209/
  13. We take for GrantedThat 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-usersAnd 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 oldIt’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 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. 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 storyStory 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 contextAnd 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 webFrom blogs, to news, to social outletshttp://dooce.com/ http://facebook.com/ http://www.bbc.com/
  35. Unaware that it’s all about storyWe 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 goalIs two-fold… http://www.flickr.com/photos/listentothemountains/5612244584/
  38. oneTo make explicit what can go into storytelling a digitalproperty http://www.flickr.com/photos/thetruthabout/4321714366/
  39. twoTo raise awareness of that which has been implicit inyour planning process and to make it explicit http://www.flickr.com/photos/thetruthabout/4321713960/
  40. 2Crafting Story for the Web http://www.flickr.com/photos/assbach/267598910/
  41. 21st Century BardsWe 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 CharactersLike Freddie Von Chimpenheimer IV! http://mailchimp.com/
  44. Establish scene & settingTo provide orientation in the site or app http://www.flickr.com/photos/bachmont/2633601262/
  45. Additional layersContent, Visual, UXhttp://www.flickr.com/photos/ari/502329223/ http://www.flickr.com/photos/thorne-enterprises/292027130/ http://www.flickr.com/photos/xixidu/505627002/
  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- http://freshbooks.com/
  49. VisualIlluminating the narrative http://www.flickr.com/photos/shyb/5027053990/
  50. PSE= Pictorial Superiority Effect http://www.pythagora.com/the-picture-superiority-effect/
  51. Linguistic AnaloguesThe basis of stories is linguistic, so how can we achieve visualstorytelling? 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 pagesThe stories of User Experience http://www.flickr.com/photos/msiebuhr/3527878691/
  58. Aspirational Functional Memory3 types of storiesFrom a user experience standpoint http://www.flickr.com/photos/thetruthabout/4320980479/
  59. AspirationalHow we believe or hope an object will help us in thefuture. http://www.flickr.com/photos/seeminglee/3893561976/
  60. FunctionalHow the object helps us accomplish a repeated task. http://www.flickr.com/photos/ebarney/3348965637/
  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? http://www.flickr.com/photos/glsims99/4661181012
  63. Reverse engineerStart 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 projectHere are a few good questions to start with… http://www.flickr.com/photos/atomicity/22489512/
  65. Types of stories to provide structureThese sorts of stories can help the client understandtheir goals better.http://www.flickr.com/photos/carolynwill/4504703897/ http://www.themoleskin.com/2010/03/storytelling-in-business-elements-of-story-structure/
  66. 3Showing to Tell http://www.bang2write.com/wp-content/uploads/2013/03/tumblr_md87o5EcDB1r5inhvo1_500.jpg
  67. Stories should have Key elementsWhat do you think they are? http://www.flickr.com/photos/karent/3673326282/
  68. Visual themeComes from the story you want to tell and based on agenre http://carbonmade.com/
  69. Components of StoryPlot, characters…what else? http://www.themoleskin.com/2010/03/storytelling-in-business-elements-of-story-structure/
  70. Literary DevicesLike 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 WellIn 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. 4Happily 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 ideaBut one that has import… http://www.flickr.com/photos/onegiantleap/4124211492/
  82. Intrinsic part of how we’re builtThe way we gather, process, organize, structure andstore 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 mechanicsof storytelling so that you can convey information thebest way possible… http://www.flickr.com/photos/mag3737/304687602/
  85. Infuse Them with meaningEffectively connect with people’s emotional centers… http://www.flickr.com/photos/pinksherbet/3212080263/
  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. http://www.flickr.com/photos/ilike/3707503212/
  88. Will Help Avoid confusionBy increasing awareness about the company, brand,product and project at the beginning http://www.flickr.com/photos/anotherjesse/243020629/
  89. Contribute to BetternessBy 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 everyoneAnd 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
  94. And that’sThe End.
  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/denisejacobsdenise@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!

×