This document is a guide on sketching for UI design, emphasizing its importance as a core design skill for product teams. It covers various types of sketches, sketching materials, and techniques to facilitate idea exploration and team collaboration. The content encourages using basic shapes and planning to create effective UI sketches, along with warm-up exercises and advanced vocabulary for elements.

1. Quick, Useful
UI Sketches
April 12, 2014
#LEANUX14

2. Lane Halley
lane@lanehalley.com
@thinknow

3. @thinknow
• Why sketch?
• Types of sketches
• Sketching materials
• Grids & functional groupings
• Your personal UI shorthand
Today you will learn

4. @thinknow
“A sketch is a rapidly
executed freehand
drawing that is not
usually intended as a
finished work.”
http://en.wikipedia.org/wiki/Sketch_%28drawing%29

5. @thinknow
• Record what you see
• Explore ideas quickly
• Demonstrate ideas to others
Why sketch?

6. @thinknowhttp://disney.wikia.com/wiki/Rocket_to_the_Moon

7. @thinknow
Sketching is a core
design skill

8. @thinknow
Many kinds of sketches
• Visual recording
• Sketchnotes
• Storyboards
• Concept sketches
• UI sketches

9. @thinknow
Visual Recording
@thinknowSketchnote by @deanmeistr
http://leanuxnyc.co/nyc/a-visual-recording-of-leanuxnyc/

10. @thinknowSketch by @iamctodd
https://twitter.com/iamctodd/status/322818463712284672/photo/1
Sketchnote

11. @thinknowhttp://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg
Storyboard
@thinknow

12. @thinknow
Concept sketches
@thinknow

13. @thinknowSketch by @rayraydel
https://www.flickr.com/photos/rayraydel/3868485532/
UI sketch

14. @thinknow
UI sketching is a core
skill for product teams

15. @thinknow
UI sketches help teams
• Explore options quickly
• Externalize thinking
• Share understanding
• Feel ownership

16. @thinknow
“The way to have
product team members
trust each other and
get along is to have
them sketch together.”
Joshua Porter @bokardo
http://bokardo.com/archives/the-importance-of-sketching-in-product-design/

17. @thinknow
Sketching helps
everyone be
on the same page

18. @thinknow
Everyone can draw
Be fearless!

19. @thinknow
Drawing Tools

20. @thinknow
Surfaces
• Printer paper
• Grid paper
• Whiteboard
• Notebook(s)
• Sketch sheets

21. @thinknow
The right notebook?
@thinknow

22. @thinknowhttp://sneakpeekit.com/
Wireframe browser
Multi-layout Wireframe
iPhone Quick Sketch
iPad Quick Sketch
free downloadable sketch sheets

23. @thinknow
Reverse wireframing
• Quickly sketch existing UIs
• See and understand UIs better
• Separate sketching from design

24. @thinknow
Semantic sketching
• Headings
• Body copy
• Images
• Controls
• Form elements

25. @thinknowsketch by @rohdesign
https://www.flickr.com/photos/rohdesign/3307874546/
Headings
Body copy
Button
Image

26. @thinknow
Personal UI shorthand
• Representative (not literal)
• Fast
• Versatile
• Structure, hierarchy, relationships
• NOT visual design

27. @thinknowSketch by @chrisrisdon
http://www.flickr.com/photos/32783264@N08/4587209002
Another shorthand sketch

28. @thinknow
The pencil has great
dynamic range. Your
lines can be faint or
strong, thick or thin

29. @thinknow
http://blog.alesandrini.com/wp-content/uploads/2011/10/pencils.jpg
http://learntoart.files.wordpress.com/2009/06/pencil-hardness-scale.jpg

30. @thinknow
Get your pencils ready!
Let’s draw some shapes

31. @thinknow
• Draw a page of squares
• Draw a page of circles
• Draw sets of parallel lines
Warm up exercises

32. @thinknow
You can draw almost
any UI using basic
shape primitives: circle,
triangle, rectangle, line

33. @thinknow
Draw this control panel
using only the four
basic shapes shown

34. @thinknow

35. @thinknow
Tip #1: Work “outside in”
• Draw the outside box first
• Place large elements first
• Add details and emphasis last

36. @thinknow
Draw this screen
working from the
outside in

37. @thinknow
Text
Text

38. @thinknow
Basic vocabulary:
How will you quickly draw these elements?

39. @thinknow
Headings (big, medium, small)
Body copy
Images
Buttons
Links
Sketch these elements

40. @thinknow
12 column grid
http://twitter.github.io/bootstrap/examples/hero.html
http://alefeuvre.github.io/foundation-grid-displayer/

41. @thinknow
Containers
http://twitter.github.io/bootstrap/examples/hero.html
http://alefeuvre.github.io/foundation-grid-displayer/

42. @thinknow
Containers (responsive)

43. @thinknow
Tip #2: Plan your sketch
• Aspect ratio
• Grid / guides
• Containers
• Images / icons
• Text blocks

44. @thinknow
Planning exercise:
What’s the structure here?
How much detail do you need to show?

46. @thinknow
Now you’re warmed up
Let’s do a few more...

51. @thinknow
Extended vocabulary:
How will you quickly draw these elements?

52. @thinknow
Radio buttons
Scrollbar
On/off toggle
Progress bar
Sketch these elements
Text input & label
Combo box
Checkboxes

53. @thinknow
Let’s practice
form elements.

56. @thinknow
OK, now it’s time to put
it all together.

58. @thinknow
Here’s the last one
Focus on the structure

60. @thinknow
Advanced vocabulary:
How will you quickly draw these elements?

61. @thinknow
Sketch these elements
Accordion
Carousel
Media player
Edit controls

62. @thinknow
Congratulations!
Keep sketching and you’ll
continue to improve

63. @thinknow
Show and tell
Here are some ways
I use sketches

64. @thinknow
Talking sketch

65. @thinknow
Show and discuss alternatives
@thinknow

66. @thinknow
Designer / developer pairing
@thinknow

67. @thinknow
Wireframe walkthrough
Text @thinknow

68. @thinknow

69. @thinknow
#uisketch
Share your new skillz!!

70. @thinknow
the
pencil
fear
Don’t