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.

Transcript

1. Interfaces Sketching YgGdrasil 2013
2. EVa-LotTa Lamm evalottchen
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
14. Ideate & Experiment
15. David Bayles and Ted Orland: Art & Fear (http://www.tedorland.com/books/artandfear.html)
16. Visual feedback loop
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
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
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/
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
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
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
114. delicious.com/evalottchen/sketchinginterfaces evalottchen sketchnotesbook.com/resources