Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Quick, Useful UI Sketches

49.363 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design, Technologie, Business
  • My struggles with my dissertation were long gone since the day I contacted Emily for my dissertation help. Great assistance by guys from ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Thanks for the previous comments. www.HelpWriting.net helped me too
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Don't forget another good way of simplifying your writing is using external resources (such as ⇒ www.HelpWriting.net ⇐ ). This will definitely make your life more easier
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • You might get some help from ⇒ www.WritePaper.info ⇐ Success and best regards!
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Have u ever tried external professional writing services like ⇒ www.HelpWriting.net ⇐ ? I did and I am more than satisfied.
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Quick, Useful UI Sketches

  1. Quick, UsefulUI Sketches
  2. Lane Halleylane@carbonfive.com@thinknow
  3. What’s a sketch?“A sketch is a rapidly executed freehanddrawing that is not usually intended asa finished work.”— Wikipedia
  4. • Record what you see• Explore ideas quickly• Demonstrate ideas to othersWhy sketch?
  5. Sketches are “sketchy”
  6. Sketching is acore 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. SketchnoteSketch by C Todd Lombardo @iamctodd
  10. http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpgStoryboard
  11. http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpgConcept sketches
  12. UI sketchSketch by Ray DeLaPena @rayraydel
  13. UI sketching is acore skill forproduct teams.
  14. “When a designer and PM are out ofsync, it’s because one of them hasgotten ahead of the other in someway. ...The way to fix this isdeceptively simple: product peopleshould sketch together. “— Joshua Porter (@bokardo)
  15. Sketching helpseveryone get onthe 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 dynamicrange. Your lines can be faintor strong. Thick or thin.
  21. You can draw almostanything using basic shapeprimitives (circle, square,line, squiggle)
  22. 12 column gridhttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/
  23. functional groupingshttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/http://evernote.com/skitch/
  24. Visual shorthandSketch by Chris Risdon @chrisrisdon
  25. Reverse wireframing• Quickly sketch an existing interface• See and understand UIs better• Develop sketching skills in isolationfrom 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 linesGet your pencils ready!
  28. Practice:Reverse wireframe sketches30-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 vocabularyHow will you quickly draw• Headings (big, medium, small)• Body copy• Images• Buttons and links
  33. Use your new vocabularyto sketch exercise #2
  34. Now you’re warmed upDo three in a row!
  35. Extended vocabularyHow will you quickly draw• Text input & label• Combo box• Checkboxes & radio buttons• Scrollbar
  36. Let’s practice formelements. Here are threemore screens.
  37. Title TextExtra Line
  38. The next one’s tricky, butyou’re ready for it!
  39. Here’s the last one.Focus on the structure.
  40. Congratulations!Keep sketching and you’llcontinue to improve.
  41. Further vocabulary• Accordion• Carousel• Media player• And ...?
  42. Here are some of theways 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 haveinspired me.
  49. Thank you!Carbon FiveLean UX & AgileDevelopment for Weband mobile productswww.carbonfive.com