Your SlideShare is downloading. ×
0
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
How to Draw Quick, Useful UI Sketches
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How to Draw Quick, Useful UI Sketches

11,263

Published on

UPDATED DECK POSTED AT https://www.slideshare.net/LaneHalley/quick-useful-ui-sketches-33420882/ …

UPDATED DECK POSTED AT https://www.slideshare.net/LaneHalley/quick-useful-ui-sketches-33420882/

In this workshop, I'll lead you through a series of exercises which help you learn to draw good-looking, quick, useful, user interface (UI) sketches, followed by examples of how I use sketching in my projects.

As I've embraced Agile and Lean Startup methods, I've learned to adapt my UX practice so it is more QUICK, VISUAL, COLLABORATIVE and CONTINUOUS. Learning how to quickly sketch screen layouts and user interface (UI) elements helps me think through design problems, communicate ideas to other people, collaborate, and reduce the need for pixel-perfect deliverables.

Workshop at Opodz, September 18, 2013
https://sep18-uisketch.eventbrite.com/

Published in: Design, Technology, Art & Photos
4 Comments
65 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,263
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
98
Comments
4
Likes
65
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Quick, Useful UI Sketches September 18, 2013
  • 2. Opodz offers desk space and bandwidth in a well-designed collaborative work environment serving Downtown LoS Angeles in the Little Tokyo/Arts District.
  • 3. Lane Halley lane@lanehalley.com @thinknow
  • 4. • Why sketch? • Types of sketches • Sketching materials • Grids, containers and functional groupings • Your personal UI shorthand Tonight you will learn
  • 5. What’s a sketch? “A sketch is a rapidly executed freehand drawing that is not usually intended as a finished work.” — Wikipedia
  • 6. • Record what you see • Explore ideas quickly • Demonstrate ideas to others Why sketch?
  • 7. Sketches are “sketchy”
  • 8. Sketching is a core design skill.
  • 9. Many kinds of sketches • Visual recording • Sketchnotes • Storyboards • Concept sketches • UI sketches
  • 10. http://leanuxnyc.co/nyc/a-visual-recording-of-leanuxnyc/ Visual Recording
  • 11. Sketchnote Sketch by C Todd Lombardo @iamctodd
  • 12. http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Storyboard
  • 13. http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Concept sketches
  • 14. UI sketch Sketch by Ray DeLaPena @rayraydel
  • 15. UI sketching is a core skill for product teams.
  • 16. “When a designer and 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)
  • 17. Sketching helps everyone get on the same page.
  • 18. UI sketches help teams • Explore options quickly • Externalize thinking • Share understanding • Feel ownership
  • 19. Everyone can draw. Be fearless!
  • 20. Drawing tools
  • 21. Surfaces • Printer paper • Grid paper • Whiteboard • Notebook(s)
  • 22. The right notebook?
  • 23. Let’s cover the basics... • The pencil is powerful! • Primitives • Container and grid • Functional groupings • Your personal visual shorthand
  • 24. You can draw almost anything using basic shape primitives (circle, square, line, squiggle)
  • 25. The pencil has great dynamic range. Your lines can be faint or strong. Thick or thin.
  • 26. Warm-up time! Let’s draw some shapes.
  • 27. • Draw a page of squares • Draw a page of circles • Draw a page of short parallel lines Get your pencils ready!
  • 28. Reverse wireframing • Quickly sketch an existing interface • See and understand UIs better • Develop sketching skills in isolation from solving design problems
  • 29. Visual shorthand Sketch by Chris Risdon @chrisrisdon
  • 30. Semantic sketching • Headings • Body copy • Images • Form elements • Controls
  • 31. 12 column grid http://twitter.github.io/bootstrap/examples/hero.html http://alefeuvre.github.io/foundation-grid-displayer/
  • 32. functional groupings http://twitter.github.io/bootstrap/examples/hero.html http://alefeuvre.github.io/foundation-grid-displayer/ http://evernote.com/skitch/
  • 33. functional groupings (responsive)
  • 34. Tip: Work from the outside in • Draw the outside box first • Create guides or a grid • Place large elements first • Add details and emphasis last
  • 35. Ready? Here’s exercise #1
  • 36. Tip: Plan your sketch • Aspect ratio • Grid or columns • Functional groupings
  • 37. Basic vocabulary • How will you quickly draw • Headings (big, medium, small) • Body copy • Images • Buttons and links
  • 38. Use your new vocabulary to sketch exercise #2
  • 39. Now you’re warmed up Do three in a row!
  • 40. Extended vocabulary How will you quickly draw • Text input & label • Combo box • Checkboxes & radio buttons • Scrollbar
  • 41. Let’s practice form elements. Here are three more screens.
  • 42. Title Text Extra Line
  • 43. The next one’s tricky, but you’re ready for it!
  • 44. Here’s the last one. Focus on the structure.
  • 45. Congratulations! Keep sketching and you’ll continue to improve.
  • 46. Further vocabulary • Accordion • Carousel • Media player • And ...?
  • 47. Here are some of the ways I use sketching.
  • 48. Talking sketch
  • 49. Show and discuss alternatives
  • 50. Designer / developer pairing
  • 51. Wireframe walkthrough
  • 52. Making your mark • Notebooks • Drawing kit • Tablet software
  • 53. A few books that have inspired me.
  • 54. Show off your new skillz!! #uisketch

×