Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sketching Interfaces – Yggdrasil 2013

363694304ccb13c7ef30c2adc5f7ce37?s=47 evalottchen
April 10, 2013

Sketching Interfaces – Yggdrasil 2013

Sketching is a crucial tool for designers to have in their skillset. It’s cheap, fast and easy to learn. Many design and product teams today have embraced sketching as part of their (agile) process.

This talk looks at how you can build on what you already know and do. It shows how you can refine your sketching skills and how to apply them more effectively, both on your own as well as when working with a group.

363694304ccb13c7ef30c2adc5f7ce37?s=128

evalottchen

April 10, 2013
Tweet

Transcript

  1. Interfaces Sketching YgGdrasil 2013

  2. EVa-LotTa Lamm evalottchen

  3. None
  4. None
  5. None
  6. None
  7. None
  8. When And Why? Tips And Examples Sketching with Others

  9. When And Why I sketch

  10. To think To communicate

  11. To think Understand Ideate & Experiment

  12. Understand

  13. None
  14. Ideate & Experiment

  15. David Bayles and Ted Orland: Art & Fear (http://www.tedorland.com/books/artandfear.html)

  16. Visual feedback loop

  17. None
  18. ThInk

  19. Visualize ThInk

  20. Reflect & Evaluate Visualize ThInk

  21. Reflect & Evaluate Visualize ThInk

  22. The Making influences the thinking. – Otl Aicher

  23. To communicate

  24. None
  25. None
  26. None
  27. None
  28. None
  29. People are Drawn to visuals

  30. ‘Reading’ Visual Explanations is an Interactive ProcesS

  31. ‘Reading’ Visual Explanations is an Interactive ProcesS

  32. Shared vision and Understanding Cat

  33. Shared vision and Understanding Cat

  34. Shared vision and Understanding

  35. Shared vision and Understanding

  36. I prefer drawing to talking. Drawing is faster and leaves

    less room for lies. – Le Corbusier
  37. Sketching != Drawing

  38. Sketching is not about being a good artist, but about

    being a good thinker. – Jason Santa Maria http://v4.jasonsantamaria.com/articles/pretty-sketchy/
  39. Schematic by Scott McCloud, Understanding Comics

  40. Schematic by Scott McCloud, Understanding Comics Drawing Sketch

  41. Schematic by Scott McCloud, Understanding Comics Drawing Sketch Portrait Idea

  42. None
  43. None
  44. Schematic by Scott McCloud, Understanding Comics

  45. Schematic by Scott McCloud, Understanding Comics Sketches

  46. Schematic by Scott McCloud, Understanding Comics Sketches Wirefames

  47. Schematic by Scott McCloud, Understanding Comics Sketches Wirefames Visual DESIGNS

  48. Fidelity

  49. The Devil is in (the Lack Of) Detail

  50. WHich level of detail is right?

  51. WHich level of detail is right? It depEnds!

  52. The fidelity of the sketch should reflect the depth of

    our thinking. – BiLl Buxton
  53. Eliminate the unnecessary so that the necessary may speak. –

    HANS HOFMANn
  54. Tips And Examples

  55. Choose the level of detail based on what you want

    to explain
  56. Sketches by Eva-Lotta Lamm

  57. Low Fidelity is great to Give AN Overview

  58. Sketches by Eva-Lotta Lamm

  59. Low Fidelity makes it Easy to show (and Spot) Patterns

  60. Sketches by Eva-Lotta Lamm

  61. Little side Track: Sketching Templates?

  62. http://www.henkwijnholds.com/prolonging-the-magic-a4-sketching-paper/

  63. http://lab.3fl.jp/iphone-idea-sheet-v01/

  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. DRAW TOWARDS YOUR BODY

  75. Mix Low And High Fidelity to Guide Attention

  76. Sketch by Eva-Lotta Lamm Keep Context low-Fidelity

  77. Sketch by Eva-Lotta Lamm Keep Context low-Fidelity add detail to

    draw attention
  78. Use Visual Hierarchy to Guide Attention

  79. None
  80. line Weight

  81. Shading

  82. Shading

  83. Colour

  84. Use colour for continuity

  85. Use colour for continuity

  86. Use colour to Separate Interface from Explanations

  87. Use colour to Separate Interface from Explanations

  88. Use colour to Separate Interface from Explanations

  89. Use Colour to convey Information Not for Decoration

  90. Limit your palette

  91. None
  92. Sketching With Others

  93. Everybody Can Use a PEn. no special knowledge or Software

    needed. Everybody can do it
  94. ?

  95. ?

  96. ?

  97. ?

  98. ? INPUT

  99. Input

  100. ? DiVerGing

  101. Visual Brainstorms

  102. http://www.adaptivepath.com/uploads/archive/images/publications/essays/sketchboard/ap_multipage_sketchboard_template_example.pdf 6-up Templates

  103. ? DiVerGing presentation & Critique

  104. Present & Critique

  105. ? DiVerGing presentation & Critique Converging

  106. idea idea idea idea idea idea Dot voting

  107. http://www.adaptivepath.com/uploads/archive/images/publications/essays/sketchboard/ap_singlepage_sketchboard_template_example.pdf 1-up Template

  108. Converging ? DiVerGing Refining presentation & Critique

  109. Sketching With Others

  110. Sketching With Others Timebox Exercises

  111. Sketching With Others Timebox Exercises Plan enough Time for Feedback

  112. Sketching With Others Timebox Exercises Plan enough Time for Feedback

    Be the Visual Ambassador
  113. None
  114. delicious.com/evalottchen/sketchinginterfaces evalottchen sketchnotesbook.com/resources