Your SlideShare is downloading. ×
rface design
                   F or inte
                             ^
Sketching
   101
 by jack
         son Fox


    ...
Sketching is not the
 same as drawing
Drawing
Sketching   soxiam @ flickr
How To
Sketch
Basic Shapes

 Circles    Rectangles   Arrows




Triangles   Squiggles
Techniques
•   Line Thickness     •   Depth
•   Size               •   Notation
•   Shading
•   Selective Detail
•   Isola...
Give emphasis to
            parts of the design
            by increasing the
            weight of the lines
           ...
Size can also be used
       to draw aention to
       parts of your sketch




Size
Sometimes you want
          to de-emphasize part
          of your sketch —
          shading an area can
          draw ...
Filling in details only
              for the important
              bits saves time and
              shows what’s
     ...
You can take
            selective detail
            even further, and
            only sketch in
            certain are...
Adding just a bit of
        depth and perspective
        helps make UI bits in
        your sketches look
        “click...
Don’t be scared to
        annotate the crap out
        of your sketches to
        help explain what’s
        going on
...
Sketching
Interfaces
•   Drawing buons
•   Showing states
•   Headings & text
Drawing Buttons
The secret to good buttons is thickening the right and bottom lines on the the rectangle to give the butto...
Showing States
Storyboards are a handy way to show the progression of states for an element. To keep sketches clean, you c...
Headings and Text
The only real difference between headings and body text is line weight. As always, the key is to put in ...
What To
Sketch
Sketching 201
Exploratory Sketching                                                                                             ugleah @...
Sketchboards                                                                                                       ssumers...
Sketching Components                                                                                                  ryan...
Sketching
  Tools
Superfine & Medium Tip
Ultra Fine Sharpie
                      Pi Markers




                                  Dorky pen...
Sketch Templates
             From Adaptive Path, includes 6-up and
             1-up sketch templates




             Ma...
Sketching for Design
Upcoming SlideShare
Loading in...5
×

Sketching for Design

17,817

Published on

A presentation I gave to the design team at Viget Labs on June 9, 2009

Published in: Design, Technology, Business
7 Comments
154 Likes
Statistics
Notes
No Downloads
Views
Total Views
17,817
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
0
Comments
7
Likes
154
Embeds 0
No embeds

No notes for slide

Transcript of "Sketching for Design"

  1. 1. rface design F or inte ^ Sketching 101 by jack son Fox june 9, 2009
  2. 2. Sketching is not the same as drawing
  3. 3. Drawing
  4. 4. Sketching soxiam @ flickr
  5. 5. How To Sketch
  6. 6. Basic Shapes Circles Rectangles Arrows Triangles Squiggles
  7. 7. Techniques • Line Thickness • Depth • Size • Notation • Shading • Selective Detail • Isolation
  8. 8. Give emphasis to parts of the design by increasing the weight of the lines you’re drawing Line Thickness
  9. 9. Size can also be used to draw aention to parts of your sketch Size
  10. 10. Sometimes you want to de-emphasize part of your sketch — shading an area can draw aention away from it Shading
  11. 11. Filling in details only for the important bits saves time and shows what’s important Selective Detail
  12. 12. You can take selective detail even further, and only sketch in certain areas, leaving the rest prey fuzzy Isolation
  13. 13. Adding just a bit of depth and perspective helps make UI bits in your sketches look “clickable” Depth
  14. 14. Don’t be scared to annotate the crap out of your sketches to help explain what’s going on Notes
  15. 15. Sketching Interfaces • Drawing buons • Showing states • Headings & text
  16. 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.
  17. 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).
  18. 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.
  19. 19. What To Sketch
  20. 20. Sketching 201
  21. 21. 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.
  22. 22. 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.
  23. 23. 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.
  24. 24. Sketching Tools
  25. 25. Superfine & Medium Tip Ultra Fine Sharpie Pi Markers Dorky pen holder Brush Tip Warm Gray Pi Markers Pen & Pencil The Basics
  26. 26. Sketch Templates From Adaptive Path, includes 6-up and 1-up sketch templates Markers • 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 Other Handy Tools

×