In school we learn to write as a fundamental building block for communication, and drawing is shunted away to “art class.” But scientists like Darwin and Marie Curie, presidents from Jefferson to Obama, and mathematicians, choreographers, and composers all have used sketching to give form to their ideas. Words are abstract and ambiguous, and can lead to miscommunication. We say a picture is worth a thousand words, so why do we discard this critical tool? Drawing is not just for so-called creatives. Drawing allows you to ideate, communicate, and collaborate with your team. Stop talking around your vision, and get it on the whiteboard where your team can see it! Whether you’re an entrepreneur, an engineer, or a product manager, drawing will make you better at your job. In this workshop, you will go from “can’t draw a straight line” to visually representing complex ideas. First, we’ll demystify the act of sketching. Through a series of activities and exercises, we’ll cover the fundamental building blocks of visual communication. You’ll learn easy ways to draw the most common images, from people to interfaces. Next, we’ll tackle making storyboards, product flows, and interfaces. We’ll finish by working with charts, mental models, and canvases. This is a hands-on workshop, so come with paper, pencils, and pens, and be ready to make your mark.

2. Visual
Thinking
Working with Pictures
Christina Wodtke

3. Why draw?
Think of a chair

5. 1.
Communic
ate

6. 2. Problem
Solving

7. 3.
Listening
and
Remember
ing

8. Who Draws?

10. Zaha Hadid

11. Chefs Jason Chan and Grant Achitz

16. Don’t Worry

17. Pareidoli
a

18. Warm Up

21. Draw together

23. What can we make?
Let’s start with story….

24. MIND MAPS
Gather your Thoughts

26. I feel like drawing slows me down to give
me thinking time.
-Andrew Reid

27. ANDREW REID,
GAME DESIGNER
MIND MAPS FOR
GAME DESIGN

28. 01
WORLD IA DAY 2017
HEADER
OF THIS
PAGE
From Rolf Faste’s MindMapping article
The basic principles of mind mapping are:
1 Create a Center Statement.
2 Develop ideas radially outward.
3 Capture ideas quickly.
4 Use lines to show connections.
5 Create train-of-thought structures.
6 Follow an idea as far as it will go.
7 Work from the known to the unknown.
8 Return to the center when ideas are exhausted.
9 Increase density to create richness.
10 Avoid being judgmental.
11 Have fun with the form.

29. HOW I FEED MYSELF
5 Minutes

30. STORY

39. 1o minutes:
Using your
drawing skills,
Tell your story

40. Lunch

41. 1o minutes:
Using your
drawing skills,
Tell your story

42. One minute pitch.

43. Dotmocracy

45. Dan roam

46. MODEL EVERYTHING!
Five SIX models for making sense

47. Scott Bernatino

48. 01
WORLD IA DAY 2017
•Maps,
Models,
Canvases

49. “VISUAL MODELS ARE ALL ABOUT
MEANING THROUGH SPATIAL
ARRANGEMENT”
- STEPHEN P ANDERSON

50. 01
WORLD IA DAY 2017
DAVE GRAY
ILLUSTRATION MODEL

51. SYSTEM MODELS
Map the System

52. Microwave system model
http://sce.uhcl.edu/whiteta/sdp/createSystemModel.html

53. BBC Weather
Sitemap http://www.bbc.co.uk/blogs/bbcinternet/2011/11/b
bc_weather_design_refresh.html

54. From Stone Librande’s One Page Designs

55. MENTAL MODELS
Understand the Customer’s
Point of View

56. 01
WORLD IA DAY 2017
Center for research on Environmental Decisions
http://guide.cred.columbia.edu/guide/sec1.html
A mental model represents a person’s
thought process for how something works
(i.e., A person’s understanding of the
surrounding world). Mental models,
which are based on often-incomplete
facts, past experiences, and even intuitive
perceptions, help shape actions and
behavior, influence what people pay
attention to in complicated situations, and
define how people approach and solve
problems.

59. Draw Toast
“Draw a picture of how to make toast. That is, darkened crispy
bread.
Use no words in your diagram.
Try to illustrate the important actions to someone who has never
made toast before.”

60. CONCEPT MODELS
Visual Explanations

61. 01
WORLD IA DAY 2017
Sunni Brown
Doodle Revolution

62. ELEMENTS & RELATIONSHIPS
(Systems, a la Brown)

63. Chris Crawford explains different kinds of play
http://www.scottkim.com.previewc40.carrierzone.com/thinkinggames/whatisapuzzle/index.html
http://www.erasmatazz.com/library/the-journal-of-computer/jcgd-volume-4/my-definition-of-game.html

64. Don Norman, Drawn by me.

65. Dan Roam

67. Drawn by me, @cwodtke

69. Freelist all the Elements
of a Performance Review
5 minutes

70. PROCESSES

72. Today Team explains their offering

73. Innoenergy Process

76. Andrew Reid

80. How to Poach an egg,
by @cwodtke

81. Draw the process of
a performance
review,
Five minutes

82. Share
How should it be?

83. WireFlows
Simple thumbnails to represent the flow of the experience

84. Wireflow
• Shows how the product
works. Screens are sketchy.
• Nodes and Connectors

85. Draw a flow….
5 minutes

86. One minute pitch.

87. Dotmocracy

88. Key Screen
Upsell page, or key value moment

89. Landing page
OR
Page
demonstrating key
value.

90. Draw the Box
• What’s it called?
• Who’s it for?
• What’s its tagline or slogan?
• What are its most
compelling features?
Benefits?
• What imagery would make it
stand out to you?

91. DRAW: Key Screen or Box
5 minutes

92. One minute pitch.

93. Dotmocracy

94. COMPARISONS

96. different services
suck in their own
special way.
https://medium.com/@cwo
dtke/a-theory-of-form-for-
digital-products-
f5f605adae84#.51ie4d1vq

97. Uncovering the Secrets of Mammoth Island

98. Understanding
Comics
Scott McCloud

99. 01
WORLD IA DAY 2017
2x2’s are ALL about
comparisons!

102. Drawing Ideas

103. Separately, Silently Draw a
comparison
5 minutes

104. Share Out

105. CONCEPT MODELS
FOR WORK

106. Kitten Farming concept
by Daniel Cook, CCO of
SpryfoxFor thinking

107. Robin Hunicke

108. 01
WORLD IA DAY 2017
For Communicating
• Conceptual Blueprint by
Andrew Hinton of The
Understanding Group

109. Stone Librande

110. Stone Librande

111. HOW FANCY SHOULD THEY BE?

112. Stephen p anderson

113. Bill Verplank

114. 01
WORLD IA DAY 2017
A simple model you
can draw on a
whiteboard becomes a
meme.
Is this why Lean
Startup is huge?

115. 01
WORLD IA DAY 2017
Determine the GOAL: how will the model be used, by whom? What is the job
of the model? To change minds, explain a concept, simplify complexity?
INVENTORY THE CONCEPTS: brainstorm many parts of your concept. Keep
adding more in the margins as you go.
INSPECT THE CONCEPTS: are there many concepts hiding in one? Do you
really understand each idea?
Determine the RELATIONSHIPS: how do the concepts interact?
 Decision point: do i understand the ideas and what i’m trying to
communicate?
Test: ask yourself if the model “feels” right.
If yes, then continue.
ITERATE with words and pictures: talk to yourself and draw it out!
EVALUATE with yourself/the client: keep making sure the drawings match
the ideas you wish to communicate. Don’t punk out early! Rest if you need to!
 Decision point: does my audience understand the ideas and what i’m trying
to communicate?
Test: can my audience answer key questions with the model?
If yes, then continue.
REFINE: use color, type, line weight, and labels to make sure you are
communicating clearly.

116. 01
WORLD IA DAY 2017Dave gray
What should I draw?
• Consider the elements

117. 01
WORLD IA DAY 2017Dave gray | http://www.xplaner.com/visual-thinking-school/
What should I draw?
Consider the purpose

118. PARTICIPATORY
CONCEPT MAPS?!?

121. Dave gray

123. 01
WORLD IA DAY 2017
MIND MAPS, to gather your
thoughts
CONCEPT MAPS, to organize
your understanding
SYSTEM MAPS, to map the
system (a tautology, but an
accurate one)
MENTAL MODELS, to
understand and communicate
your user’s understanding
CONCEPT MODELS, to message a
way to think about a complex
system

124. And Canvases!

125. 01
WORLD IA DAY 2017
Thank you.
Questions?
For workshops & Other inquires:
Christina Wodtke
@Cwodtke
Cwodtke.com
Art by Amelie Wodtke Sarrazin

127. http://evalotta.pancakeapps.com/