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
January 24, 2015
@girlDevelopItLA
@thinknowText
Event sponsors
@BuzzFeed @SendGrid
Lane Halley
lane@lanehalley.com
@thinknow
www.flickr.com/photos/oskay/253010287/
@thinknow
• Why sketch?
• Types of sketches
• Sketching materials
• Grids & functional groupings
• Your personal UI shorth...
@thinknow
“A sketch is a rapidly
executed freehand
drawing that is not
usually intended as a
finished work.”
http://en.wik...
@thinknow
• Record what you see
• Explore ideas quickly
• Demonstrate ideas to others
Why sketch?
@thinknowhttp://disney.wikia.com/wiki/Rocket_to_the_Moon
@thinknow
Sketching is a core
design skill
@thinknow
Many kinds 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
Drawing Tools
@thinknow
Surfaces
• Printer paper
• Grid paper
• Whiteboard
• Notebook(s)
• Sketch sheets
@thinknow
The right notebook?
@thinknow
@thinknowhttp://sneakpeekit.com/
Wireframe browser
Multi-layout Wireframe
iPhone Quick Sketch
iPad Quick Sketch
free downl...
@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
@thinknow
Personal UI shorthand
• Representative (not literal)
• Fast
• Versatile
• Structure, hierarchy, relationships
• ...
@thinknowSketch by @chrisrisdon
http://www.flickr.com/photos/32783264@N08/4587209002
Another shorthand sketch
@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/06...
@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
shape primitives: circle,
triangle, rectangle, line
@thinknow
Draw this control panel
using only the four
basic shapes shown
@thinknow
@thinknow
Tip #1: Work “outside in”
• Draw the outside box first
• Place large elements first
• Add details and emphasis l...
@thinknow
Draw this screen
working from the
outside in
@thinknow
Text
Text
@thinknow
Basic vocabulary:
How will you quickly draw these elements?
@thinknow
Headings (big, medium, small)
Body copy
Images
Buttons
Links
Sketch these elements
@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
Containers (responsive)
@thinknow
Tip #2: Plan your sketch
• Aspect ratio
• Grid / guides
• Containers
• Images / icons
• Text blocks
@thinknow
Planning exercise:
What’s the structure here?
How much detail do you need to show?
@thinknow
Now you’re warmed up
Let’s do a few more...
@thinknow
Extended vocabulary:
How will you quickly draw these elements?
@thinknow
Radio buttons
Scrollbar
On/off toggle
Progress bar
Sketch these elements
Text input & label
Combo box
Checkboxes
@thinknow
Let’s practice
form elements.
@thinknow
OK, now it’s time to put
it all together.
@thinknow
Here’s the last one
Focus on the structure
@thinknow
Advanced vocabulary:
How will you quickly draw these elements?
@thinknow
Sketch these elements
• Accordion
• Carousel
• Media player
• Edit 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 page...
@thinknow
Wireframe walkthrough
@thinknow
@thinknow
@thinknow
#uisketch
Share your new skillz!!
@thinknow
Please fill out the class evaluation form:
goo.gl/xr1QJg
Quick, Useful UI Sketches GDI
Quick, Useful UI Sketches GDI
Quick, Useful UI Sketches GDI
Quick, Useful UI Sketches GDI
Quick, Useful UI Sketches GDI
Quick, Useful UI Sketches GDI
Quick, Useful UI Sketches GDI
Quick, Useful UI Sketches GDI
Quick, Useful UI Sketches GDI
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Quick, Useful UI Sketches
Next
Upcoming SlideShare
Quick, Useful UI Sketches
Next
Download to read offline and view in fullscreen.

Quick, Useful UI Sketches GDI

Download to read offline

Presented at Girl Develop It, Los Angeles
January 24, 2015

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Quick, Useful UI Sketches GDI

  1. 1. Quick, Useful UI Sketches January 24, 2015 @girlDevelopItLA
  2. 2. @thinknowText Event sponsors @BuzzFeed @SendGrid
  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 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 • Record what you see • Explore ideas quickly • Demonstrate ideas to others Why sketch?
  8. 8. @thinknowhttp://disney.wikia.com/wiki/Rocket_to_the_Moon
  9. 9. @thinknow Sketching is a core design skill
  10. 10. @thinknow Many kinds of sketches • Visual recording • Sketchnotes • Storyboards • Concept sketches • UI sketches
  11. 11. @thinknow Visual Recording @thinknowSketchnote by @deanmeistr http://leanuxnyc.co/nyc/a-visual-recording-of-leanuxnyc/
  12. 12. @thinknowSketch by @iamctodd https://twitter.com/iamctodd/status/322818463712284672/photo/1 Sketchnote
  13. 13. @thinknowhttp://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Storyboard @thinknow
  14. 14. @thinknow Concept sketches @thinknow
  15. 15. @thinknowSketch by @rayraydel https://www.flickr.com/photos/rayraydel/3868485532/ UI sketch
  16. 16. @thinknow UI sketching is a core skill for product teams
  17. 17. @thinknow UI sketches help teams • Explore options quickly • Externalize thinking • Share understanding • Feel ownership
  18. 18. @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/
  19. 19. @thinknow Sketching helps everyone be on the same page
  20. 20. @thinknow Everyone can draw Be fearless!
  21. 21. @thinknow Drawing Tools
  22. 22. @thinknow Surfaces • Printer paper • Grid paper • Whiteboard • Notebook(s) • Sketch sheets
  23. 23. @thinknow The right notebook? @thinknow
  24. 24. @thinknowhttp://sneakpeekit.com/ Wireframe browser Multi-layout Wireframe iPhone Quick Sketch iPad Quick Sketch free downloadable sketch sheets
  25. 25. @thinknow Reverse wireframing • Quickly sketch existing UIs • See and understand UIs better • Separate sketching from design
  26. 26. @thinknow Semantic sketching • Headings • Body copy • Images • Controls • Form elements
  27. 27. @thinknowsketch by @rohdesign https://www.flickr.com/photos/rohdesign/3307874546/
  28. 28. @thinknowsketch by @rohdesign https://www.flickr.com/photos/rohdesign/3307874546/ Headings Body copy Button Image
  29. 29. @thinknow Personal UI shorthand • Representative (not literal) • Fast • Versatile • Structure, hierarchy, relationships • NOT visual design
  30. 30. @thinknowSketch by @chrisrisdon http://www.flickr.com/photos/32783264@N08/4587209002 Another shorthand sketch
  31. 31. @thinknow The pencil has great dynamic range. Your lines can be faint or strong, thick or thin
  32. 32. @thinknow http://blog.alesandrini.com/wp-content/uploads/2011/10/pencils.jpg http://learntoart.files.wordpress.com/2009/06/pencil-hardness-scale.jpg
  33. 33. @thinknow Get your pencils ready! Let’s draw some shapes
  34. 34. @thinknow • Draw a page of squares • Draw a page of circles • Draw sets of parallel lines • Shade from light to dark Warm up exercises
  35. 35. @thinknow You can draw almost any UI using basic shape primitives: circle, triangle, rectangle, line
  36. 36. @thinknow Draw this control panel using only the four basic shapes shown
  37. 37. @thinknow
  38. 38. @thinknow Tip #1: Work “outside in” • Draw the outside box first • Place large elements first • Add details and emphasis last
  39. 39. @thinknow Draw this screen working from the outside in
  40. 40. @thinknow Text Text
  41. 41. @thinknow Basic vocabulary: How will you quickly draw these elements?
  42. 42. @thinknow Headings (big, medium, small) Body copy Images Buttons Links Sketch these elements
  43. 43. @thinknow 12 column grid http://twitter.github.io/bootstrap/examples/hero.html http://alefeuvre.github.io/foundation-grid-displayer/
  44. 44. @thinknow Containers http://twitter.github.io/bootstrap/examples/hero.html http://alefeuvre.github.io/foundation-grid-displayer/
  45. 45. @thinknow Containers (responsive)
  46. 46. @thinknow Tip #2: Plan your sketch • Aspect ratio • Grid / guides • Containers • Images / icons • Text blocks
  47. 47. @thinknow Planning exercise: What’s the structure here? How much detail do you need to show?
  48. 48. @thinknow Now you’re warmed up Let’s do a few more...
  49. 49. @thinknow Extended vocabulary: How will you quickly draw these elements?
  50. 50. @thinknow Radio buttons Scrollbar On/off toggle Progress bar Sketch these elements Text input & label Combo box Checkboxes
  51. 51. @thinknow Let’s practice form elements.
  52. 52. @thinknow OK, now it’s time to put it all together.
  53. 53. @thinknow Here’s the last one Focus on the structure
  54. 54. @thinknow Advanced vocabulary: How will you quickly draw these elements?
  55. 55. @thinknow Sketch these elements • Accordion • Carousel • Media player • Edit controls
  56. 56. @thinknow Keep sketching and you’ll continue to improve Congratulations! the pencil fear Don’t
  57. 57. @thinknow Show & tell Some examples of sketches from my projects
  58. 58. @thinknow Talking sketch
  59. 59. @thinknow Alternative layout thumbnails @thinknow
  60. 60. @thinknow Designer / developer pairing @thinknow
  61. 61. @thinknow Sketching before wireframing @thinknow Page elements User context & device considerations Full page Partial page Sequence of activities
  62. 62. @thinknow Wireframe walkthrough @thinknow
  63. 63. @thinknow
  64. 64. @thinknow #uisketch Share your new skillz!!
  65. 65. @thinknow Please fill out the class evaluation form: goo.gl/xr1QJg

Presented at Girl Develop It, Los Angeles January 24, 2015

Views

Total views

1,858

On Slideshare

0

From embeds

0

Number of embeds

1,103

Actions

Downloads

12

Shares

0

Comments

0

Likes

0

×