Successfully reported this slideshow.
Your SlideShare is downloading. ×

Quick, Useful UI Sketches GDI

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Loading in …3
×

Check these out next

1 of 74 Ad
Advertisement

More Related Content

Advertisement

Quick, Useful UI Sketches GDI

  1. 1. Quick, Useful UI Sketches January 24, 2015 @girlDevelopItLA
  2. 2. @thinknowText Event sponsors @BuzzFeed @SendGrid
  3. 3. Lane Halley lane@lanehalley.com @thinknow
  4. 4. www.flickr.com/photos/oskay/253010287/
  5. 5. @thinknow • Why sketch? • Types of sketches • Sketching materials • Grids & functional groupings • Your personal UI shorthand Today you will learn
  6. 6. @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
  7. 7. @thinknow • Record what you see • Explore ideas quickly • Demonstrate ideas to others Why sketch?
  8. 8. @thinknowhttp://disney.wikia.com/wiki/Rocket_to_the_Moon
  9. 9. @thinknow Sketching is a core design skill
  10. 10. @thinknow Many kinds of sketches • Visual recording • Sketchnotes • Storyboards • Concept sketches • UI sketches
  11. 11. @thinknow Visual Recording @thinknowSketchnote by @deanmeistr http://leanuxnyc.co/nyc/a-visual-recording-of-leanuxnyc/
  12. 12. @thinknowSketch by @iamctodd https://twitter.com/iamctodd/status/322818463712284672/photo/1 Sketchnote
  13. 13. @thinknowhttp://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Storyboard @thinknow
  14. 14. @thinknow Concept sketches @thinknow
  15. 15. @thinknowSketch by @rayraydel https://www.flickr.com/photos/rayraydel/3868485532/ UI sketch
  16. 16. @thinknow UI sketching is a core skill for product teams
  17. 17. @thinknow UI sketches help teams • Explore options quickly • Externalize thinking • Share understanding • Feel ownership
  18. 18. @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/
  19. 19. @thinknow Sketching helps everyone be on the same page
  20. 20. @thinknow Everyone can draw Be fearless!
  21. 21. @thinknow Drawing Tools
  22. 22. @thinknow Surfaces • Printer paper • Grid paper • Whiteboard • Notebook(s) • Sketch sheets
  23. 23. @thinknow The right notebook? @thinknow
  24. 24. @thinknowhttp://sneakpeekit.com/ Wireframe browser Multi-layout Wireframe iPhone Quick Sketch iPad Quick Sketch free downloadable sketch sheets
  25. 25. @thinknow Reverse wireframing • Quickly sketch existing UIs • See and understand UIs better • Separate sketching from design
  26. 26. @thinknow Semantic sketching • Headings • Body copy • Images • Controls • Form elements
  27. 27. @thinknowsketch by @rohdesign https://www.flickr.com/photos/rohdesign/3307874546/
  28. 28. @thinknowsketch by @rohdesign https://www.flickr.com/photos/rohdesign/3307874546/ Headings Body copy Button Image
  29. 29. @thinknow Personal UI shorthand • Representative (not literal) • Fast • Versatile • Structure, hierarchy, relationships • NOT visual design
  30. 30. @thinknowSketch by @chrisrisdon http://www.flickr.com/photos/32783264@N08/4587209002 Another shorthand sketch
  31. 31. @thinknow The pencil has great dynamic range. Your lines can be faint or strong, thick or thin
  32. 32. @thinknow http://blog.alesandrini.com/wp-content/uploads/2011/10/pencils.jpg http://learntoart.files.wordpress.com/2009/06/pencil-hardness-scale.jpg
  33. 33. @thinknow Get your pencils ready! Let’s draw some shapes
  34. 34. @thinknow • Draw a page of squares • Draw a page of circles • Draw sets of parallel lines • Shade from light to dark Warm up exercises
  35. 35. @thinknow You can draw almost any UI using basic shape primitives: circle, triangle, rectangle, line
  36. 36. @thinknow Draw this control panel using only the four basic shapes shown
  37. 37. @thinknow
  38. 38. @thinknow Tip #1: Work “outside in” • Draw the outside box first • Place large elements first • Add details and emphasis last
  39. 39. @thinknow Draw this screen working from the outside in
  40. 40. @thinknow Text Text
  41. 41. @thinknow Basic vocabulary: How will you quickly draw these elements?
  42. 42. @thinknow Headings (big, medium, small) Body copy Images Buttons Links Sketch these elements
  43. 43. @thinknow 12 column grid http://twitter.github.io/bootstrap/examples/hero.html http://alefeuvre.github.io/foundation-grid-displayer/
  44. 44. @thinknow Containers http://twitter.github.io/bootstrap/examples/hero.html http://alefeuvre.github.io/foundation-grid-displayer/
  45. 45. @thinknow Containers (responsive)
  46. 46. @thinknow Tip #2: Plan your sketch • Aspect ratio • Grid / guides • Containers • Images / icons • Text blocks
  47. 47. @thinknow Planning exercise: What’s the structure here? How much detail do you need to show?
  48. 48. @thinknow Now you’re warmed up Let’s do a few more...
  49. 49. @thinknow Extended vocabulary: How will you quickly draw these elements?
  50. 50. @thinknow Radio buttons Scrollbar On/off toggle Progress bar Sketch these elements Text input & label Combo box Checkboxes
  51. 51. @thinknow Let’s practice form elements.
  52. 52. @thinknow OK, now it’s time to put it all together.
  53. 53. @thinknow Here’s the last one Focus on the structure
  54. 54. @thinknow Advanced vocabulary: How will you quickly draw these elements?
  55. 55. @thinknow Sketch these elements • Accordion • Carousel • Media player • Edit controls
  56. 56. @thinknow Keep sketching and you’ll continue to improve Congratulations! the pencil fear Don’t
  57. 57. @thinknow Show & tell Some examples of sketches from my projects
  58. 58. @thinknow Talking sketch
  59. 59. @thinknow Alternative layout thumbnails @thinknow
  60. 60. @thinknow Designer / developer pairing @thinknow
  61. 61. @thinknow Sketching before wireframing @thinknow Page elements User context & device considerations Full page Partial page Sequence of activities
  62. 62. @thinknow Wireframe walkthrough @thinknow
  63. 63. @thinknow
  64. 64. @thinknow #uisketch Share your new skillz!!
  65. 65. @thinknow Please fill out the class evaluation form: goo.gl/xr1QJg

×