Quick, Useful UI Sketches

Digital Product Designer at Philosophie Group
Apr. 11, 2014

More Related Content


Quick, Useful UI Sketches

  1. Quick, Useful UI Sketches April 12, 2014 #LEANUX14
  2. Lane Halley @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.”
  5. @thinknow • Record what you see • Explore ideas quickly • Demonstrate ideas to others Why sketch?
  6. @thinknow
  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
  10. @thinknowSketch by @iamctodd Sketchnote
  11. @thinknow Storyboard @thinknow
  12. @thinknow Concept sketches @thinknow
  13. @thinknowSketch by @rayraydel 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
  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. @thinknow 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 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 Another shorthand sketch
  28. @thinknow The pencil has great dynamic range. Your lines can be faint or strong, thick or thin
  29. @thinknow
  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
  41. @thinknow Containers
  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?
  45. @thinknow Now you’re warmed up Let’s do a few more...
  46. @thinknow Extended vocabulary: How will you quickly draw these elements?
  47. @thinknow Radio buttons Scrollbar On/off toggle Progress bar Sketch these elements Text input & label Combo box Checkboxes
  48. @thinknow Let’s practice form elements.
  49. @thinknow OK, now it’s time to put it all together.
  50. @thinknow Here’s the last one Focus on the structure
  51. @thinknow Advanced vocabulary: How will you quickly draw these elements?
  52. @thinknow Sketch these elements Accordion Carousel Media player Edit controls
  53. @thinknow Congratulations! Keep sketching and you’ll continue to improve
  54. @thinknow Show and tell Here are some ways I use sketches
  55. @thinknow Talking sketch
  56. @thinknow Show and discuss alternatives @thinknow
  57. @thinknow Designer / developer pairing @thinknow
  58. @thinknow Wireframe walkthrough Text @thinknow
  59. @thinknow
  60. @thinknow #uisketch Share your new skillz!!
  61. @thinknow the pencil fear Don’t