Successfully reported this slideshow.
Activate your 30 day free trial to unlock unlimited reading.
Give emphasis to
parts of the design
by increasing the
weight of the lines
Size can also be used
to draw aention to
parts of your sketch
Sometimes you want
to de-emphasize part
of your sketch —
shading an area can
draw aention away
Filling in details only
for the important
bits saves time and
You can take
even further, and
only sketch in
leaving the rest
Adding just a bit of
depth and perspective
helps make UI bits in
your sketches look
Don’t be scared to
annotate the crap out
of your sketches to
help explain what’s
• Drawing buons
• Showing states
• Headings & text
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.
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).
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.
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.
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.
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.
Superﬁne & Medium Tip
Ultra Fine Sharpie
Pen & Pencil
From Adaptive Path, includes 6-up and
1-up 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
beer than my usual Pi markers
Other Handy Tools