• Save
Quick, Useful UI Sketches
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Quick, Useful UI Sketches

  • 38,775 views
Uploaded 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.

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 in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • @sblakeborough Thanks for your comments, I'd love to hear back about how your workshops go. Leave another comment here tweet @thinknow, please!
    Are you sure you want to
    Your message goes here
  • Lane, I can not thank you enough. I've proposed running a short series of training sessions at work. The intention is to raise the bar (and confidence in some) of our whole team's ability to communicate visually with one another and clients in this increasingly Lean UX age. I'm a passionate believer in the power of sketching and it will be a theme I shall return to. Your presentation will save me a lot of time. Thank you again.
    Are you sure you want to
    Your message goes here
  • @figuercaro thanks for your comment. I appreciate your feedback!
    Are you sure you want to
    Your message goes here
  • Thanks Lane for sharing, I really liked how you structure the presentation, very useful! :)
    Are you sure you want to
    Your message goes here
  • Exactly what I needed and so timely. Thanks, Lane!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
38,775
On Slideshare
36,332
From Embeds
2,443
Number of Embeds
32

Actions

Shares
Downloads
0
Comments
12
Likes
93

Embeds 2,443

http://www.theapprenticepath.com 1,560
http://www.linkedin.com 252
http://smm-apps.com 131
http://www.nomadchique.com 104
http://localhost 85
http://leaders.pickdigitalagency.com 82
http://www.socaluxcamp.com 77
https://twitter.com 64
http://lanyrd.com 12
http://www.google.com 12
http://dev.leaders.net.au 9
http://stage.crowdfunder.com 7
http://leaders.net.au 7
http://54.236.221.78 6
http://pinterest.com 4
http://translate.googleusercontent.com 4
http://www.pinterest.com 4
http://www.365dailyjournal.com 3
http://leaders.local.com 3
http://tweetedtimes.com 2
http://mammothhq.com 2
http://www60.jimdo.com 2
http://www.feedreader.com 2
https://www.linkedin.com 1
http://theapprenticepath.com 1
http://dev.socaluxcamp.com 1
http://datastory.de 1
http://feedreader.com 1
https://blackboard.missouristate.edu 1
http://jether.net 1
http://www.pulse.me 1
http://webcache.googleusercontent.com 1

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, 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