UPDATED DECK POSTED AT https://www.slideshare.net/LaneHalley/quick-useful-ui-sketches-33420882/ In this workshop, I'll lead you through a series of exercises which help you learn to draw good-looking, quick, useful, user interface (UI) sketches, followed by examples of how I use sketching in my projects. As I've embraced Agile and Lean Startup methods, I've learned to adapt my UX practice so it is more QUICK, VISUAL, COLLABORATIVE and CONTINUOUS. Learning how to quickly sketch screen layouts and user interface (UI) elements helps me think through design problems, communicate ideas to other people, collaborate, and reduce the need for pixel-perfect deliverables. Workshop at Opodz, September 18, 2013 https://sep18-uisketch.eventbrite.com/

1. Quick, Useful
UI Sketches
September 18, 2013

2. Opodz offers desk space and bandwidth in a well-designed collaborative work
environment serving Downtown LoS Angeles in the Little Tokyo/Arts District.

3. Lane Halley
lane@lanehalley.com
@thinknow

4. • Why sketch?
• Types of sketches
• Sketching materials
• Grids, containers and functional groupings
• Your personal UI shorthand
Tonight you will learn

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

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

7. Sketches are “sketchy”

8. Sketching is a
core design skill.

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

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

11. Sketchnote
Sketch by C Todd Lombardo @iamctodd

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

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

14. UI sketch
Sketch by Ray DeLaPena @rayraydel

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

16. “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)

17. Sketching helps
everyone get on
the same page.

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

19. Everyone can draw.
Be fearless!

20. Drawing tools

21. Surfaces
• Printer paper
• Grid paper
• Whiteboard
• Notebook(s)

22. The right notebook?

23. Let’s cover the basics...
• The pencil is powerful!
• Primitives
• Container and grid
• Functional groupings
• Your personal visual shorthand

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

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

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. Reverse wireframing
• Quickly sketch an existing interface
• See and understand UIs better
• Develop sketching skills in isolation
from solving design problems

30. Visual shorthand
Sketch by Chris Risdon @chrisrisdon

31. Semantic sketching
• Headings
• Body copy
• Images
• Form elements
• Controls

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

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

34. functional groupings (responsive)

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

36. Ready?
Here’s exercise #1

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

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

40. Use your new vocabulary
to sketch exercise #2

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

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

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

50. Title Text
Extra Line

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

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

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

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

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

58. Talking sketch

59. Show and discuss alternatives

60. Designer / developer pairing

61. Wireframe walkthrough

62. Making your mark
• Notebooks
• Drawing kit
• Tablet software

64. A few books that have
inspired me.

66. Show off your new skillz!!
#uisketch