• Speichern
Sketching Interfaces Workshop - Interactions12 (Dublin)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Sketching Interfaces Workshop - Interactions12 (Dublin)

on

  • 116,062 Views

My slides from the Sketching Interfaces (Naughty Little Scamps) workshop that I presented at Interactions12, in Dublin.

My slides from the Sketching Interfaces (Naughty Little Scamps) workshop that I presented at Interactions12, in Dublin.

Statistiken

Views

Gesamtviews
116,062
Views auf SlideShare
104,015
Views einbetten
12,047

Actions

Gefällt mir
466
Downloads
0
Kommentare
17

104 Einbettungen 12,047

http://www.jvetrau.com 2949
http://www.ritholtz.com 2747
http://www.theinteractive.it 1067
http://blog.dreamcss.com 569
http://www.uishape.com 557
http://www.scoop.it 503
http://jira.global.sdl.corp 444
http://uxlabs.pl 384
http://www.cooper.com 342
http://www.jrbarnes.co.uk 234
http://samxyuan.org 220
http://phlow.de 211
http://mikeheroys.com 192
http://feeds.feedburner.com 182
http://tosabiten.blogspot.com 177
http://www.linkedin.com 174
http://www.stereoprototype.com 167
http://www.alteredeye.co.uk 143
http://marcandrewb.tumblr.com 91
http://conordeane.com 85
http://a0.twimg.com 69
https://twitter.com 56
http://jaybeedesign.tumblr.com 45
http://www.smallpaperclip.com 40
http://jrbarnes.co.uk 38
http://sandymoor-smartie.wikispaces.com 33
http://arneylon.tumblr.com 21
http://www.blog.benjieboo.co.uk 20
http://flavors.me 20
http://www.codiki.com.dev 20
http://studioaltima.posterous.com 19
http://salonpons.com 19
http://us-w1.rockmelt.com 14
https://www.linkedin.com 13
http://designthought.posterous.com 12
http://dashboard.bloglines.com 10
http://tosabiten.blogspot.com.au 8
http://127.0.0.1 8
http://www.newsblur.com 7
http://www.tumblr.com 6
http://tosabiten.blogspot.co.uk 6
http://gustoschocolatelima.blogspot.com 6
http://johannesbaeck.com 6
http://salterbaxter-internal.posterous.com 5
http://safe.tumblr.com 5
http://paper.li 5
http://www.twylah.com 4
http://davidtreloar.posterous.com 4
http://core.traackr.com 4
http://cafe.naver.com 4
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 17 Kommentar posten

  • Full Name Full Name Comment goes here.
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
  • Best one
    Hope you are in good health. My name is AMANDA . I am a single girl, Am looking for reliable and honest person. please have a little time for me. Please reach me back amanda_n14144@yahoo.com so that i can explain all about myself .
    Best regards AMANDA.
    amanda_n14144@yahoo.com
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
  • Hello
    Am mary ,
    i saw your profile today and became interested in you, i will like to know you the more, and i want you to send an email to my mail so that i can give you my picture for you to know whom i am. Here is my email address (maryjobe86@yahoo.de) I believe we can move from here. I am waiting for your reply in my mail don't send it in the site.
    Remember the distance or color does not matter but love matters allot in life
    (maryjobe86@yahoo.de)
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
  • nice way to start sketching!
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
  • great!!
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
  • good presentation
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
Kommentar posten
Kommentar bearbeiten

Sketching Interfaces Workshop - Interactions12 (Dublin) Presentation Transcript

  • 1. NAUGHTY LITTLE SCAMPSe ‘art’ of sketching interfaces
  • 2. Anatomy of a sketch
  • 3. Line upAt 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 techniqueSmooth actionGo further than you need toStart light, then build up thickness
  • 5. BoxesIf 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 seriesof other boxes.
  • 6. BoxesIf 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 seriesof other boxes.So we need to be able to draw boxes. Even if they are invisible.
  • 7. BoxesIf 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 seriesof 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 highlightingTip #2Do all your verticals at the same time, then your horizontals
  • 10. Tip #1 icker lines can hide mistakes, as well as lending weight and highlightingTip #2Do all your verticals at the same time, then your horizontalsTip #3Start light and build up weight and thickness as you get more confident in theidea (mistakes/over-drawings are fine, it’s not a polished drawing)
  • 11. Are you sitting comfortably?
  • 12. If youre not comfortable, you wont sketch wellIf you can, spread outFind your angleHave your stuff in reachLight is important
  • 13. Activity 1: Warm upParallel linesIntersecting linesSquaresSquares 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 byothers. However, you should be able to explain your sketches and ideas when anyoneasks 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 quicklyYou can record ideas without getting lost in the detail ey are easy to discuss, share and critique with othersTo have fun (too often forgotten)
  • 24. “Like sign-language, but more better”
  • 25. Activity 2: Capture itSketch as many concepts as you canExplain (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 phoneSwitching from list to grid view (or vice versa)A pull-down (or drop-down) menuClick to downloadRe-ordering a listA slide out toolbox or panelShowing or hiding content
  • 27. Tools of the Trade
  • 28. 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
  • 29. Tip #1Any pen/paper is better than no pen/paper(capture the idea first, then come back to it and refine it later)
  • 30. 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)
  • 31. 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)
  • 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 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.
  • 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 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
  • 41. 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
  • 42. Activity 3: FocusShow 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 infoOnly 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 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)
  • 48. Activity 4: WritingAAAAAAN ARMY OF ANTSANNOTATE
  • 49. A sketch not a scribble
  • 50. 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)
  • 51. Hands can be a right bugger ...
  • 52. ... but they don’t have to be
  • 53. Activity 5: Adding styleHands / Shading / Lettering / Arrows
  • 54. Sketching Interaction
  • 55. Activity 6: InteractionShow me:What happens?How is it initiated?
  • 56. 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
  • 57. 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* en practice until you become one
  • 58. A call to armsA lot of us spend precious hours creating heavy documentation that is dated before it iscompleted. Sometimes this is appropriate, but most times it isn’t. is year, re-imagine the way you work. Resolve to develop your prototyping skills. Getgood 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