Here are some key elements of stories that should be incorporated into web design:- Characters: Who are the main people/entities involved in the experience? - Setting: Where and when does the story take place? Provides context.- Plot: What is the sequence of events that unfold? Creates narrative arc.- Conflict: What problem or struggle do characters face? Drives story forward.- Resolution: How is the conflict ultimately resolved? Provides satisfaction. - Theme: What is the underlying message or idea explored in the story? Gives meaning.- Visual theme: How can visual design reinforce and enhance the story elements? Creates cohesion.By considering these classic story
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.
Similaire à Here are some key elements of stories that should be incorporated into web design:- Characters: Who are the main people/entities involved in the experience? - Setting: Where and when does the story take place? Provides context.- Plot: What is the sequence of events that unfold? Creates narrative arc.- Conflict: What problem or struggle do characters face? Drives story forward.- Resolution: How is the conflict ultimately resolved? Provides satisfaction. - Theme: What is the underlying message or idea explored in the story? Gives meaning.- Visual theme: How can visual design reinforce and enhance the story elements? Creates cohesion.By considering these classic story
Similaire à Here are some key elements of stories that should be incorporated into web design:- Characters: Who are the main people/entities involved in the experience? - Setting: Where and when does the story take place? Provides context.- Plot: What is the sequence of events that unfold? Creates narrative arc.- Conflict: What problem or struggle do characters face? Drives story forward.- Resolution: How is the conflict ultimately resolved? Provides satisfaction. - Theme: What is the underlying message or idea explored in the story? Gives meaning.- Visual theme: How can visual design reinforce and enhance the story elements? Creates cohesion.By considering these classic story (20)
Here are some key elements of stories that should be incorporated into web design:- Characters: Who are the main people/entities involved in the experience? - Setting: Where and when does the story take place? Provides context.- Plot: What is the sequence of events that unfold? Creates narrative arc.- Conflict: What problem or struggle do characters face? Drives story forward.- Resolution: How is the conflict ultimately resolved? Provides satisfaction. - Theme: What is the underlying message or idea explored in the story? Gives meaning.- Visual theme: How can visual design reinforce and enhance the story elements? Creates cohesion.By considering these classic story
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
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/
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/
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/
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/
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/
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/
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/