O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Sketching workshop for Google London

Updated version of my original Sketching Interfaces workshop - presented at Google (London) in June 2012

  • Seja o primeiro a comentar

Sketching workshop for Google London

  1. Before we start...Draw a picture of yourself on a sticky notePut your name on itRate your sketching confidence & abilitylow = scribbler | high = sketch-masterleft = never | right = sketch-a-holic
  2. NAUGHTY LITTLE SCAMPSThe ‘art’ of sketching
  3. There’s a lot of buzz about sketching ...
  4. ... so isn’t it surprising how few digitaldesigners are comfortable with whatis essentially a core design skill?
  5. We’ve got a couple of hours either sideof lunch. We’re not miracle workers, butwe can try to put you on the right path. H0 2 CH02 6
  6. Anatomy of a sketch
  7. Line upAt a fundamental level, sketches are made up of lines(and a little bit of shading, but that’s just more lines, right?)
  8. Basic line techniqueSmooth actionStart light, then build up thickness
  9. Basic line techniqueGo further than you need toDon’t panic if you don’t quite make it
  10. BoxesIf we get away from the idea of a box as a square or a rectangle,we can start to think about building a sketch as a box containing aseries of other boxes.So we need to be able to draw boxes. Even if they are invisible. [invisible box]
  11. Tip #1Start light and build up weight and thickness as you get more confident inthe idea (mistakes/over-drawings are fine, it’s not a polished drawing)Tip #2Do all your verticals at the same time, then your horizontalsTip #3Thicker lines can hide mistakes, as well as lending weight and highlighting
  12. Are you sitting comfortably?
  13. If youre not comfortable, you wont sketch wellIf you can, spread outFind your angleHave your stuff in reachLight is important
  14. Warm upParallel linesIntersecting linesSquaresSquares in squares
  15. Smooth actionGo further than you need toDon’t panic if you don’t quite make itStart light, then build up thickness
  16. What is a sketch (and what is not)?
  17. <opinion><rant>
  18. “Wiggly Wireframes” (not a sketch)
  19. Hand-drawn wireframes (not a sketch)
  20. </rant></opinion>
  21. Sketches do not have to be pretty, beautifulor even immediately understandable byothers. However, you should be able toexplain your sketches and ideas whenanyone asks about them.Sketching User Experiences: The Workbook(Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt & Bill Buxton)
  22. Why Sketch?
  23. 3 design activities where sketching can be usedQuick ‘on the fly’ sketches to explain a concept(to a colleague or client)‘Prettier’ sketches that make it into documentation‘Live’ sketching sessions in front of others(presenting/workshops/co-designing)
  24. On the fly sketches
  25. On the fly sketches On the fly sketches Via: Shades of Grey: Thoughts on Sketching by Will Evans
  26. Pretty sketches
  27. Live sketches
  28. Activity 1: Stand upYou need to be able to do this on a whiteboard- sketching lines- drawing boxes- writing legibly
  29. I use sketches as a prop; a visual aid to explanation: They don’t often work as standalone objects SKETCH They are They are supplementary to often a (written or created as a verbal) response or explanation ‘on the fly’
  30. Example: sketch and text working in tandem
  31. Why use sketches?(paraphrasing Bill Buxton and my Dad)Sketches give you the freedom to make mistakes and think openlyThey can be done at speed - explore lots of ideas quicklyYou can record ideas without getting lost in the detailThey are easy to discuss, share and critique with othersTo have fun (too often forgotten)
  32. “Like sign-language, but more better”
  33. Grab a coffee and a snack Back here in 15 mins
  34. Sketching on demandWhether you’re sketching on a whiteboard, in your notebookor on a napkin, when you’re sketching in front of others:- You have to be quick- You’ll need to think about what to leave out- You can talk people through your sketch- You’re not creating a masterpiece but it shouldn’t be a scribble
  35. Activity 2: Sketch BattleSketch a simple conceptCan you tell what it is yet?Explain your sketch
  36. What helped you communicate?What words and phrases helped to explain a sketch?Which bits of the sketch did you point to?What kinds of gestures and sound effects did you use?
  37. Tools of the Trade
  38. My KitHard graphite pencil (H or HB)Blue ‘no photocopy’ pencilGood eraser/rubberLayout padBlack pens (various thickness/nibs)Markers for shading and depth(3 tones only, 20% apart) + 1 colourScannerPencil sharpener/sharp knife
  39. Tip #1Any pen/paper is better than no pen/paper(capture the idea first, then come back to it and refine it later)Tip #2Avoid fancy sketch pads and notebooks if you have a fear of the blank page(full notebooks and sketchbooks are beautiful, even if their covers aren’t)Tip #3Don’t throw away old pens, but don’t just keep using the same one(sharpie pens are called ‘sharp-ies’ for a reason)
  40. “Pens should be avoided unless you arepracticed with them”Bill Buxton“Mistakes are ok. Keeping them makesit a sketch rather than a drawing”Sam Smith
  41. The devil is in the(lack of) detail
  42. Sketches as impressionismAs soon as you start to get into detail you are drawing (not sketching) and in dangerof you, and the people you share your sketches with, focusing on the wrong thing.via: Dane Petersen (thegreatsunra on Flickr)
  43. Can you tell what it is yet?
  44. Lorem ipsum dolor sit amet Pellentesque rhoncus rhoncus arcu, vitae blandit libero ultrices vitae. Praesent vulputate augue sed justo tempor sed lobortis orci mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras in velit at nisl vulputate hendrerit in nec libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec iaculis convallis tortor vel tincidunt. Morbi varius sem ac leo tristique ac gravida erat adipiscing. Sed ac velit et urna viverra viverra vitae vestibulum tortor. Nullam fringilla commodo commodo. Aliquam gravida, nulla eu sagittis tempor, dolor tortor gravida enim, elementum hendrerit ipsum mi sed nisl. Praesent tristique, erat vel rhoncus porta, felis velit cursus erat, sed commodo sem lacus semper orci. Suspendisse potenti. Sed dignissim placerat nisi egestas molestie. In a dolor at magna molestie rhoncus a vel nulla. In sed varius dolor. Phasellus quis suscipit leo. Maecenas odio ante, semper a elementum id, ultricies.
  45. Lorem ipsum dolor sit ametI can still read it, even if I can’t understand it Alternatives: Lines SquigglesIf headers and labels are real text they will stand out
  46. Focus on the bits that are relevantNo need to draw the whole thingVary the level of detail/finesse (high = relevant, low = less important)Use low-fi sketches of the whole thing and ‘pull out’ the detail
  47. Activity 3: FocusShow me just as much as you need to
  48. Search for new batman film / View official trailer on YouTube /‘Like’ video and share / Friends see video on Google+ and viewThink about how to show:- how the search helped the user- the device/s used- interactions- the output/display- the knock-on effect (via social media)Only show as much as you need to
  49. Give us a clue (Labelling)
  50. Good labels saved many a bad sketch
  51. Copyright © Night Beacon (www.taehok.com)
  52. A good note is worth a thousand picturesLabels must be readable (and not just by you)Don’t make me turn my head to read it (stay on the horizontal)CAPS ARE YOUR FRIENDS (it’s not shouting in a sketch)Make your guides into part of the labelDon’t write it tinyTake your time (sketch quick, write slower)
  54. Activity 41. Fill page with horizontal parallel lines2. Write out the letters of the alphabet (5 each)AAAAA BBBBB CCCCC3. Write this sentence (x3)I will sketch more ideas, more often, withmore people; to better describe high qualityuser experiences that will revolutionize theworld.
  55. A sketch not a scribble
  56. Colour (a little goes a long way)I can’t think of a simpler way to say it.Don’t colour in your sketches.TIPS:Stick to 2 colours (3 maximum)If you’re using greys keep them in the same warm/cool rangeGrey tones should be 10% apartPick a primary colour and use the other 1 (or 2) in small measuresUse colour sparingly - as a highlight
  57. Through thin and thickAdd some depth and interest TIPS: Remember yourShow where the important parts of the sketch are (focus) line technique (confident lines)Hide your mistakes Use the edge of theKnock off the rough edges (once you’re confident it’s right) pen as well as the tip Use a thicker pen Don’t overdo it
  58. Through thin and thick
  59. A few flourishes and the rest basicLearn (by practicing) how to make one or two stylistic flourishes and apply themconsistently to your sketches to build up a style, and to go from scribble to sketch.Examples:Handwriting (it really can make a big difference)Lines and framesArrowsHands (for touch-based gestures)
  60. Hands can be a right bugger ...
  61. ... but they don’t have to be
  62. sometimes you don’t even need to draw a hand
  63. “I can’t sketch”“If others can’t understand your design orsolution by looking at your messy sketches,you’ve wasted your time... If you are unable tosketch clearly (some people are just moretalented than the others), don’t sketch.”Better Use of Paper in UX DesignMarcin Treder in UX magazine
  64. Ulterior motive?As well as being UX Manager at Nokaut MarcinTreder is “Co-father and CEO of UXPin”,makers of (quite cool) paper prototyping kits.He likes paper, but doesn’t want to encourageyou to sketch if he canget you to buy one of his kits.
  65. Best of both worlds?
  66. Best of both worlds?
  67. Activity 5: Adding styleHands / Shading / Lettering / Arrows
  68. Activity 51. Practice the flourishes we’ve just looked atTry to fill a page with examples2. Use one of the examples from the sketch battle orthe batman story and try to combine all three things inone sketch
  69. Sketching Interaction
  70. Beyond the touch-based interactionThe technology is there but it hasn’t quite yet penetrated into our default interaction set.We can rely on a lot of shared knowledge and visual shortcuts when we’re describingmany touch-based interactions, but how do we communicate voice-based search orcamera-recognition technology like GoogleGoggles? Sketch Sketch (voice input) (GoogleGoggles)
  71. Activity 6: InteractionShow me:What happens?How is it initiated?
  72. Take-away tipsGet it down first, worry about the presentation laterDon’t throw sketches awayMistakes are ok (and can often be hidden)Don’t try to draw everything - focusDon’t get bogged down in doing detailKeep it consistentPractice your handwritingRemember what you’re trying to achieveDon’t hold back - bust out a sketch if you think it’ll help
  73. See how the experts do it*Eva-Lotta Lamm - www.evalotta.netBill Buxton - http://billbuxton.comSunni Brown - http://sunnibrown.comMike Rohde - http://rohdesign.com/sketchnotes/Peiter Buick - http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching* Then practice until you become one
  74. Thank You Sam (@pub) Jason (@jasonmesut)
  75. RMADesign Driven Innovation