Advertisement

Sketching Interfaces Workshop - Interactions12 (Dublin)

pubsmith
Feb. 1, 2012
Advertisement

More Related Content

Advertisement

Sketching Interfaces Workshop - Interactions12 (Dublin)

  1. NAUGHTY LITTLE SCAMPS e ‘art’ of sketching interfaces
  2. Anatomy of a sketch
  3. 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?)
  4. Basic line technique Smooth action Go further than you need to Start light, then build up thickness
  5. Boxes If we get away from the idea of a box as a square or a rectangle, we can start to think about an interface as a box containing a series of other boxes.
  6. Boxes If we get away from the idea of a box as a square or a rectangle, we can start to think about an interface as a box containing a series of other boxes. So we need to be able to draw boxes. Even if they are invisible.
  7. Boxes If we get away from the idea of a box as a square or a rectangle, we can start to think about an interface 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]
  8. Tip #1 icker lines can hide mistakes, as well as lending weight and highlighting
  9. Tip #1 icker lines can hide mistakes, as well as lending weight and highlighting Tip #2 Do all your verticals at the same time, then your horizontals
  10. Tip #1 icker lines can hide mistakes, as well as lending weight and highlighting Tip #2 Do all your verticals at the same time, then your horizontals Tip #3 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)
  11. Are you sitting comfortably?
  12. 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
  13. Activity 1: Warm up Parallel lines Intersecting lines Squares Squares in squares
  14. What is a sketch (and what is not)?
  15. <opinion><rant>
  16. “Wiggly Wireframes” (not a sketch)
  17. Hand-drawn wireframes (not a sketch)
  18. </rant></opinion>
  19. 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: e Workbook (Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt & Bill Buxton)
  20. Why Sketch?
  21. I use sketches as a prop; a visual aid to explanation: ey don’t often work as standalone objects SKETCH ey are ey are supplementary to a often created (written or verbal) as a response explanation or ‘on the fly’
  22. Example: sketch and text working in tandem
  23. Why use sketches? (paraphrasing Bill Buxton and my Dad) Sketches give you the freedom to make mistakes and think openly ey can be done at speed - explore lots of ideas quickly You can record ideas without getting lost in the detail ey are easy to discuss, share and critique with others To have fun (too often forgotten)
  24. “Like sign-language, but more better”
  25. Activity 2: Capture it Sketch as many concepts as you can Explain (using your sketches) Interpret (without explanation)
  26. Quickly sketch something that describes: Sliding/swiping to scroll or page through a series of ‘pages’ Portrait to landscape orientation on a phone Switching from list to grid view (or vice versa) A pull-down (or drop-down) menu Click to download Re-ordering a list A slide out toolbox or panel Showing or hiding content
  27. Tools of the Trade
  28. 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
  29. Tip #1 Any pen/paper is better than no pen/paper (capture the idea first, then come back to it and refine it later)
  30. 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)
  31. 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)
  32. “Pens should be avoided unless you are practiced with them” Bill Buxton
  33. “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
  34. e devil is in the (lack of) detail
  35. 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.
  36. Can you tell what it is yet?
  37. Can you tell what it is yet?
  38. Can you tell what it is yet?
  39. 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.
  40. 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
  41. 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
  42. Activity 3: Focus Show me just as much as you need to
  43. How did you plan/book your journey here? Use your sketch to describe that process (If you can think of how to do it better, great, but don’t spend too long designing solutions) Don’t try to sketch the whole thing ink about how to show: - the device/s you used - interactions - the output/display - how you used the info Only show as much as you need to
  44. Give us a clue (Labelling)
  45. Good labels saved many a bad sketch
  46. Copyright © Night Beacon (www.taehok.com)
  47. 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)
  48. Activity 4: Writing AAAAA AN ARMY OF ANTS ANNOTATE
  49. A sketch not a scribble
  50. 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)
  51. Hands can be a right bugger ...
  52. ... but they don’t have to be
  53. Activity 5: Adding style Hands / Shading / Lettering / Arrows
  54. Sketching Interaction
  55. Activity 6: Interaction Show me: What happens? How is it initiated?
  56. 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
  57. 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 * en practice until you become one
  58. A call to arms A lot of us spend precious hours creating heavy documentation that is dated before it is completed. Sometimes this is appropriate, but most times it isn’t. is year, re-imagine the way you work. Resolve to develop your prototyping skills. Get good at sketching in front of people. Learn to facilitate design conversations. Experiment. Question old methods ... ese are exciting times—shape the future! Sarah B. Nelson - Tapir and Tine
  59. ank You Sam (@pub) Jason (@jasonmesut) RMA Design Driven Innovation
Advertisement