Your SlideShare is downloading. ×
0
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
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

Quick, Useful UI Sketches

4,380

Published on

Presented at Lean UX 2014, April 12, 2014 …

Presented at Lean UX 2014, April 12, 2014
www.leanuxnyc.co

In this fun, hands-on workshop, I’ll lead you through a series of exercises which help you learn to draw good-looking, quick, useful, user interface (UI) sketches.

This class covers:
• Types of sketches
• Why sketch?
• Sketching materials
• Grids, containers and functional groupings
• Developing your personal UI shorthand

This workshop is appropriate for designers, product managers, Web developers, software engineers or anyone else who needs to think about or communicate concepts for digital products. No prior artistic or drawing experience necessary. If you can draw a circle, a square and a triangle, you’ve already got the basics covered!

Learning how to quickly sketch screen layouts and UI elements helps you think through design problems, communicate ideas to other people, collaborate, and reduce the need for pixel-perfect deliverables. Work through the exercises in this workshop and pick up some new skills you can use right away in your own projects.

Published in: Design, Technology, Education
2 Comments
57 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,380
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
2
Likes
57
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 April 12, 2014 #LEANUX14
  • 2. Lane Halley lane@lanehalley.com @thinknow
  • 3. @thinknow • Why sketch? • Types of sketches • Sketching materials • Grids & functional groupings • Your personal UI shorthand Today you will learn
  • 4. @thinknow “A sketch is a rapidly executed freehand drawing that is not usually intended as a finished work.” http://en.wikipedia.org/wiki/Sketch_%28drawing%29
  • 5. @thinknow • Record what you see • Explore ideas quickly • Demonstrate ideas to others Why sketch?
  • 6. @thinknowhttp://disney.wikia.com/wiki/Rocket_to_the_Moon
  • 7. @thinknow Sketching is a core design skill
  • 8. @thinknow Many kinds of sketches • Visual recording • Sketchnotes • Storyboards • Concept sketches • UI sketches
  • 9. @thinknow Visual Recording @thinknowSketchnote by @deanmeistr http://leanuxnyc.co/nyc/a-visual-recording-of-leanuxnyc/
  • 10. @thinknowSketch by @iamctodd https://twitter.com/iamctodd/status/322818463712284672/photo/1 Sketchnote
  • 11. @thinknowhttp://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Storyboard @thinknow
  • 12. @thinknow Concept sketches @thinknow
  • 13. @thinknowSketch by @rayraydel https://www.flickr.com/photos/rayraydel/3868485532/ UI sketch
  • 14. @thinknow UI sketching is a core skill for product teams
  • 15. @thinknow UI sketches help teams • Explore options quickly • Externalize thinking • Share understanding • Feel ownership
  • 16. @thinknow “The way to have product team members trust each other and get along is to have them sketch together.” Joshua Porter @bokardo http://bokardo.com/archives/the-importance-of-sketching-in-product-design/
  • 17. @thinknow Sketching helps everyone be on the same page
  • 18. @thinknow Everyone can draw Be fearless!
  • 19. @thinknow Drawing Tools
  • 20. @thinknow Surfaces • Printer paper • Grid paper • Whiteboard • Notebook(s) • Sketch sheets
  • 21. @thinknow The right notebook? @thinknow
  • 22. @thinknowhttp://sneakpeekit.com/ Wireframe browser Multi-layout Wireframe iPhone Quick Sketch iPad Quick Sketch free downloadable sketch sheets
  • 23. @thinknow Reverse wireframing • Quickly sketch existing UIs • See and understand UIs better • Separate sketching from design
  • 24. @thinknow Semantic sketching • Headings • Body copy • Images • Controls • Form elements
  • 25. @thinknowsketch by @rohdesign https://www.flickr.com/photos/rohdesign/3307874546/ Headings Body copy Button Image
  • 26. @thinknow Personal UI shorthand • Representative (not literal) • Fast • Versatile • Structure, hierarchy, relationships • NOT visual design
  • 27. @thinknowSketch by @chrisrisdon http://www.flickr.com/photos/32783264@N08/4587209002 Another shorthand sketch
  • 28. @thinknow The pencil has great dynamic range. Your lines can be faint or strong, thick or thin
  • 29. @thinknow http://blog.alesandrini.com/wp-content/uploads/2011/10/pencils.jpg http://learntoart.files.wordpress.com/2009/06/pencil-hardness-scale.jpg
  • 30. @thinknow Get your pencils ready! Let’s draw some shapes
  • 31. @thinknow • Draw a page of squares • Draw a page of circles • Draw sets of parallel lines Warm up exercises
  • 32. @thinknow You can draw almost any UI using basic shape primitives: circle, triangle, rectangle, line
  • 33. @thinknow Draw this control panel using only the four basic shapes shown
  • 34. @thinknow
  • 35. @thinknow Tip #1: Work “outside in” • Draw the outside box first • Place large elements first • Add details and emphasis last
  • 36. @thinknow Draw this screen working from the outside in
  • 37. @thinknow Text Text
  • 38. @thinknow Basic vocabulary: How will you quickly draw these elements?
  • 39. @thinknow Headings (big, medium, small) Body copy Images Buttons Links Sketch these elements
  • 40. @thinknow 12 column grid http://twitter.github.io/bootstrap/examples/hero.html http://alefeuvre.github.io/foundation-grid-displayer/
  • 41. @thinknow Containers http://twitter.github.io/bootstrap/examples/hero.html http://alefeuvre.github.io/foundation-grid-displayer/
  • 42. @thinknow Containers (responsive)
  • 43. @thinknow Tip #2: Plan your sketch • Aspect ratio • Grid / guides • Containers • Images / icons • Text blocks
  • 44. @thinknow Planning exercise: What’s the structure here? How much detail do you need to show?
  • 45. @thinknow Now you’re warmed up Let’s do a few more...
  • 46. @thinknow Extended vocabulary: How will you quickly draw these elements?
  • 47. @thinknow Radio buttons Scrollbar On/off toggle Progress bar Sketch these elements Text input & label Combo box Checkboxes
  • 48. @thinknow Let’s practice form elements.
  • 49. @thinknow OK, now it’s time to put it all together.
  • 50. @thinknow Here’s the last one Focus on the structure
  • 51. @thinknow Advanced vocabulary: How will you quickly draw these elements?
  • 52. @thinknow Sketch these elements Accordion Carousel Media player Edit controls
  • 53. @thinknow Congratulations! Keep sketching and you’ll continue to improve
  • 54. @thinknow Show and tell Here are some ways I use sketches
  • 55. @thinknow Talking sketch
  • 56. @thinknow Show and discuss alternatives @thinknow
  • 57. @thinknow Designer / developer pairing @thinknow
  • 58. @thinknow Wireframe walkthrough Text @thinknow
  • 59. @thinknow
  • 60. @thinknow #uisketch Share your new skillz!!
  • 61. @thinknow the pencil fear Don’t

×