Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Quick, Useful, 

UI Sketches
February 17, 2016
Grand Rapids Art Museum
How to draw
@thinknow
@hellomighty @LadiesThatUXGR
Lane Halley
lane@lanehalley.com
@thinknow
www.flickr.com/photos/oskay/253010287/
@thinknow
• Why sketch?
• Types of sketches
• Sketching materials
• Grids & functional groupings
• Your own personal UI sh...
@thinknow
“A sketch is a rapidly
executed freehand
drawing that is not
usually intended as a
finished work.”
http://en.wik...
@thinknow
• Explore ideas quickly
• Record what you see
• Communicate with others
Why sketch?
@thinknow1more2time3.wordpress.com
Preproduction sketches

for Balto’s Dream 

by Hans Bacher
@thinknowhttp://disney.wikia.com/wiki/Rocket_to_the_Moon
@thinknow@thinknow
@thinknow
Sketching is a core
design skill.
@thinknow
Types of sketches
• Visual recording
• Sketchnotes
• Storyboards
• Concept sketches
• UI sketches
@thinknow
Visual Recording
@thinknowSketchnote by @deanmeistr
http://leanuxnyc.co/nyc/a-visual-recording-of-leanuxnyc/
@thinknowSketch by @iamctodd
https://twitter.com/iamctodd/status/322818463712284672/photo/1
Sketchnote
@thinknowhttp://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg
Storyboard
@thinknow
@thinknow
Concept sketches
@thinknow
@thinknowSketch by @rayraydel
https://www.flickr.com/photos/rayraydel/3868485532/
UI sketch
@thinknow
UI sketching is a core
skill for product teams.
@thinknow
UI sketches help teams
• Explore options quickly
• Externalize thinking
• Share understanding
• Feel ownership
@thinknow
“The way to have
product team members
trust each other and
get along is to have
them sketch together.”
Joshua Po...
@thinknow
Sketching helps
everyone be 

on the same page.
@thinknow
Everyone can draw

Be fearless!
@thinknow
Personal UI shorthand
• Representative (not literal)
• Fast
• Versatile
• Structure, hierarchy, relationships
• ...
@thinknow
Reverse wireframing
• Quickly sketch existing UIs
• See and understand UIs better
• Separate sketching from desi...
@thinknow
Semantic sketching
• Headings
• Body copy
• Images
• Controls
• Form elements
@thinknowsketch by @rohdesign
https://www.flickr.com/photos/rohdesign/3307874546/
@thinknowsketch by @rohdesign
https://www.flickr.com/photos/rohdesign/3307874546/
Headings
Body copy
Button
Image
@thinknowSketch by @chrisrisdon
http://www.flickr.com/photos/32783264@N08/4587209002
Another shorthand sketch
@thinknow
Sketching materials
The right tools for the job
@thinknow
Drawing Tools
@thinknow
The right notebook?
@thinknow
@thinknow
The pencil has great
dynamic range. Your
lines can be faint or
strong, thick or thin.
@thinknow
http://blog.alesandrini.com/wp-content/uploads/2011/10/pencils.jpg

http://learntoart.files.wordpress.com/2009/0...
@thinknow
Get your pencils ready!
Let’s draw some shapes.
@thinknow
• Draw a page of squares
• Draw a page of circles
• Draw sets of parallel lines
• Shade from light to dark
Warm ...
@thinknow
You can draw almost
any UI using basic
shapes: circle, triangle,
rectangle, line.
@thinknow
Draw the next screen
using only the four
basic shapes shown.
@thinknow
@thinknow
Tip #1: Work “outside in”
• Draw the outside box shape first
• Place large elements
• Add details and emphasis l...
@thinknow
Draw the next screen
working from the
outside in.
@thinknow
Text
Text
@thinknow
Basic vocabulary:
Starting your own personal UI shorthand
@thinknow
Headings (big, medium, small)
Body copy
Images
Buttons
Links
Practice these elements
@thinknow
Draw this screen 

using your personal 

UI shorthand.
@thinknow
Grids and Containers
Thinking about layout and relationships
@thinknow
12 column grid
http://twitter.github.io/bootstrap/examples/hero.html
http://alefeuvre.github.io/foundation-grid-...
@thinknow
Containers
http://twitter.github.io/bootstrap/examples/hero.html
http://alefeuvre.github.io/foundation-grid-disp...
@thinknow
Responsive containers
@thinknow
Tip #2: Plan your sketch
• Outside shape
• Grid / guides
• Containers
• Images / icons
• Text blocks
@thinknow
Let’s do this one
together:
What’s the structure here? 

How much detail do you need to show?
@thinknow
OK, now it’s your turn.
@thinknow
Extended vocabulary:
Adding to your personal UI shorthand
@thinknow
Sketch these elements
Text input & label
Dropdown list
Checkboxes
Radio buttons
@thinknow
Now you can
sketch forms.
Let’s practice!
@thinknow
OK, now it’s time to put
it all together.
@thinknow
Here’s another one.
Focus on the structure.
@thinknow
Advanced vocabulary:
More elements for your UI shorthand
@thinknow
Sketch these elements
Tabs
Image carousel
Date picker
On/off toggle
Scrollbar
Progress bar
Media player controls...
@thinknow
Keep sketching
and you’ll 

continue to
improve
Congratulations!
the
pencil
fear
Don’t
@thinknow
Show & tell
Some examples of sketches

from my projects
@thinknow
Talking sketch
@thinknow
Alternative layout thumbnails
@thinknow
@thinknow
Designer / developer pairing
@thinknow
@thinknow
Sketching before wireframing
@thinknow
Page elements
User context & device

considerations
Full page
Partial pag...
@thinknow
Wireframe walkthrough
@thinknow
@thinknow
@thinknow
#uisketch
Share your new skillz!!
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
×

How to Draw Quick, Useful, UI Sketches

200 views

Published on

Presented at the Grand Rapids Art Museum February 17, 2016

This workshop is appropriate for designers, product managers, Web developers, software engineers and 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!
This class will cover:
• Types of sketches
• Why sketch?
• Sketching materials
• Grids, containers and functional groupings
• Developing your personal UI shorthand
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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

How to Draw Quick, Useful, UI Sketches

  1. 1. Quick, Useful, 
 UI Sketches February 17, 2016 Grand Rapids Art Museum How to draw
  2. 2. @thinknow @hellomighty @LadiesThatUXGR
  3. 3. Lane Halley lane@lanehalley.com @thinknow
  4. 4. www.flickr.com/photos/oskay/253010287/
  5. 5. @thinknow • Why sketch? • Types of sketches • Sketching materials • Grids & functional groupings • Your own personal UI shorthand Today you will learn
  6. 6. @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
  7. 7. @thinknow • Explore ideas quickly • Record what you see • Communicate with others Why sketch?
  8. 8. @thinknow1more2time3.wordpress.com Preproduction sketches
 for Balto’s Dream 
 by Hans Bacher
  9. 9. @thinknowhttp://disney.wikia.com/wiki/Rocket_to_the_Moon
  10. 10. @thinknow@thinknow
  11. 11. @thinknow Sketching is a core design skill.
  12. 12. @thinknow Types of sketches • Visual recording • Sketchnotes • Storyboards • Concept sketches • UI sketches
  13. 13. @thinknow Visual Recording @thinknowSketchnote by @deanmeistr http://leanuxnyc.co/nyc/a-visual-recording-of-leanuxnyc/
  14. 14. @thinknowSketch by @iamctodd https://twitter.com/iamctodd/status/322818463712284672/photo/1 Sketchnote
  15. 15. @thinknowhttp://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Storyboard @thinknow
  16. 16. @thinknow Concept sketches @thinknow
  17. 17. @thinknowSketch by @rayraydel https://www.flickr.com/photos/rayraydel/3868485532/ UI sketch
  18. 18. @thinknow UI sketching is a core skill for product teams.
  19. 19. @thinknow UI sketches help teams • Explore options quickly • Externalize thinking • Share understanding • Feel ownership
  20. 20. @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/
  21. 21. @thinknow Sketching helps everyone be 
 on the same page.
  22. 22. @thinknow Everyone can draw
 Be fearless!
  23. 23. @thinknow Personal UI shorthand • Representative (not literal) • Fast • Versatile • Structure, hierarchy, relationships • NOT visual design
  24. 24. @thinknow Reverse wireframing • Quickly sketch existing UIs • See and understand UIs better • Separate sketching from design
  25. 25. @thinknow Semantic sketching • Headings • Body copy • Images • Controls • Form elements
  26. 26. @thinknowsketch by @rohdesign https://www.flickr.com/photos/rohdesign/3307874546/
  27. 27. @thinknowsketch by @rohdesign https://www.flickr.com/photos/rohdesign/3307874546/ Headings Body copy Button Image
  28. 28. @thinknowSketch by @chrisrisdon http://www.flickr.com/photos/32783264@N08/4587209002 Another shorthand sketch
  29. 29. @thinknow Sketching materials The right tools for the job
  30. 30. @thinknow Drawing Tools
  31. 31. @thinknow The right notebook? @thinknow
  32. 32. @thinknow The pencil has great dynamic range. Your lines can be faint or strong, thick or thin.
  33. 33. @thinknow http://blog.alesandrini.com/wp-content/uploads/2011/10/pencils.jpg
 http://learntoart.files.wordpress.com/2009/06/pencil-hardness-scale.jpg
  34. 34. @thinknow Get your pencils ready! Let’s draw some shapes.
  35. 35. @thinknow • Draw a page of squares • Draw a page of circles • Draw sets of parallel lines • Shade from light to dark Warm up exercises
  36. 36. @thinknow You can draw almost any UI using basic shapes: circle, triangle, rectangle, line.
  37. 37. @thinknow Draw the next screen using only the four basic shapes shown.
  38. 38. @thinknow
  39. 39. @thinknow Tip #1: Work “outside in” • Draw the outside box shape first • Place large elements • Add details and emphasis last
  40. 40. @thinknow Draw the next screen working from the outside in.
  41. 41. @thinknow Text Text
  42. 42. @thinknow Basic vocabulary: Starting your own personal UI shorthand
  43. 43. @thinknow Headings (big, medium, small) Body copy Images Buttons Links Practice these elements
  44. 44. @thinknow Draw this screen 
 using your personal 
 UI shorthand.
  45. 45. @thinknow Grids and Containers Thinking about layout and relationships
  46. 46. @thinknow 12 column grid http://twitter.github.io/bootstrap/examples/hero.html http://alefeuvre.github.io/foundation-grid-displayer/
  47. 47. @thinknow Containers http://twitter.github.io/bootstrap/examples/hero.html http://alefeuvre.github.io/foundation-grid-displayer/
  48. 48. @thinknow Responsive containers
  49. 49. @thinknow Tip #2: Plan your sketch • Outside shape • Grid / guides • Containers • Images / icons • Text blocks
  50. 50. @thinknow Let’s do this one together: What’s the structure here? 
 How much detail do you need to show?
  51. 51. @thinknow OK, now it’s your turn.
  52. 52. @thinknow Extended vocabulary: Adding to your personal UI shorthand
  53. 53. @thinknow Sketch these elements Text input & label Dropdown list Checkboxes Radio buttons
  54. 54. @thinknow Now you can sketch forms. Let’s practice!
  55. 55. @thinknow OK, now it’s time to put it all together.
  56. 56. @thinknow Here’s another one. Focus on the structure.
  57. 57. @thinknow Advanced vocabulary: More elements for your UI shorthand
  58. 58. @thinknow Sketch these elements Tabs Image carousel Date picker On/off toggle Scrollbar Progress bar Media player controls Social media icons
  59. 59. @thinknow Keep sketching and you’ll 
 continue to improve Congratulations! the pencil fear Don’t
  60. 60. @thinknow Show & tell Some examples of sketches
 from my projects
  61. 61. @thinknow Talking sketch
  62. 62. @thinknow Alternative layout thumbnails @thinknow
  63. 63. @thinknow Designer / developer pairing @thinknow
  64. 64. @thinknow Sketching before wireframing @thinknow Page elements User context & device
 considerations Full page Partial page Sequence of activities
  65. 65. @thinknow Wireframe walkthrough @thinknow
  66. 66. @thinknow
  67. 67. @thinknow #uisketch Share your new skillz!!

×