• Speichern
Sketching workshop for Google London
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Sketching workshop for Google London

am

  • 62,711 Views

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

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

Statistiken

Views

Gesamtviews
62,711
Views auf SlideShare
61,823
Views einbetten
888

Actions

Gefällt mir
103
Downloads
0
Kommentare
8

30 Einbettungen 888

http://candidosalesg.wordpress.com 383
http://www.conseilsmarketing.com 219
http://conordeane.com 89
http://sainfoinc.in 45
http://reminderkeepsake.blogspot.de 31
http://reminderkeepsake.blogspot.com 25
http://jaanekyachaheman.blogspot.in 18
http://flavors.me 11
http://portal.theanimationschool.co.za 8
https://si0.twimg.com 7
http://pinterest.com 7
http://candidosales.flavors.me 6
http://demo.ozonelabs.net 5
https://candidosalesg.wordpress.com 4
https://twitter.com 4
http://jaanekyachaheman.blogspot.com 4
http://dev2k8ss2010-3.devnet.z 4
https://www.linkedin.com 3
http://conordeane.wordpress.com 3
http://localhost 2
https://www.rebelmouse.com 1
http://abc-innovation.tumblr.com 1
http://translate.googleusercontent.com 1
http://blog.naver.com 1
http://www.blogger.com 1
http://cloud.feedly.com 1
http://us-w1.rockmelt.com 1
https://twimg0-a.akamaihd.net 1
http://www.twylah.com 1
http://acontecendoaqui.com.br 1
Mehr ...

Zugänglichkeit

Details hochladen

Uploaded via as Adobe PDF

Benutzerrechte

© Alle Rechte vorbehalten

Report content

Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

Wählen Sie Ihren Grund, warum Sie diese Präsentation als unangemessen melden.

Löschen

15 von 8 Kommentar posten

  • Full Name Full Name Comment goes here.
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
  • Very nice presentation...can i have the copy pls? :) thanks..

    my email is ditha_s@yahoo.com
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
  • Hi Marcin,

    Thanks for getting in touch and for being so reasonable about being held up in front of a crowd without being there to put your side across. To be fair, out of context the slide does only tell half of the story (and as such, perhaps it was unfair of me to include it in this presentation). In the actual presentation I did present a much more balanced view and did make a lot of points in your favour - sadly these don't come across from the slide on its own, and for that I am sorry. I did enjoy your article and think you make some very valid points. I certainly hope I'm not coming across as a sketch evangelist who insists everyone must sketch. Your UX Pin kits are really good (I have used them a few times since we met at UX Lisbon). I don't think they always work in place of sketching (but then I don't think that you are saying that they do either). I was using you as an example, perhaps unfairly, to illustrate a wider point about sketching and innovation.

    Thanks again for getting in touch and for being so reasonable about it all. Hopefully we'll run into each other again at some point in the future and I can buy you a beer - Sam
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
  • extremly creative .. just amazing
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
  • Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
  • @sapta9433 kewwlll
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
Kommentar posten
Kommentar bearbeiten

Sketching workshop for Google London Presentation Transcript

  • 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)
  • 53. Activity 4: WritingAAAAAAN ARMY OF ANTSANNOTATE
  • 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