![Boxes
If 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 a
series of other boxes.
So we need to be able to draw boxes. Even if they are invisible.
[invisible box]](https://image.slidesharecdn.com/googlesketchingworkshop-120702032939-phpapp01/85/Sketching-workshop-for-Google-London-13-320.jpg)
Sketching workshop for Google London
- 1. Before we start... Draw a picture of yourself on a sticky note Put your name on it Rate your sketching confidence & ability low = scribbler | high = sketch-master left = never | right = sketch-a-holic
- 2. NAUGHTY LITTLE SCAMPS The ‘art’ of sketching
- 5. There’s a lot of buzz about sketching ...
- 6. ... so isn’t it surprising how few digital designers are comfortable with what is essentially a core design skill?
- 7. We’ve got a couple of hours either side of lunch. We’re not miracle workers, but we can try to put you on the right path. H0 2 CH02 6
- 9. Anatomy of a sketch
- 10. Line up At a fundamental level, sketches are made up of lines (and a little bit of shading, but that’s just more lines, right?)
- 11. Basic line technique Smooth action Start light, then build up thickness
- 12. Basic line technique Go further than you need to Don’t panic if you don’t quite make it
- 13. Boxes If 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 a series of other boxes. So we need to be able to draw boxes. Even if they are invisible. [invisible box]
- 14. Tip #1 Start light and build up weight and thickness as you get more confident in the idea (mistakes/over-drawings are fine, it’s not a polished drawing) Tip #2 Do all your verticals at the same time, then your horizontals Tip #3 Thicker lines can hide mistakes, as well as lending weight and highlighting
- 15. Are you sitting comfortably?
- 16. If you're not comfortable, you won't sketch well If you can, spread out Find your angle Have your stuff in reach Light is important
- 17. Warm up Parallel lines Intersecting lines Squares Squares in squares
- 19. Smooth action Go further than you need to Don’t panic if you don’t quite make it Start light, then build up thickness
- 20. What is a sketch (and what is not)?
- 27. <opinion><rant>
- 28. “Wiggly Wireframes” (not a sketch)
- 29. Hand-drawn wireframes (not a sketch)
- 31. Sketches do not have to be pretty, beautiful or even immediately understandable by others. However, you should be able to explain your sketches and ideas when anyone asks about them. Sketching User Experiences: The Workbook (Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt & Bill Buxton)
- 32. Why Sketch?
- 33. 3 design activities where sketching can be used Quick ‘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)
- 34. On the fly sketches
- 35. On the fly sketches On the fly sketches Via: Shades of Grey: Thoughts on Sketching by Will Evans
- 36. Pretty sketches
- 37. Live sketches
- 38. Activity 1: Stand up You need to be able to do this on a whiteboard - sketching lines - drawing boxes - writing legibly
- 39. 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’
- 40. Example: sketch and text working in tandem
- 41. Why use sketches? (paraphrasing Bill Buxton and my Dad) Sketches give you the freedom to make mistakes and think openly They can be done at speed - explore lots of ideas quickly You can record ideas without getting lost in the detail They are easy to discuss, share and critique with others To have fun (too often forgotten)
- 42. “Like sign-language, but more better”
- 44. Grab a coffee and a snack Back here in 15 mins
- 45. Sketching on demand Whether you’re sketching on a whiteboard, in your notebook or 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
- 46. Activity 2: Sketch Battle Sketch a simple concept Can you tell what it is yet? Explain your sketch
- 47. 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?
- 48. Tools of the Trade
- 49. My Kit Hard graphite pencil (H or HB) Blue ‘no photocopy’ pencil Good eraser/rubber Layout pad Black pens (various thickness/nibs) Markers for shading and depth (3 tones only, 20% apart) + 1 colour Scanner Pencil sharpener/sharp knife
- 50. Tip #1 Any pen/paper is better than no pen/paper (capture the idea first, then come back to it and refine it later) Tip #2 Avoid 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 #3 Don’t throw away old pens, but don’t just keep using the same one (sharpie pens are called ‘sharp-ies’ for a reason)
- 51. “Pens should be avoided unless you are practiced with them” Bill Buxton “Mistakes are ok. Keeping them makes it a sketch rather than a drawing” Sam Smith
- 52. The devil is in the (lack of) detail
- 53. Sketches as impressionism As soon as you start to get into detail you are drawing (not sketching) and in danger of you, and the people you share your sketches with, focusing on the wrong thing. via: Dane Petersen (thegreatsunra on Flickr)
- 54. Can you tell what it is yet?
- 56. 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.
- 57. Lorem ipsum dolor sit amet I can still read it, even if I can’t understand it Alternatives: Lines Squiggles If headers and labels are real text they will stand out
- 58. Focus on the bits that are relevant No need to draw the whole thing Vary the level of detail/finesse (high = relevant, low = less important) Use low-fi sketches of the whole thing and ‘pull out’ the detail
- 59. Activity 3: Focus Show me just as much as you need to
- 60. Search for new batman film / View official trailer on YouTube / ‘Like’ video and share / Friends see video on Google+ and view Think 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
- 61. Give us a clue (Labelling)
- 62. Good labels saved many a bad sketch
- 63. Copyright © Night Beacon (www.taehok.com)
- 64. A good note is worth a thousand pictures Labels 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 label Don’t write it tiny Take your time (sketch quick, write slower)
- 65. Activity 4: Writing AAAAA AN ARMY OF ANTS ANNOTATE
- 66. Activity 4 1. Fill page with horizontal parallel lines 2. Write out the letters of the alphabet (5 each) AAAAA BBBBB CCCCC 3. Write this sentence (x3) I will sketch more ideas, more often, with more people; to better describe high quality user experiences that will revolutionize the world.
- 68. A sketch not a scribble
- 69. 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 range Grey tones should be 10% apart Pick a primary colour and use the other 1 (or 2) in small measures Use colour sparingly - as a highlight
- 70. Through thin and thick Add some depth and interest TIPS: Remember your Show where the important parts of the sketch are (focus) line technique (confident lines) Hide your mistakes Use the edge of the Knock 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
- 71. Through thin and thick
- 72. A few flourishes and the rest basic Learn (by practicing) how to make one or two stylistic flourishes and apply them consistently 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 frames Arrows Hands (for touch-based gestures)
- 74. Hands can be a right bugger ...
- 75. ... but they don’t have to be
- 76. sometimes you don’t even need to draw a hand
- 77. “I can’t sketch” “If others can’t understand your design or solution by looking at your messy sketches, you’ve wasted your time... If you are unable to sketch clearly (some people are just more talented than the others), don’t sketch.” Better Use of Paper in UX Design Marcin Treder in UX magazine
- 78. Ulterior motive? As well as being UX Manager at Nokaut Marcin Treder is “Co-father and CEO of UXPin”, makers of (quite cool) paper prototyping kits. He likes paper, but doesn’t want to encourage you to sketch if he can get you to buy one of his kits.
- 79. Best of both worlds?
- 80. Best of both worlds?
- 81. Activity 5: Adding style Hands / Shading / Lettering / Arrows
- 82. Activity 5 1. Practice the flourishes we’ve just looked at Try to fill a page with examples 2. Use one of the examples from the sketch battle or the batman story and try to combine all three things in one sketch
- 87. Beyond the touch-based interaction The 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 describing many touch-based interactions, but how do we communicate voice-based search or camera-recognition technology like GoogleGoggles? Sketch Sketch (voice input) (GoogleGoggles)
- 88. Activity 6: Interaction Show me: What happens? How is it initiated?
- 89. Take-away tips Get it down first, worry about the presentation later Don’t throw sketches away Mistakes are ok (and can often be hidden) Don’t try to draw everything - focus Don’t get bogged down in doing detail Keep it consistent Practice your handwriting Remember what you’re trying to achieve Don’t hold back - bust out a sketch if you think it’ll help
- 90. See how the experts do it* Eva-Lotta Lamm - www.evalotta.net Bill Buxton - http://billbuxton.com Sunni Brown - http://sunnibrown.com Mike Rohde - http://rohdesign.com/sketchnotes/ Peiter Buick - http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching * Then practice until you become one
- 91. Thank You Sam (@pub) Jason (@jasonmesut)