Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Visual
Thinking
Working with Pictures
Christina Wodtke
Why draw?
Think of a chair
1.
Communic
ate
2. Problem
Solving
3.
Listening
and
Remember
ing
Who Draws?
Zaha Hadid
Chefs Jason Chan and Grant Achitz
Don’t Worry
Pareidoli
a
Warm Up
Draw together
What can we make?
Let’s start with story….
MIND MAPS
Gather your Thoughts
I feel like drawing slows me down to give
me thinking time.
-Andrew Reid
ANDREW REID,
GAME DESIGNER
MIND MAPS FOR
GAME DESIGN
01
WORLD IA DAY 2017
HEADER
OF THIS
PAGE
From Rolf Faste’s MindMapping article
The basic principles of mind mapping are:
1...
HOW I FEED MYSELF
5 Minutes
STORY
1o minutes:
Using your
drawing skills,
Tell your story
Lunch
1o minutes:
Using your
drawing skills,
Tell your story
One minute pitch.
Dotmocracy
Dan roam
MODEL EVERYTHING!
Five SIX models for making sense
Scott Bernatino
01
WORLD IA DAY 2017
•Maps,
Models,
Canvases
“VISUAL MODELS ARE ALL ABOUT
MEANING THROUGH SPATIAL
ARRANGEMENT”
- STEPHEN P ANDERSON
01
WORLD IA DAY 2017
DAVE GRAY
ILLUSTRATION MODEL
SYSTEM MODELS
Map the System
Microwave system model
http://sce.uhcl.edu/whiteta/sdp/createSystemModel.html
BBC Weather
Sitemap http://www.bbc.co.uk/blogs/bbcinternet/2011/11/b
bc_weather_design_refresh.html
From Stone Librande’s One Page Designs
MENTAL MODELS
Understand the Customer’s
Point of View
01
WORLD IA DAY 2017
Center for research on Environmental Decisions
http://guide.cred.columbia.edu/guide/sec1.html
A menta...
Draw Toast
“Draw a picture of how to make toast. That is, darkened crispy
bread.
Use no words in your diagram.
Try to illu...
CONCEPT MODELS
Visual Explanations
01
WORLD IA DAY 2017
Sunni Brown
Doodle Revolution
ELEMENTS & RELATIONSHIPS
(Systems, a la Brown)
Chris Crawford explains different kinds of play
http://www.scottkim.com.previewc40.carrierzone.com/thinkinggames/whatisapu...
Don Norman, Drawn by me.
Dan Roam
Drawn by me, @cwodtke
Freelist all the Elements
of a Performance Review
5 minutes
PROCESSES
Today Team explains their offering
Innoenergy Process
Andrew Reid
How to Poach an egg,
by @cwodtke
Draw the process of
a performance
review,
Five minutes
Share
How should it be?
WireFlows
Simple thumbnails to represent the flow of the experience
Wireflow
• Shows how the product
works. Screens are sketchy.
• Nodes and Connectors
Draw a flow….
5 minutes
One minute pitch.
Dotmocracy
Key Screen
Upsell page, or key value moment
Landing page
OR
Page
demonstrating key
value.
Draw the Box
• What’s it called?
• Who’s it for?
• What’s its tagline or slogan?
• What are its most
compelling features?
...
DRAW: Key Screen or Box
5 minutes
One minute pitch.
Dotmocracy
COMPARISONS
different services
suck in their own
special way.
https://medium.com/@cwo
dtke/a-theory-of-form-for-
digital-products-
f5f...
Uncovering the Secrets of Mammoth Island
Understanding
Comics
Scott McCloud
01
WORLD IA DAY 2017
2x2’s are ALL about
comparisons!
Drawing Ideas
Separately, Silently Draw a
comparison
5 minutes
Share Out
CONCEPT MODELS
FOR WORK
Kitten Farming concept
by Daniel Cook, CCO of
SpryfoxFor thinking
Robin Hunicke
01
WORLD IA DAY 2017
For Communicating
• Conceptual Blueprint by
Andrew Hinton of The
Understanding Group
Stone Librande
Stone Librande
HOW FANCY SHOULD THEY BE?
Stephen p anderson
Bill Verplank
01
WORLD IA DAY 2017
A simple model you
can draw on a
whiteboard becomes a
meme.
Is this why Lean
Startup is huge?
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 mind...
01
WORLD IA DAY 2017Dave gray
What should I draw?
• Consider the elements
01
WORLD IA DAY 2017Dave gray | http://www.xplaner.com/visual-thinking-school/
What should I draw?
Consider the purpose
PARTICIPATORY
CONCEPT MAPS?!?
Dave gray
01
WORLD IA DAY 2017
MIND MAPS, to gather your
thoughts
CONCEPT MAPS, to organize
your understanding
SYSTEM MAPS, to map t...
And Canvases!
01
WORLD IA DAY 2017
Thank you.
Questions?
For workshops & Other inquires:
Christina Wodtke
@Cwodtke
Cwodtke.com
Art by Am...
http://evalotta.pancakeapps.com/
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
Upcoming SlideShare
Loading in …5
×

Visual Thinking: Working with Pictures

839 views

Published on

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.

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Visual Thinking: Working with Pictures

  1. 1. Visual Thinking Working with Pictures Christina Wodtke
  2. 2. Why draw? Think of a chair
  3. 3. 1. Communic ate
  4. 4. 2. Problem Solving
  5. 5. 3. Listening and Remember ing
  6. 6. Who Draws?
  7. 7. Zaha Hadid
  8. 8. Chefs Jason Chan and Grant Achitz
  9. 9. Don’t Worry
  10. 10. Pareidoli a
  11. 11. Warm Up
  12. 12. Draw together
  13. 13. What can we make? Let’s start with story….
  14. 14. MIND MAPS Gather your Thoughts
  15. 15. I feel like drawing slows me down to give me thinking time. -Andrew Reid
  16. 16. ANDREW REID, GAME DESIGNER MIND MAPS FOR GAME DESIGN
  17. 17. 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.
  18. 18. HOW I FEED MYSELF 5 Minutes
  19. 19. STORY
  20. 20. 1o minutes: Using your drawing skills, Tell your story
  21. 21. Lunch
  22. 22. 1o minutes: Using your drawing skills, Tell your story
  23. 23. One minute pitch.
  24. 24. Dotmocracy
  25. 25. Dan roam
  26. 26. MODEL EVERYTHING! Five SIX models for making sense
  27. 27. Scott Bernatino
  28. 28. 01 WORLD IA DAY 2017 •Maps, Models, Canvases
  29. 29. “VISUAL MODELS ARE ALL ABOUT MEANING THROUGH SPATIAL ARRANGEMENT” - STEPHEN P ANDERSON
  30. 30. 01 WORLD IA DAY 2017 DAVE GRAY ILLUSTRATION MODEL
  31. 31. SYSTEM MODELS Map the System
  32. 32. Microwave system model http://sce.uhcl.edu/whiteta/sdp/createSystemModel.html
  33. 33. BBC Weather Sitemap http://www.bbc.co.uk/blogs/bbcinternet/2011/11/b bc_weather_design_refresh.html
  34. 34. From Stone Librande’s One Page Designs
  35. 35. MENTAL MODELS Understand the Customer’s Point of View
  36. 36. 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.
  37. 37. 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.”
  38. 38. CONCEPT MODELS Visual Explanations
  39. 39. 01 WORLD IA DAY 2017 Sunni Brown Doodle Revolution
  40. 40. ELEMENTS & RELATIONSHIPS (Systems, a la Brown)
  41. 41. 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
  42. 42. Don Norman, Drawn by me.
  43. 43. Dan Roam
  44. 44. Drawn by me, @cwodtke
  45. 45. Freelist all the Elements of a Performance Review 5 minutes
  46. 46. PROCESSES
  47. 47. Today Team explains their offering
  48. 48. Innoenergy Process
  49. 49. Andrew Reid
  50. 50. How to Poach an egg, by @cwodtke
  51. 51. Draw the process of a performance review, Five minutes
  52. 52. Share How should it be?
  53. 53. WireFlows Simple thumbnails to represent the flow of the experience
  54. 54. Wireflow • Shows how the product works. Screens are sketchy. • Nodes and Connectors
  55. 55. Draw a flow…. 5 minutes
  56. 56. One minute pitch.
  57. 57. Dotmocracy
  58. 58. Key Screen Upsell page, or key value moment
  59. 59. Landing page OR Page demonstrating key value.
  60. 60. 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?
  61. 61. DRAW: Key Screen or Box 5 minutes
  62. 62. One minute pitch.
  63. 63. Dotmocracy
  64. 64. COMPARISONS
  65. 65. different services suck in their own special way. https://medium.com/@cwo dtke/a-theory-of-form-for- digital-products- f5f605adae84#.51ie4d1vq
  66. 66. Uncovering the Secrets of Mammoth Island
  67. 67. Understanding Comics Scott McCloud
  68. 68. 01 WORLD IA DAY 2017 2x2’s are ALL about comparisons!
  69. 69. Drawing Ideas
  70. 70. Separately, Silently Draw a comparison 5 minutes
  71. 71. Share Out
  72. 72. CONCEPT MODELS FOR WORK
  73. 73. Kitten Farming concept by Daniel Cook, CCO of SpryfoxFor thinking
  74. 74. Robin Hunicke
  75. 75. 01 WORLD IA DAY 2017 For Communicating • Conceptual Blueprint by Andrew Hinton of The Understanding Group
  76. 76. Stone Librande
  77. 77. Stone Librande
  78. 78. HOW FANCY SHOULD THEY BE?
  79. 79. Stephen p anderson
  80. 80. Bill Verplank
  81. 81. 01 WORLD IA DAY 2017 A simple model you can draw on a whiteboard becomes a meme. Is this why Lean Startup is huge?
  82. 82. 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.
  83. 83. 01 WORLD IA DAY 2017Dave gray What should I draw? • Consider the elements
  84. 84. 01 WORLD IA DAY 2017Dave gray | http://www.xplaner.com/visual-thinking-school/ What should I draw? Consider the purpose
  85. 85. PARTICIPATORY CONCEPT MAPS?!?
  86. 86. Dave gray
  87. 87. 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
  88. 88. And Canvases!
  89. 89. 01 WORLD IA DAY 2017 Thank you. Questions? For workshops & Other inquires: Christina Wodtke @Cwodtke Cwodtke.com Art by Amelie Wodtke Sarrazin
  90. 90. http://evalotta.pancakeapps.com/

×