Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Visual Thinking: Working with Pictures

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
Making the Complex Clear
Making the Complex Clear
Wird geladen in …3
×

Hier ansehen

1 von 127 Anzeige

Visual Thinking: Working with Pictures

Herunterladen, um offline zu lesen

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.

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.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (19)

Anzeige
Anzeige

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/

Hinweis der Redaktion

  • (1: "Water Pollution" Mindmap)
    I was/am making a game on the topic of water pollution and environmental health. Knowing literally nothing about the topic beforehand, I mindmapped my research as I went along. Mainly this was to gauge, roughly, areas of interest within the subject domain in the one space. I find mindmapping on paper easier than digital, because I'm usually too worried about placement, composition, scale, etc. of the text, whereas on paper it's so rough and drafted that I'm content with just drawing. Because it's also on paper and not in a digital format, I didn't feel I was committing to specific topics to cover yet: it gives me breathing space to digest the information.

    (3: "Engagement" Mindmap)
    Similar to the mindmap in (1), I was looking at the topic of Engagement, and what exactly I wanted my game to "engage" people with. If anything, by making a mindmap such as this, it helped me to comprehend the challenge of defining "engagement" for my specific needs. Had I ploughed through research and started writing, I probably would have found myself hitting brick walls very quickly. With the mindmap, I was able to connect certain terms and show where topics were connected, while realising the uphill battle with defining and implementing "engagement" effectively for my research.
  • 12:15
  • Act 1 Overview
    After the DHack prototype I kept using the same style as the game grew. I would make these diagrams and take them to meetings so we could get a good overview of the how the game was shaping up.

×