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

363694304ccb13c7ef30c2adc5f7ce37?s=47 evalottchen
June 18, 2014

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.

363694304ccb13c7ef30c2adc5f7ce37?s=128

evalottchen

June 18, 2014
Tweet

Transcript

  1. Tips, Tricks 
 & Hands-On practice UX Sketching

  2. EVa-LotTa Lamm evalottchen

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  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

  15. None
  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

  21. None
  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

  28. None
  29. None
  30. None
  31. None
  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
  47. None
  48. Low Fidelity is great to Give AN Overview

  49. None
  50. Low Fidelity makes it Easy to show (and Spot) Patterns

  51. None
  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

  56. None
  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

  67. None
  68. None
  69. None
  70. None
  71. None
  72. Let’s sketch some People

  73. None
  74. None
  75. None
  76. delicious.com/evalottchen/sketchinginterfaces evalottchen sketchnotesbook.com/resources