Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
The Importanceof Storytelling  in Web Design  Denise R. Jacobs     WordCamp Miami            Miami, FL          6 April 2013
Tweeting Web Design Tall Tales                         Your storyteller:                          @denisejacobs           ...
“The universe is made of  stories, not of atoms.”- Muriel Rukeyser, Speed of  Darkness
1Why stories?               http://www.flickr.com/photos/zlz212/198759134/
Missing the PointNot seeing the forest for the trees                                      http://www.flickr.com/photos/ver...
FocusTechnique, best practices, process
Try to divine the futureOf web design, the web, and The Next Big Thing                                   http://nilanda13....
Because…Everyone is experiencing…                            http://www.flickr.com/photos/brendio/71252025/
Information overloadUsers have evolved as well…                              http://www.flickr.com/photos/freeflyer09/7574...
Information + MeaningUser are more sophisticated                              http://www.flickr.com/photos/smoy/6143338263/
+ connection               http://www.flickr.com/photos/thivierr/1501007265/
We are powerfulAnd we don’t even realize it.                                http://www.flickr.com/photos/89927155@N00/2144...
We take for GrantedThat which we produce…                         http://www.flickr.com/photos/seanstayte/263927107/
influences…shapes, and manipulates users                                 http://www.flickr.com/photos/johannahobbs/2412291...
Enter into a pact with end-usersAnd manage our power                                   http://www.flickr.com/photos/wrote/...
How can we…Deliver information in a deep and meaningful way?                                     http://www.flickr.com/pho...
Through Story!                 http://www.flickr.com/photos/jeremyhall/3180031090/
Designing and building for the future…Means going back to the past                                http://wikamag.com/wp-co...
Storytelling is oldIt’s the very essence and beginning of being human.                                  http://commons.wik...
Can Practice SankofaCan plan for the future by looking at what has been done in the past
Numbers don’t touch peopleNumbers and data are meaningful for very fewhumans.                                      http://...
“Stories are important  cognitive events, for they  encapsulate, into one  compact package,  information, knowledge,  cont...
To be human is to seek Story                               http://commons.wikimedia.org/wiki/File:Spannende_Geschichte_19J...
Language + desire to help = solves problems                        http://commons.wikimedia.org/wiki/File:George_de_Forest...
The only animals that tell stories                                     http://www.flickr.com/photos/elsie/417959889/
…unless this story has a hint of verity…“The Author of the Acacia Seeds” by Ursula Le Guin                                ...
Our very physiology may be due to storyStory may well be how and why we evolved.                                          ...
How our Brains work                      http://www.flickr.com/photos/44568283@N02/4097561067/
We are wired for story                         http://www.flickr.com/photos/lorelei-ranveig/2294885420/
Catalogue & store with Story                               http://www.flickr.com/photos/jonathanpberger/488748172/
Place facts into contextAnd infuse them with emotion to make them stick                                      http://www.fl...
Persuade. Convince. Teach.                             http://www.flickr.com/photos/mplemmon/2745435974/
Clarify complexity                     http://www.flickr.com/photos/bitterjug/7670055210/
Story is rampant on the webFrom blogs, to news, to social outletshttp://dooce.com/         http://facebook.com/   http://w...
Unaware that it’s all about storyWe can be unaware that Story is what sucked us in                                    http...
The same process?How would this affect our creations?                                       http://www.flickr.com/photos/j...
My goalIs two-fold…               http://www.flickr.com/photos/listentothemountains/5612244584/
oneTo make explicit what can go into storytelling a digitalproperty                                         http://www.fli...
twoTo raise awareness of that which has been implicit inyour planning process and to make it explicit                     ...
2Crafting Story for the Web                             http://www.flickr.com/photos/assbach/267598910/
21st Century BardsWe are the creators, purveyors, and distributors of information,marketing, branding and services in the ...
Craft a narrative                    http://www.flickr.com/photos/cannedtuna/4852756417/
Create CharactersLike Freddie Von Chimpenheimer IV!                                     http://mailchimp.com/
Establish scene & settingTo provide orientation in the site or app                                            http://www.f...
Additional layersContent, Visual, UXhttp://www.flickr.com/photos/ari/502329223/   http://www.flickr.com/photos/thorne-ente...
Non-LinearityWebsites are digital gamebooks
Who                     CausalWhat                     ReferencialWhy                     LocationalWhere                 ...
Comes from good contentBoth micro- and macro-                          http://freshbooks.com/
VisualIlluminating the narrative                             http://www.flickr.com/photos/shyb/5027053990/
PSE= Pictorial Superiority Effect                                 http://www.pythagora.com/the-picture-superiority-effect/
Linguistic AnaloguesThe basis of stories is linguistic, so how can we achieve visualstorytelling?                         ...
Sounds of web design                       http://www.taginterativa.com.br/
Words of web design                      http://mostlyserious.io/
Sentences/Phrases                    http://www.deweyspizza.com/
Grammar and Punctuation                          http://www.mydirtydesk.com/
Paragraphs             http://patterntap.com/
Interactive: Turning the pagesThe stories of User Experience                                 http://www.flickr.com/photos/...
Aspirational                           Functional                           Memory3 types of storiesFrom a user experience...
AspirationalHow we believe or hope an object will help us in thefuture.                                        http://www....
FunctionalHow the object helps us accomplish a repeated task.                                         http://www.flickr.co...
MemoryPositive memories of having used an object.                                              Photo: Denise Jacobs
Stories, Clients, And ProjectsWhat does the process of incorporating Story into aproject look like?                       ...
Reverse engineerStart at the end and work backwards from that.                                         http://www.flickr.c...
What is the client’s and                            brand’s story?                            What is the story the user  ...
Types of stories to provide structureThese sorts of stories can help the client understandtheir goals better.http://www.fl...
3Showing to Tell                  http://www.bang2write.com/wp-content/uploads/2013/03/tumblr_md87o5EcDB1r5inhvo1_500.jpg
Stories should have Key elementsWhat do you think they are?                                   http://www.flickr.com/photos...
Visual themeComes from the story you want to tell and based on agenre                                                http:...
Components of StoryPlot, characters…what else?                              http://www.themoleskin.com/2010/03/storytellin...
Literary DevicesLike similes!                   http://www.barrelofmonkeys.org/
Ur Doin’ it wrong‘Nuff said.
Where’s the story?                     http://xhtmlcafe.net/
Get your story straight                          http://wickedpalate.com/
Who’s Doing it WellIn stark contrast…                      Photo: Denise Jacobs
Evocative            http://impressapenguin.com/
Interactive              http://captaindash.com/
Engaging           http://www.spokespedicabs.com/
Entertaining               http://forefathersgroup.com/
4Happily Ever After?                      http://www.flickr.com/photos/sonialuna/2942020058/
Why bother?Why go through the effort? What will I get out of this?What are the advantages?                                ...
No promises, just an ideaBut one that has import…                            http://www.flickr.com/photos/onegiantleap/412...
Intrinsic part of how we’re builtThe way we gather, process, organize, structure andstore information…                    ...
The web is a repository of information…that is there to be processed, thought about, taken in,used, stored, and leveraged…...
Understand the mechanicsof storytelling so that you can convey information thebest way possible…                          ...
Infuse Them with meaningEffectively connect with people’s emotional centers…                                       http://...
EnchantmentYour stories will leave your end-users with little choicebut to become smitten with you.
Start at the beginningStorytelling cannot be tacked on at the end – needs to bean integrated part of the process from the ...
Will Help Avoid confusionBy increasing awareness about the company, brand,product and project at the beginning            ...
Contribute to BetternessBy give people what they hunger for                                      http://commons.wikimedia....
Because“You are responsible for what you put into the world”- Mike Monteiro                                        http://...
Give people the proper tools…To live a better life                                http://commons.wikimedia.org/wiki/File:C...
Create a better web for everyoneAnd create something you can be proud of.                                        http://ww...
“The web is made of stories,  not of pixels.”- Denise Jacobs, Web  Design’s Lego
And that’sThe End.
My books! The CSS Detective        Smashing Book #3 &            InterAct With Guide                    #3⅓: The Extension...
I speak. I tell stories. And I evangelize creativity.DeniseJacobs.com                      twitter.com/denisejacobsdenise@...
Thank You!Now it’s really The End!
Prochain SlideShare
Chargement dans…5
×

The Importance of Storytelling in Web Design, WordCamp Miami 2013

5 855 vues

Publié le

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.

Publié dans : Technologie

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!

×