1. Quick, Useful
UI Sketches

3. Lane Halley
lane@carbonfive.com
@thinknow

4. What’s a sketch?
“A sketch is a rapidly executed freehand
drawing that is not usually intended as
a finished work.”
— Wikipedia

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

6. Sketches are “sketchy”

7. Sketching is a
core design skill.

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

9. http://leanuxnyc.co/nyc/a-visual-recording-of-leanuxnyc/
Visual Recording

10. Sketchnote
Sketch by C Todd Lombardo @iamctodd

11. http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg
Storyboard

12. http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg
Concept sketches

13. UI sketch
Sketch by Ray DeLaPena @rayraydel

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

15. “When a designer and PM are out of
sync, it’s because one of them has
gotten ahead of the other in some
way. ...The way to fix this is
deceptively simple: product people
should sketch together. “
— Joshua Porter (@bokardo)

16. Sketching helps
everyone get on
the same page.

17. UI sketches help teams
• Explore options quickly
• Externalize thinking
• Share understanding
• Feel ownership

18. Everyone can draw.
Be fearless!

19. Your supplies
• Pencil (eraser & sharpener)
• Paper (plain or grid)
• Timer (for the exercises)

20. Basic concepts
• The pencil is powerful!
• Primitives
• Container and grid
• Functional groupings
• Your personal visual shorthand

21. The pencil has great dynamic
range. Your lines can be faint
or strong. Thick or thin.

22. You can draw almost
anything using basic shape
primitives (circle, square,
line, squiggle)

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

24. functional groupings
http://twitter.github.io/bootstrap/examples/hero.html
http://alefeuvre.github.io/foundation-grid-displayer/
http://evernote.com/skitch/

25. Visual shorthand
Sketch by Chris Risdon @chrisrisdon

26. Reverse wireframing
• Quickly sketch an existing interface
• See and understand UIs better
• Develop sketching skills in isolation
from solving design problems

27. Warm-up time.
Let’s draw some shapes.

28. • Draw a page of squares
• Draw a page of circles
• Draw a page of short parallel lines
Get your pencils ready!

29. Practice:
Reverse wireframe sketches
30-seconds each.

30. Tip: Work from the outside in
• Draw the outside box first
• Create guides or a grid
• Place large elements first
• Add details and emphasis last

31. Ready?
Here’s exercise #1

33. Tip: Plan your sketch
• Aspect ratio
• Grid or columns
• Functional groupings

34. Basic vocabulary
How will you quickly draw
• Headings (big, medium, small)
• Body copy
• Images
• Buttons and links

35. Use your new vocabulary
to sketch exercise #2

37. Now you’re warmed up
Do three in a row!

41. Extended vocabulary
How will you quickly draw
• Text input & label
• Combo box
• Checkboxes & radio buttons
• Scrollbar

42. Let’s practice form
elements. Here are three
more screens.

45. Title Text
Extra Line

46. The next one’s tricky, but
you’re ready for it!

48. Here’s the last one.
Focus on the structure.

50. Congratulations!
Keep sketching and you’ll
continue to improve.

51. Further vocabulary
• Accordion
• Carousel
• Media player
• And ...?

52. Here are some of the
ways I use sketching.

53. Talking sketch

54. Show and discuss alternatives

55. Designer / developer pairing

56. Wireframe walkthrough

57. How do you use UI sketches?
Share your photos with us!
#uisketch

58. A few books that have
inspired me.

60. Thank you!
Carbon Five
Lean UX & Agile
Development for Web
and mobile products
www.carbonfive.com