Quick, Useful UI Sketches GDI
•0 likes•1,883 views
Report
Download to read offline
Presented at Girl Develop It, Los Angeles January 24, 2015
More Related Content
More from Lane Goldstone
More from Lane Goldstone(20)
Recently uploaded
Recently uploaded(20)
Quick, Useful UI Sketches GDI
- 1. Quick, Useful UI Sketches January 24, 2015 @girlDevelopItLA
- 5. @thinknow • Why sketch? • Types of sketches • Sketching materials • Grids & functional groupings • Your personal UI shorthand Today you will learn
- 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. @thinknow • Record what you see • Explore ideas quickly • Demonstrate ideas to others Why sketch?
- 9. @thinknow Sketching is a core design skill
- 10. @thinknow Many kinds of sketches • Visual recording • Sketchnotes • Storyboards • Concept sketches • UI sketches
- 11. @thinknow Visual Recording @thinknowSketchnote by @deanmeistr http://leanuxnyc.co/nyc/a-visual-recording-of-leanuxnyc/
- 16. @thinknow UI sketching is a core skill for product teams
- 17. @thinknow UI sketches help teams • Explore options quickly • Externalize thinking • Share understanding • Feel ownership
- 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. @thinknow Sketching helps everyone be on the same page
- 20. @thinknow Everyone can draw Be fearless!
- 22. @thinknow Surfaces • Printer paper • Grid paper • Whiteboard • Notebook(s) • Sketch sheets
- 24. @thinknowhttp://sneakpeekit.com/ Wireframe browser Multi-layout Wireframe iPhone Quick Sketch iPad Quick Sketch free downloadable sketch sheets
- 25. @thinknow Reverse wireframing • Quickly sketch existing UIs • See and understand UIs better • Separate sketching from design
- 26. @thinknow Semantic sketching • Headings • Body copy • Images • Controls • Form elements
- 28. @thinknowsketch by @rohdesign https://www.flickr.com/photos/rohdesign/3307874546/ Headings Body copy Button Image
- 29. @thinknow Personal UI shorthand • Representative (not literal) • Fast • Versatile • Structure, hierarchy, relationships • NOT visual design
- 30. @thinknowSketch by @chrisrisdon http://www.flickr.com/photos/32783264@N08/4587209002 Another shorthand sketch
- 31. @thinknow The pencil has great dynamic range. Your lines can be faint or strong, thick or thin
- 33. @thinknow Get your pencils ready! Let’s draw some shapes
- 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. @thinknow You can draw almost any UI using basic shape primitives: circle, triangle, rectangle, line
- 36. @thinknow Draw this control panel using only the four basic shapes shown
- 37. @thinknow
- 38. @thinknow Tip #1: Work “outside in” • Draw the outside box first • Place large elements first • Add details and emphasis last
- 39. @thinknow Draw this screen working from the outside in
- 41. @thinknow Basic vocabulary: How will you quickly draw these elements?
- 42. @thinknow Headings (big, medium, small) Body copy Images Buttons Links Sketch these elements
- 46. @thinknow Tip #2: Plan your sketch • Aspect ratio • Grid / guides • Containers • Images / icons • Text blocks
- 47. @thinknow Planning exercise: What’s the structure here? How much detail do you need to show?
- 49. @thinknow Now you’re warmed up Let’s do a few more...
- 54. @thinknow Extended vocabulary: How will you quickly draw these elements?
- 55. @thinknow Radio buttons Scrollbar On/off toggle Progress bar Sketch these elements Text input & label Combo box Checkboxes
- 59. @thinknow OK, now it’s time to put it all together.
- 61. @thinknow Here’s the last one Focus on the structure
- 63. @thinknow Advanced vocabulary: How will you quickly draw these elements?
- 64. @thinknow Sketch these elements • Accordion • Carousel • Media player • Edit controls
- 65. @thinknow Keep sketching and you’ll continue to improve Congratulations! the pencil fear Don’t
- 66. @thinknow Show & tell Some examples of sketches from my projects
- 69. @thinknow Designer / developer pairing @thinknow
- 70. @thinknow Sketching before wireframing @thinknow Page elements User context & device considerations Full page Partial page Sequence of activities
- 72. @thinknow
- 73. @thinknow #uisketch Share your new skillz!!
- 74. @thinknow Please fill out the class evaluation form: goo.gl/xr1QJg