97
The Importance of Storytelling in Web Design Denise R. Jacobs WordCamp Miami Miami, FL 6 April 2013

The Importance of Storytelling in Web Design, WordCamp Miami 2013

  • View
    2.629

  • Download
    1

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: The Importance of Storytelling in Web Design, WordCamp Miami 2013

The Importance of Storytelling

in Web Design

Denise R. Jacobs

WordCamp Miami Miami, FL

6 April 2013

Page 2: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Tweeting Web Design Tall Tales

Your storyteller: @denisejacobs

This fine event is: @wcmia #wcmia

This story is about: #storyinwebdesign

Page 3: The Importance of Storytelling in Web Design, WordCamp Miami 2013

“The universe is made of stories, not of atoms.”

- Muriel Rukeyser, Speed of

Darkness

Page 4: The Importance of Storytelling in Web Design, WordCamp Miami 2013

http://www.flickr.com/photos/zlz212/198759134/

1 Why stories?

Page 5: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Not seeing the forest for the trees

Missing the Point

http://www.flickr.com/photos/verifex/3782787057/

Page 6: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Technique, best practices, process

Focus

Page 7: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Of web design, the web, and The Next Big Thing

Try to divine the future

http://nilanda13.edublogs.org/files/2012/09/crystal-ball-1k6d25c.jpg

Page 8: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Everyone is experiencing…

Because…

http://www.flickr.com/photos/brendio/71252025/

Page 9: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Users have evolved as well…

Information overload

http://www.flickr.com/photos/freeflyer09/7574540716/

Page 10: The Importance of Storytelling in Web Design, WordCamp Miami 2013

User are more sophisticated

Information + Meaning

http://www.flickr.com/photos/smoy/6143338263/

Page 11: The Importance of Storytelling in Web Design, WordCamp Miami 2013

+ connection

http://www.flickr.com/photos/thivierr/1501007265/

Page 12: The Importance of Storytelling in Web Design, WordCamp Miami 2013

And we don’t even realize it.

We are powerful

http://www.flickr.com/photos/89927155@N00/2144275209/

Page 13: The Importance of Storytelling in Web Design, WordCamp Miami 2013

That which we produce…

We take for Granted

http://www.flickr.com/photos/seanstayte/263927107/

Page 14: The Importance of Storytelling in Web Design, WordCamp Miami 2013

…shapes, and manipulates users

influences

http://www.flickr.com/photos/johannahobbs/2412291551/

Page 15: The Importance of Storytelling in Web Design, WordCamp Miami 2013

And manage our power

Enter into a pact with end-users

http://www.flickr.com/photos/wrote/2646295354/

Page 16: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Deliver information in a deep and meaningful way?

How can we…

http://www.flickr.com/photos/frozencapybara/1376454002/

Page 17: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Through Story!

http://www.flickr.com/photos/jeremyhall/3180031090/

Page 18: The Importance of Storytelling in Web Design, WordCamp Miami 2013

…Means going back to the past

Designing and building for the future

http://wikamag.com/wp-content/uploads/2012/10/back-to-the-future-part-ii-original.jpeg

Page 19: The Importance of Storytelling in Web Design, WordCamp Miami 2013

It’s the very essence and beginning of being human.

Storytelling is old

http://commons.wikimedia.org/wiki/File:Eastern_Story_Teller_%281878%29_-_TIMEA.jpg

Page 20: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Can plan for the future by looking at what has been done in the past

Can Practice Sankofa

Page 21: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Numbers and data are meaningful for very few humans.

Numbers don’t touch people

http://www.flickr.com/photos/carolynwill/4407204251/

Page 22: The Importance of Storytelling in Web Design, WordCamp Miami 2013

“Stories are important cognitive events, for they encapsulate, into one compact package, information, knowledge, context, and emotion.”

- Don Norman, Things that Make Us Smart

Page 23: The Importance of Storytelling in Web Design, WordCamp Miami 2013

To be human is to seek Story

http://commons.wikimedia.org/wiki/File:Spannende_Geschichte_19Jh.jpg

Page 24: The Importance of Storytelling in Web Design, WordCamp Miami 2013

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

Page 25: The Importance of Storytelling in Web Design, WordCamp Miami 2013

The only animals that tell stories

http://www.flickr.com/photos/elsie/417959889/

Page 26: The Importance of Storytelling in Web Design, WordCamp Miami 2013

…unless this story has a hint of verity…

“The Author of the Acacia Seeds” by Ursula Le Guin http://www.flickr.com/photos/binux/2495709841/ http://topwalls.net/wp-content/uploads/2012/01/Penguins-sea-blue-

swimming-animals-nature-background.jpg http://interconnected.org/home/more/2007/03/ acacia-seeds.html

Page 27: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Story may well be how and why we evolved.

Our very physiology may be due to story

http://en.wikipedia.org/wiki/File:Craniums_of_Homo.svg

Page 28: The Importance of Storytelling in Web Design, WordCamp Miami 2013

How our Brains work

http://www.flickr.com/photos/44568283@N02/4097561067/

Page 29: The Importance of Storytelling in Web Design, WordCamp Miami 2013

We are wired for story

http://www.flickr.com/photos/lorelei-ranveig/2294885420/

Page 30: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Catalogue & store with Story

http://www.flickr.com/photos/jonathanpberger/488748172/

Page 31: The Importance of Storytelling in Web Design, WordCamp Miami 2013

And infuse them with emotion to make them stick

Place facts into context

http://www.flickr.com/photos/ableman/543078380/

Page 32: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Persuade. Convince. Teach.

http://www.flickr.com/photos/mplemmon/2745435974/

Page 33: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Clarify complexity

http://www.flickr.com/photos/bitterjug/7670055210/

Page 34: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Story is rampant on the web

From blogs, to news, to social outlets http://dooce.com/ http://facebook.com/ http://www.bbc.com/

Page 35: The Importance of Storytelling in Web Design, WordCamp Miami 2013

We can be unaware that Story is what sucked us in

Unaware that it’s all about story

http://www.flickr.com/photos/allyaubryphotography/2443089993/

Page 36: The Importance of Storytelling in Web Design, WordCamp Miami 2013

The same process?

How would this affect our creations? http://www.flickr.com/photos/jkannenberg/2772942288/

Page 37: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Is two-fold…

My goal

http://www.flickr.com/photos/listentothemountains/5612244584/

Page 38: The Importance of Storytelling in Web Design, WordCamp Miami 2013

To make explicit what can go into storytelling a digital property

one

http://www.flickr.com/photos/thetruthabout/4321714366/

Page 39: The Importance of Storytelling in Web Design, WordCamp Miami 2013

To raise awareness of that which has been implicit in your planning process and to make it explicit

two

http://www.flickr.com/photos/thetruthabout/4321713960/

Page 40: The Importance of Storytelling in Web Design, WordCamp Miami 2013

http://www.flickr.com/photos/assbach/267598910/

2 Crafting Story for the Web

Page 41: The Importance of Storytelling in Web Design, WordCamp Miami 2013

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

Page 42: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Craft a narrative

http://www.flickr.com/photos/cannedtuna/4852756417/

Page 43: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Like Freddie Von Chimpenheimer IV!

Create Characters

http://mailchimp.com/

Page 44: The Importance of Storytelling in Web Design, WordCamp Miami 2013

To provide orientation in the site or app

Establish scene & setting

http://www.flickr.com/photos/bachmont/2633601262/

Page 45: The Importance of Storytelling in Web Design, WordCamp Miami 2013

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/

Additional layers

Page 46: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Websites are digital gamebooks

Non-Linearity

Page 47: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Who What Why

Where When

Must create strong connections between information

Causal Referencial Locational

Temporal

Content coherence

Page 48: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Comes from good content

Both micro- and macro- http://freshbooks.com/

Page 49: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Illuminating the narrative

Visual

http://www.flickr.com/photos/shyb/5027053990/

Page 50: The Importance of Storytelling in Web Design, WordCamp Miami 2013

= Pictorial Superiority Effect

PSE

http://www.pythagora.com/the-picture-superiority-effect/

Page 51: The Importance of Storytelling in Web Design, WordCamp Miami 2013

The basis of stories is linguistic, so how can we achieve visual storytelling?

Linguistic Analogues

http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/BilingualDictionaries.jpg/1038px-BilingualDictionaries.jpg

Page 52: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Sounds of web design

http://www.taginterativa.com.br/

Page 53: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Words of web design

http://mostlyserious.io/

Page 54: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Sentences/Phrases

http://www.deweyspizza.com/

Page 55: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Grammar and Punctuation

http://www.mydirtydesk.com/

Page 56: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Paragraphs

http://patterntap.com/

Page 57: The Importance of Storytelling in Web Design, WordCamp Miami 2013

The stories of User Experience

Interactive: Turning the pages

http://www.flickr.com/photos/msiebuhr/3527878691/

Page 58: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Aspirational Functional

Memory

3 types of stories

From a user experience standpoint http://www.flickr.com/photos/thetruthabout/4320980479/

Page 59: The Importance of Storytelling in Web Design, WordCamp Miami 2013

How we believe or hope an object will help us in the future.

Aspirational

http://www.flickr.com/photos/seeminglee/3893561976/

Page 60: The Importance of Storytelling in Web Design, WordCamp Miami 2013

How the object helps us accomplish a repeated task.

Functional

http://www.flickr.com/photos/ebarney/3348965637/

Page 61: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Positive memories of having used an object.

Memory

Photo: Denise Jacobs

Page 62: The Importance of Storytelling in Web Design, WordCamp Miami 2013

What does the process of incorporating Story into a project look like?

Stories, Clients, And Projects

http://www.flickr.com/photos/glsims99/4661181012

Page 63: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Start at the end and work backwards from that.

Reverse engineer

http://www.flickr.com/photos/argonne/4441693270/

Page 64: The Importance of Storytelling in Web Design, WordCamp Miami 2013

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/

Page 65: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Types of stories to provide structure

http://www.flickr.com/photos/carolynwill/4504703897/ http://www.themoleskin.com/2010/03/storytelling-in-business-elements-of-story-structure/

These sorts of stories can help the client understand their goals better.

Page 66: The Importance of Storytelling in Web Design, WordCamp Miami 2013

http://www.bang2write.com/wp-content/uploads/2013/03/tumblr_md87o5EcDB1r5inhvo1_500.jpg

3 Showing to Tell

Page 67: The Importance of Storytelling in Web Design, WordCamp Miami 2013

What do you think they are?

Stories should have Key elements

http://www.flickr.com/photos/karent/3673326282/

Page 68: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Comes from the story you want to tell and based on a genre

Visual theme

http://carbonmade.com/

Page 69: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Plot, characters…what else?

Components of Story

http://www.themoleskin.com/2010/03/storytelling-in-business-elements-of-story-structure/

Page 70: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Like similes!

Literary Devices

http://www.barrelofmonkeys.org/

Page 71: The Importance of Storytelling in Web Design, WordCamp Miami 2013

‘Nuff said.

Ur Doin’ it wrong

Page 72: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Where’s the story?

http://xhtmlcafe.net/

Page 73: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Get your story straight

http://wickedpalate.com/

Page 74: The Importance of Storytelling in Web Design, WordCamp Miami 2013

In stark contrast…

Who’s Doing it Well

Photo: Denise Jacobs

Page 75: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Evocative

http://impressapenguin.com/

Page 76: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Interactive

http://captaindash.com/

Page 77: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Engaging

http://www.spokespedicabs.com/

Page 78: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Entertaining

http://forefathersgroup.com/

Page 79: The Importance of Storytelling in Web Design, WordCamp Miami 2013

http://www.flickr.com/photos/sonialuna/2942020058/

4 Happily Ever After?

Page 80: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Why go through the effort? What will I get out of this? What are the advantages?

Why bother?

http://www.flickr.com/photos/auntiep/3083645776/

Page 81: The Importance of Storytelling in Web Design, WordCamp Miami 2013

But one that has import…

No promises, just an idea

http://www.flickr.com/photos/onegiantleap/4124211492/

Page 82: The Importance of Storytelling in Web Design, WordCamp Miami 2013

The way we gather, process, organize, structure and store information…

Intrinsic part of how we’re built

http://commons.wikimedia.org/wiki/File:The_Historian_%28The_How_and_Why_Library%29.jpg

Page 83: The Importance of Storytelling in Web Design, WordCamp Miami 2013

that is there to be processed, thought about, taken in, used, stored, and leveraged…

The web is a repository of information…

http://commons.wikimedia.org/wiki/File:Library_of_Congress_Great_Hall_-_Jan_2006.jpg

Page 84: The Importance of Storytelling in Web Design, WordCamp Miami 2013

of storytelling so that you can convey information the best way possible…

Understand the mechanics

http://www.flickr.com/photos/mag3737/304687602/

Page 85: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Effectively connect with people’s emotional centers…

Infuse Them with meaning

http://www.flickr.com/photos/pinksherbet/3212080263/

Page 86: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Your stories will leave your end-users with little choice but to become smitten with you.

Enchantment

Page 87: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Storytelling cannot be tacked on at the end – needs to be an integrated part of the process from the beginning.

Start at the beginning

http://www.flickr.com/photos/ilike/3707503212/

Page 88: The Importance of Storytelling in Web Design, WordCamp Miami 2013

By increasing awareness about the company, brand, product and project at the beginning

Will Help Avoid confusion

http://www.flickr.com/photos/anotherjesse/243020629/

Page 89: The Importance of Storytelling in Web Design, WordCamp Miami 2013

By give people what they hunger for

Contribute to Betterness

http://commons.wikimedia.org/wiki/File:School_Lunch_Programs.gif

Page 90: The Importance of Storytelling in Web Design, WordCamp Miami 2013

“You are responsible for what you put into the world” - Mike Monteiro

Because

http://www.flickr.com/photos/siutou_amy/2306794554/

Page 91: The Importance of Storytelling in Web Design, WordCamp Miami 2013

To live a better life

Give people the proper tools…

http://commons.wikimedia.org/wiki/File:Colored_Childrens_Library_in_US.jpg

Page 92: The Importance of Storytelling in Web Design, WordCamp Miami 2013

And create something you can be proud of.

Create a better web for everyone

http://www.flickr.com/photos/pocait/2847866615/

Page 93: The Importance of Storytelling in Web Design, WordCamp Miami 2013

“The web is made of stories, not of pixels.”

- Denise Jacobs, Web

Design’s Lego

Page 94: The Importance of Storytelling in Web Design, WordCamp Miami 2013

The End.

And that’s

Page 95: The Importance of Storytelling in Web Design, WordCamp Miami 2013

My books!

InterAct With Web Standards InterActWithWebStandards.com

My chapter: “Learning with the Web”

Smashing Book #3 & #3⅓: The Extension SmashingBook.com

My chapter: “Storytelling in Webdesign”

The CSS Detective Guide CSSDetectiveGuide.com

Page 96: The Importance of Storytelling in Web Design, WordCamp Miami 2013

DeniseJacobs.com [email protected]

I speak. I tell stories. And I evangelize creativity.

Photo used with permission: http://www.flickr.com/photos/aarronwalter/4629078087/

twitter.com/denisejacobs facebook.com/denisejacobsdotcom

Page 97: The Importance of Storytelling in Web Design, WordCamp Miami 2013

Now it’s really The End!

Thank You!