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.
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.
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
beer than my usual Pi markers
Other Handy Tools