Your SlideShare is downloading. ×
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
The Importance of Storytelling in Web Design, WordCamp Miami 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Importance of Storytelling in Web Design, WordCamp Miami 2013

2,505

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 …

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
1 Comment
5 Likes
Statistics
Notes
  • Loved it Denise! Your story in dozens of pictures had me staying later than I wanted at my computer because it was compelling. Great images (really like slide 27, 41 & 50) and solid insights on how tell a story, what to do to design one. Will definitely share.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,505
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
64
Comments
1
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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!

×