Sketching 101

302028a74eb49881b3e6bc550ce514e5?s=47 Jackson Fox
September 26, 2011

Sketching 101

An introduction to sketching for interface design


Jackson Fox

September 26, 2011


  1. 3.
  2. 7.

    Techniques • Line Thickness • Size • Shading • Selective

    Detail • Isolation • Depth • Notation
  3. 8.

    Line Thickness Give emphasis to parts of the design by

    increasing the weight of the lines you’re drawing
  4. 10.

    Shading Sometimes you want to de-emphasize part of your sketch

    — shading an area can draw aention away from it
  5. 11.

    Selective Detail Filling in details only for the important bits

    saves time and shows what’s important
  6. 12.

    Isolation You can take selective detail even further, and only

    sketch in certain areas, leaving the rest prey fuzzy
  7. 13.

    Depth Adding just a bit of depth and perspective helps

    make UI bits in your sketches look “clickable”
  8. 14.

    Notes Don’t be scared to annotate the crap out of

    your sketches to help explain what’s going on
  9. 16.

    Drawing Buttons The secret to good buttons is thickening the

    right and bottom lines on the the rectangle to give the button some depth. Feel free to go wild with rounded borders and shading, but an extra two lines are all you really need.
  10. 17.

    Showing States Storyboards are a handy way to show the

    progression of states for an element. To keep sketches clean, you can sketch out these alternate states on a separate page (sketch templates like the one above are handy).
  11. 18.

    Headings and Text The only real difference between headings and

    body text is line weight. As always, the key is to put in only as much detail as you need, and most of the time, that means you don’t really need to show the actual text on the page. Some squiggles will do.
  12. 20.
  13. 22.

    Exploratory Sketching ugleah @ slideshare The informality of sketching makes

    it a great medium for exploring alternative design ideas. There are a lot of ways to generate new ideas: inspiration libraries, word association, conceptual models, etc.
  14. 23.

    Sketchboards ssumers1 @ flickr Sketchboards are an iterative & interactive

    approach to exploring design problems. Design alternatives are quickly sketched out and placed on the board, organized, then critiqued by participants. Kind of a collaborative storyboard combined with a design studio.
  15. 24.

    Sketching Components ryan singer @ 37s Start your design by

    sketching out the individual bits of the interface the user will need in order to complete their task. Focus on designing each one separately, then arrange them into a final cohesive design.
  16. 26.

    The Basics Ultra Fine Sharpie Superfine & Medium Tip Pi

    Markers Brush Tip Warm Gray Pi Markers Pen & Pencil Dorky pen holder
  17. 27.

    Other Handy Tools From Adaptive Path, includes 6-up and 1-up

    sketch templates Sketch Templates • Pentel Sign Pens are good for thick lines, and won’t stink up the joint • Micron pens seem to be built a bit beer than my usual Pi markers Markers