Graphic Storytelling in New Media

A presentation at Web Visions 2009 in May 2009 in Portland, OR, USA by Tyler Sticka

Slide 1

Slide 1

GRAPHIC STORYTELLING IN NEW MEDIA

Slide 2

Slide 2

It’s nice to meet you. You look amazing, by the way.

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

http://blog.eachday.com/2007/8/1/bubble-logo-insanity

Slide 7

Slide 7

“a brand is a person’s gut feeling about a product, service or organization” Marty Neumeier, The Brand Gap

Slide 8

Slide 8

Krazy Kat (© King Features Syndicate) virb.com

Slide 9

Slide 9

Voltron (© World Events Productions)

Slide 10

Slide 10

Spider-Man (© Marvel), Popeye (© King Features Syndicate), Peanuts (© United Features Syndicate)

Slide 11

Slide 11

Watchmen (© Warner Bros. Entertainment)

Slide 12

Slide 12

Bone (© Jeff Smith)

Slide 13

Slide 13

Juxtaposed pictorial and other images in deliberate sequence, intended to convey information and/or to produce an aesthetic response in the viewer. Scott McCloud, Understanding Comics

Slide 14

Slide 14

Immediacy

Slide 15

Slide 15

Universality

Slide 16

Slide 16

Versatility

Slide 17

Slide 17

Ease-of-creation

Slide 18

Slide 18

Dark Knight Returns (© Warner Bros. Entertainment)

Slide 19

Slide 19

Slide 20

Slide 20

DIY

Slide 21

Slide 21

Content vs. Delivery

Slide 22

Slide 22

Versatility

Slide 23

Slide 23

Slide 24

Slide 24

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity. Jeffrey Zeldman, Understanding Web Design

Slide 25

Slide 25

“ ”

Slide 26

Slide 26

pictorial (content)

Slide 27

Slide 27

sequence

Slide 28

Slide 28

010100 01001 0101 011 010 01 01 10 00 01 0101001 1 0 00 1 0 10 1 0 0 0001010 101 1 0 10 1 10 0100100010010010100010 0 0 0 1 1010 010 1 100 0 0 1 010 0 01 10 1 0 10 1 1 10 0 0 00 1 10 001 0 1 0 1 0 1 0 001 0 1 0 10 1 0 00 1 01 0 10 1 0 digital environments

Slide 29

Slide 29

010100 01001 0101 011 010 01 01 10 00 01 0101001 1 0 00 1 0 10 1 0 0 0001010 101 1 0 10 1 10 0100100010010010100010 0 0 0 1 1010 010 1 100 0 0 1 010 0 01 10 1 0 10 1 1 10 0 0 00 1 10 001 0 1 0 1 0 1 0 001 0 1 0 10 1 0 00 1 01 0 10 1 0 human interaction

Slide 30

Slide 30

Slide 31

Slide 31

010100 01001 0101 011 010 01 01 10 00 01 0101001 1 0 00 1 0 10 1 0 0 0001010 101 1 0 10 1 10 0100100010010010100010 0 0 0 1 1010 010 1 100 0 0 1 010 0 01 10 1 0 10 1 1 10 0 0 00 1 10 001 0 1 0 1 0 1 0 001 0 1 0 10 1 0 00 1 01 0 10 1 0 (Success!)

Slide 32

Slide 32

stories/videos/imagery digg/bury 010100 01001 0101 011 010 01 01 10 00 01 0101001 1 0 00 1 0 10 1 0 0 0001010 101 1 0 10 1 10 0100100010010010100010 0 0 0 1 1010 010 1 100 0 0 1 010 0 01 10 1 0 10 1 1 10 0 0 00 1 10 001 0 1 0 1 0 1 0 001 0 1 0 10 1 0 00 1 01 0 10 1 0

Slide 33

Slide 33

Messages Themes/Labs 0100100010010010100010 0 0 0 1 1010 010 1 100 0 0 1 010 0 01 10 1 0 10 1 1 10 0 0 00 1 10 0001010 101 1 0 10 1 10 010100 01001 0101 011 010 01 01 10 00 01 0101001 1 0 00 1 0 10 1 0 0 Conversations 001 0 1 0 1 0 1 0 001 0 1 0 10 1 0 00 1 01 0 10 1 0

Slide 34

Slide 34

API Photos/Videos 0100100010010010100010 0 0 0 1 1010 010 1 100 0 0 1 010 0 01 10 1 0 10 1 1 10 0 0 00 1 10 0001010 101 1 0 10 1 10 010100 01001 0101 011 010 01 01 10 00 01 0101001 1 0 00 1 0 10 1 0 0 Slideshows 001 0 1 0 1 0 1 0 001 0 1 0 10 1 0 00 1 01 0 10 1 0

Slide 35

Slide 35

API Tweets 0100100010010010100010 0 0 0 1 1010 010 1 100 0 0 1 010 0 01 10 1 0 10 1 1 10 0 0 00 1 10 0001010 101 1 0 10 1 10 010100 01001 0101 011 010 01 01 10 00 01 0101001 1 0 00 1 0 10 1 0 0 Following 001 0 1 0 1 0 1 0 001 0 1 0 10 1 0 00 1 01 0 10 1 0

Slide 36

Slide 36

Slide 37

Slide 37

Blankets (© Craig Thompson)

Slide 38

Slide 38

Kane (© Paul Grist)

Slide 39

Slide 39

Maus (© Art Spiegelman)

Slide 40

Slide 40

Cerebus (© Dave Sim)

Slide 41

Slide 41

Slide 42

Slide 42

PVP (© Scott Kurtz), Penny Arcade (© Penny Arcade, Inc.)

Slide 43

Slide 43

Calvin & Hobbes (© United Features Syndicate)

Slide 44

Slide 44

Watchmen (© Warner Bros. Entertainment)

Slide 45

Slide 45

Garfield (© PAWS, Inc.)

Slide 46

Slide 46

I Can’t Stop Thinking! (© Scott McCloud)

Slide 47

Slide 47

The Right Number (© Scott McCloud)

Slide 48

Slide 48

Magic Inkwell Comic Strip Theatre (© Cat Garza, Jr.)

Slide 49

Slide 49

Pup (© Drew Weing)

Slide 50

Slide 50

When I Am King (© Demian 5)

Slide 51

Slide 51

Slide 52

Slide 52

“ Anne Busquet, of American Express, said that this is not, in fact, the ‘Age of the Internet.’ Try instead, the ‘Age of the Consumer.’” Tom Peters, Re-Imagine!

Slide 53

Slide 53

Slide 54

Slide 54

010100 01001 0101 011 010 01 01 10 00 01 0101001 1 0 00 1 0 10 1 0 0 0001010 101 1 0 10 1 10 0100100010010010100010 0 0 0 1 1010 010 1 100 0 0 1 010 0 01 10 1 0 10 1 1 10 0 0 00 1 10 001 0 1 0 1 0 1 0 001 0 1 0 10 1 0 00 1 01 0 10 1 0 human interaction

Slide 55

Slide 55

Scott Pilgrim (© Brian Lee O’Malley)

Slide 56

Slide 56

Tintin (© Hergé)

Slide 57

Slide 57

Akira (© Katsuhiro Otomo)

Slide 58

Slide 58

Downtown Smells (© Will Eisner)

Slide 59

Slide 59

Slide 60

Slide 60

Pup (© Drew Weing)

Slide 61

Slide 61

sequence

Slide 62

Slide 62

Fantastic Four (© Marvel)

Slide 63

Slide 63

Peanuts (© United Features Syndicate)

Slide 64

Slide 64

Captain America (© Marvel)

Slide 65

Slide 65

Presentation © 2009 Tyler Sticka Web: tylersticka.com Twitter: @tylersticka