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.

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

94. And that’s
The 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/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!