There’s a reason Google tapped the talents of Understanding Comics author Scott McCloud to introduce their innovative browser to the world; comics possess the graphic clarity, visual language and universal appeal necessary to communicate complex stories, ideas and emotions to the largest audience possible. Join interactive designer (and published cartoonist) Tyler Sticka as we infuse the potential of our user experiences with the compositional, narrative and iconic principals of graphic storytelling. Presented at the 2009 WebVisions Conference at the Oregon Convention Center. http://tylersticka.com http://webvisionsevent.com

1. GRAPHIC
STORYTELLING
IN
NEW
MEDIA

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

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

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

8. Krazy Kat (© King Features Syndicate) virb.com

9. Voltron (© World Events Productions)

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

11. Watchmen (© Warner Bros. Entertainment)

12. Bone (© Jeff Smith)

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

14. Immediacy

15. Universality

16. Versatility

17. Ease-of-creation

18. Dark Knight Returns (© Warner Bros. Entertainment)

20. DIY

21. Content
vs.
Delivery

22. Versatility

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

25. “ ”

26. pictorial (content)

27. sequence

28. 0010001001001010001
100001 0101
1010 010
100 001
010 01
01 01
11 01
100 00
10 0
10
0
01
10
0101 10010
101
0001010
0
1
1
10
01
00
01
10 00
0 10
101 01
01
010 010
0100 011
0010101 0101
01001
0010101010 010100
digital environments

29. 0010001001001010001
100001 0101
1010 010
100 001
010 01
01 01
11 01
100 00
10 0
10
0
01
10
0101 10010
101
0001010
0
1
1
10
01
00
01
10 00
0 10
101 01
01
010 010
0100 011
0010101 0101
01001
0010101010 010100
human interaction

31. 0010001001001010001
100001 0101
1010 010
100 001
010 01
01 01
11 01
100 00
10 0
10
0
01
10
0101 10010
101
0001010
0
1
1
10
01
00
01
10 00
0 10
101 01
01
010 010
0100 011
0010101 0101
01001
0010101010 010100
(Success!)

32. stories/videos/imagery
0010001001001010001
digg/bury
100001 0101
1010 010
100 001
010 01
01 01
11 01
100 00
10 0
10
0
01
10
0101 10010
101
0001010
0
1
1
10
01
00
01
10 00
0 10
101 01
01
010 010
0100 011
0010101 0101
01001
0010101010 010100

33. Themes/Labs
Messages
0010001001001010001
100001 0101
1010 010
100 001
010 01
11
01 Conversations 01
01
100 00
10 0
10
0
01
10
0101 10010
101
0001010
0
1
1
10
01
00
01
10 00
0 10
101 01
01
010 010
0100 011
0010101 0101
01001
0010101010 010100

34. API
Photos/Videos
0010001001001010001
100001 0101
1010 010
100 001
010 01
11
01 Slideshows 01
01
100 00
10 0
10
0
01
10
0101 10010
101
0001010
0
1
1
10
01
00
01
10 00
0 10
101 01
01
010 010
0100 011
0010101 0101
01001
0010101010 010100

35. API
Tweets
0010001001001010001
100001 0101
1010 010
100 001
010 01
11
01 Following 01
01
100 00
10 0
10
0
01
10
0101 10010
101
0001010
0
1
1
10
01
00
01
10 00
0 10
101 01
01
010 010
0100 011
0010101 0101
01001
0010101010 010100

37. Blankets (© Craig Thompson)

38. Kane (© Paul Grist)

39. Maus (© Art Spiegelman)

40. Cerebus (© Dave Sim)

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

43. Calvin & Hobbes (© United Features Syndicate)

44. Watchmen (© Warner Bros. Entertainment)

45. Garfield (© PAWS, Inc.)

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

47. The Right Number (© Scott McCloud)

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

49. Pup (© Drew Weing)

50. When I Am King (© Demian 5)

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!

54. 0010001001001010001
100001 0101
1010 010
100 001
010 01
01 01
11 01
100 00
10 0
10
0
01
10
0101 10010
101
0001010
0
1
1
10
01
00
01
10 00
0 10
101 01
01
010 010
0100 011
0010101 0101
01001
0010101010 010100
human interaction

55. Scott Pilgrim (© Brian Lee O’Malley)

56. Tintin (© Hergé)

57. Akira (© Katsuhiro Otomo)

58. Downtown Smells (© Will Eisner)

60. Pup (© Drew Weing)

61. sequence

62. Fantastic Four (© Marvel)

63. Peanuts (© United Features Syndicate)

64. Captain America (© Marvel)

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