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

1. rface design
F or inte
^
Sketching
101
by jack
son Fox
june 9, 2009

2. Sketching is not the
same as drawing

3. Drawing

4. Sketching soxiam @ flickr

5. How To
Sketch

6. Basic Shapes
Circles Rectangles Arrows
Triangles Squiggles

7. Techniques
• Line Thickness • Depth
• Size • Notation
• Shading
• Selective Detail
• Isolation

8. Give emphasis to
parts of the design
by increasing the
weight of the lines
you’re drawing
Line Thickness

9. Size can also be used
to draw aention to
parts of your sketch
Size

10. Sometimes you want
to de-emphasize part
of your sketch —
shading an area can
draw aention away
from it
Shading

11. Filling in details only
for the important
bits saves time and
shows what’s
important
Selective Detail

12. You can take
selective detail
even further, and
only sketch in
certain areas,
leaving the rest
prey fuzzy
Isolation

13. Adding just a bit of
depth and perspective
helps make UI bits in
your sketches look
“clickable”
Depth

14. Don’t be scared to
annotate the crap out
of your sketches to
help explain what’s
going on
Notes

15. Sketching
Interfaces
• Drawing buons
• Showing states
• Headings & text

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. 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. 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. What To
Sketch

21. Sketching 201

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.

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.

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.

25. Sketching
Tools

26. Superfine & Medium Tip
Ultra Fine Sharpie
Pi Markers
Dorky pen
holder
Brush Tip
Warm Gray
Pi Markers
Pen & Pencil
The Basics

27. 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