Tips, Tricks and Hands-on Practice For UX Sketching @ Smashing Conference NYC 2014

This session was presented by Eva-Lotta Lamm at Smashing Conference NYC 2014 on 18 June 2014.

Sketching is a crucial tool for designers to have in their skill set. It’s cheap, fast and easy to learn. Many design and product teams today have embraced sketching as part of their (agile) process. From quick wireframes and flow diagrams to user scenarios and story boards, sketching can be used to quickly explore design possibilities, think through various options or to communicate a concept in a quick but engaging way.

This presentation teaches some basic sketching skills hands-on and shows how you can refine your sketches to make them communicate more effectively. It presents examples, tips and thoughts on process, practicing and how to move beyond boxes and arrows to extend your sketching skills into richer forms of visual expression like storyboarding and sketch-noting.

Transcript

1. Tips, Tricks 
 & Hands-On practice UX Sketching
2. EVa-LotTa Lamm evalottchen
10. When 
 And 
 Why? Tips And Examples Pens out & Hands-On!
11. When And Why I sketch
12. To think To communicate
13. To think Understand Ideate & Experiment
14. Understand
16. Ideate & Experiment
17. Sketches by Eva-Lotta Lamm
18. Sketches by Bruce Goldstein (http://www.coroflot.com/brucegoldstein/Sketching-n-Visualization)
19. Sketches by Joaquim Marquès Nielsen (http://jokke-svin.dk/the-connected-poster-by-barq/)
20. Visual feedback loop
22. ThInk
23. Visualize ThInk
24. Reflect & Evaluate Visualize ThInk
25. Reflect & Evaluate Visualize ThInk
26. The Making influences the thinking. – Otl Aicher
27. To communicate
32. Shared vision and Understanding Cat
33. Shared vision and Understanding Cat
34. Shared vision and Understanding
35. Shared vision and Understanding
36. Sketching != Drawing
37. Sketching is not about being a good artist, but about being a good thinker. – Jason Santa Maria http://v4.jasonsantamaria.com/articles/pretty-sketchy/
38. Drawing Sketch Portrait Idea Schematic by Scott McCloud, Understanding Comics
39. Fidelity
40. The Devil is in (the Lack Of) Detail
41. WHich level of detail is right? It depEnds! Schematic by Scott McCloud, Understanding Comics
42. Sketches Wirefames Visual DESIGNS Schematic by Scott McCloud, Understanding Comics
43. The fidelity of the sketch should reflect the depth of our thinking. – BiLl Buxton
44. Eliminate the unnecessary so that the necessary may speak. – HANS HOFMANn
45. Tips And Examples
46. Choose the level of detail based on what you want to explain
48. Low Fidelity is great to Give AN Overview
50. Low Fidelity makes it Easy to show (and Spot) Patterns
52. Mix Low And High Fidelity to Guide Attention
53. Keep Context 
 low-Fidelity
54. Keep Context 
 low-Fidelity add detail 
 to draw attention
55. Use Visual Hierarchy to Guide Attention
57. line Weight
58. Shading
59. Colour
60. Use colour for continuity
61. Use colour for continuity
62. Use colour to Separate Interface from Explanations
63. Use colour to Separate Interface from Explanations
64. Use Colour to convey Information Not for Decoration
65. Let’s sketch !
66. Warm-up
72. Let’s sketch some People
76. delicious.com/evalottchen/sketchinginterfaces evalottchen sketchnotesbook.com/resources