Successfully reported this slideshow.

Quick, Useful UI Sketches

104

Share

Loading in …3
×
1 of 60
1 of 60

Quick, Useful UI Sketches

104

Share

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.

First presented at SoCal UX Camp, June 1, 2013 http://www.socaluxcamp.com/
Revised June 2, 2013 - modified deck for better self-directed learning

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.

First presented at SoCal UX Camp, June 1, 2013 http://www.socaluxcamp.com/
Revised June 2, 2013 - modified deck for better self-directed learning

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Quick, Useful UI Sketches

  1. Quick, Useful UI Sketches
  2. Lane Halley lane@carbonfive.com @thinknow
  3. What’s a sketch? “A sketch is a rapidly executed freehand drawing that is not usually intended as a finished work.” — Wikipedia
  4. • Record what you see • Explore ideas quickly • Demonstrate ideas to others Why sketch?
  5. Sketches are “sketchy”
  6. Sketching is a core design skill.
  7. Many kinds of sketches • Visual recording • Sketchnotes • Storyboards • Concept sketches • UI sketches
  8. http://leanuxnyc.co/nyc/a-visual-recording-of-leanuxnyc/ Visual Recording
  9. Sketchnote Sketch by C Todd Lombardo @iamctodd
  10. http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Storyboard
  11. http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Concept sketches
  12. UI sketch Sketch by Ray DeLaPena @rayraydel
  13. UI sketching is a core skill for product teams.
  14. “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)
  15. Sketching helps everyone get on the same page.
  16. UI sketches help teams • Explore options quickly • Externalize thinking • Share understanding • Feel ownership
  17. Everyone can draw. Be fearless!
  18. Your supplies • Pencil (eraser & sharpener) • Paper (plain or grid) • Timer (for the exercises)
  19. Basic concepts • The pencil is powerful! • Primitives • Container and grid • Functional groupings • Your personal visual shorthand
  20. The pencil has great dynamic range. Your lines can be faint or strong. Thick or thin.
  21. You can draw almost anything using basic shape primitives (circle, square, line, squiggle)
  22. 12 column grid http://twitter.github.io/bootstrap/examples/hero.html http://alefeuvre.github.io/foundation-grid-displayer/
  23. functional groupings http://twitter.github.io/bootstrap/examples/hero.html http://alefeuvre.github.io/foundation-grid-displayer/ http://evernote.com/skitch/
  24. Visual shorthand Sketch by Chris Risdon @chrisrisdon
  25. Reverse wireframing • Quickly sketch an existing interface • See and understand UIs better • Develop sketching skills in isolation from solving design problems
  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. Practice: Reverse wireframe sketches 30-seconds each.
  29. 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
  30. Ready? Here’s exercise #1
  31. Tip: Plan your sketch • Aspect ratio • Grid or columns • Functional groupings
  32. Basic vocabulary How will you quickly draw • Headings (big, medium, small) • Body copy • Images • Buttons and links
  33. Use your new vocabulary to sketch exercise #2
  34. Now you’re warmed up Do three in a row!
  35. Extended vocabulary How will you quickly draw • Text input & label • Combo box • Checkboxes & radio buttons • Scrollbar
  36. Let’s practice form elements. Here are three more screens.
  37. Title Text Extra Line
  38. The next one’s tricky, but you’re ready for it!
  39. Here’s the last one. Focus on the structure.
  40. Congratulations! Keep sketching and you’ll continue to improve.
  41. Further vocabulary • Accordion • Carousel • Media player • And ...?
  42. Here are some of the ways I use sketching.
  43. Talking sketch
  44. Show and discuss alternatives
  45. Designer / developer pairing
  46. Wireframe walkthrough
  47. How do you use UI sketches? Share your photos with us! #uisketch
  48. A few books that have inspired me.
  49. Thank you! Carbon Five Lean UX & Agile Development for Web and mobile products www.carbonfive.com

×