Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to Draw Quick, Useful UI Sketches

Lane Halley
April 12, 2014

How to Draw Quick, Useful UI Sketches

Presented at Lean UX 2014, April 12, 2014

In this fun, hands-on workshop, I’ll lead you through a series of exercises which help you learn to draw good-looking, quick, useful, user interface (UI) sketches.

This class covers:
• Types of sketches
• Why sketch?
• Sketching materials
• Grids, containers and functional groupings
• Developing your personal UI shorthand

This workshop is appropriate for designers, product managers, Web developers, software engineers or anyone else who needs to think about or communicate concepts for digital products. No prior artistic or drawing experience necessary. If you can draw a circle, a square and a triangle, you’ve already got the basics covered!

Learning how to quickly sketch screen layouts and UI elements helps you think through design problems, communicate ideas to other people, collaborate, and reduce the need for pixel-perfect deliverables. Work through the exercises in this workshop and pick up some new skills you can use right away in your own projects.

Lane Halley

April 12, 2014

More Decks by Lane Halley

Other Decks in Design


  1. @thinknow • Why sketch? • Types of sketches • Sketching

    materials • Grids & functional groupings • Your personal UI shorthand Today you will learn
  2. @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
  3. @thinknow • Record what you see • Explore ideas quickly

    • Demonstrate ideas to others Why sketch?
  4. @thinknow Many kinds of sketches • Visual recording • Sketchnotes

    • Storyboards • Concept sketches • UI sketches
  5. @thinknow UI sketches help teams • Explore options quickly •

    Externalize thinking • Share understanding • Feel ownership
  6. @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/
  7. @thinknow Reverse wireframing • Quickly sketch existing UIs • See

    and understand UIs better • Separate sketching from design
  8. @thinknow Personal UI shorthand • Representative (not literal) • Fast

    • Versatile • Structure, hierarchy, relationships • NOT visual design
  9. @thinknow • Draw a page of squares • Draw a

    page of circles • Draw sets of parallel lines Warm up exercises
  10. @thinknow You can draw almost any UI using basic shape

    primitives: circle, triangle, rectangle, line
  11. @thinknow Tip #1: Work “outside in” • Draw the outside

    box first • Place large elements first • Add details and emphasis last
  12. @thinknow Tip #2: Plan your sketch • Aspect ratio •

    Grid / guides • Containers • Images / icons • Text blocks
  13. @thinknow Radio buttons Scrollbar On/off toggle Progress bar Sketch these

    elements Text input & label Combo box Checkboxes