Uploaded byLane Goldstone
Quick, Useful UI Sketches
The document discusses the importance of sketching as a fundamental skill for UI design, emphasizing its role in quickly exploring ideas and aligning team understanding. It outlines various types of sketches, basic techniques, and practical exercises to enhance sketching abilities. Additionally, it encourages a collaborative approach to sketching among design and product teams to foster creativity and ownership.
More Related Content
Similar to Quick, Useful UI Sketches
Quick, Useful UI Sketches
- 1.
- 3.
- 4. What’s a sketch? “Asketch is a rapidly executed freehand drawing that is not usually intended as a finished work.” — Wikipedia
- 5. • Record whatyou see • Explore ideas quickly • Demonstrate ideas to others Why sketch?
- 6.
- 7. Sketching is a coredesign skill.
- 8. Many kinds ofsketches • Visual recording • Sketchnotes • Storyboards • Concept sketches • UI sketches
- 9.
- 10. Sketchnote Sketch by CTodd Lombardo @iamctodd
- 11.
- 12.
- 13. UI sketch Sketch byRay DeLaPena @rayraydel
- 14. UI sketching isa core skill for product teams.
- 15. “When a designerand 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)
- 16. Sketching helps everyone geton the same page.
- 17. UI sketches helpteams • Explore options quickly • Externalize thinking • Share understanding • Feel ownership
- 18. Everyone can draw. Befearless!
- 19. Your supplies • Pencil(eraser & sharpener) • Paper (plain or grid) • Timer (for the exercises)
- 20. Basic concepts • Thepencil is powerful! • Primitives • Container and grid • Functional groupings • Your personal visual shorthand
- 21. The pencil hasgreat dynamic range. Your lines can be faint or strong. Thick or thin.
- 22. You can drawalmost anything using basic shape primitives (circle, square, line, squiggle)
- 23.
- 24.
- 25. Visual shorthand Sketch byChris Risdon @chrisrisdon
- 26. Reverse wireframing • Quicklysketch an existing interface • See and understand UIs better • Develop sketching skills in isolation from solving design problems
- 27. Warm-up time. Let’s drawsome shapes.
- 28. • Draw apage of squares • Draw a page of circles • Draw a page of short parallel lines Get your pencils ready!
- 29.
- 30. Tip: Work fromthe outside in • Draw the outside box first • Create guides or a grid • Place large elements first • Add details and emphasis last
- 31.
- 33. Tip: Plan yoursketch • Aspect ratio • Grid or columns • Functional groupings
- 34. Basic vocabulary How willyou quickly draw • Headings (big, medium, small) • Body copy • Images • Buttons and links
- 35. Use your newvocabulary to sketch exercise #2
- 37. Now you’re warmedup Do three in a row!
- 41. Extended vocabulary How willyou quickly draw • Text input & label • Combo box • Checkboxes & radio buttons • Scrollbar
- 42. Let’s practice form elements.Here are three more screens.
- 45.
- 46. The next one’stricky, but you’re ready for it!
- 48. Here’s the lastone. Focus on the structure.
- 50. Congratulations! Keep sketching andyou’ll continue to improve.
- 51. Further vocabulary • Accordion •Carousel • Media player • And ...?
- 52. Here are someof the ways I use sketching.
- 53.
- 54. Show and discussalternatives
- 55. Designer / developerpairing
- 56.
- 57. How do youuse UI sketches? Share your photos with us! #uisketch
- 58. A few booksthat have inspired me.
- 60. Thank you! Carbon Five LeanUX & Agile Development for Web and mobile products www.carbonfive.com