• Gefällt mir
  • Speichern
Sketching for Design
Nächste SlideShare
Wird geladen in ...5
×

Sketching for Design

  • 14,883 Views
Hochgeladen am

A presentation I gave to the design team at Viget Labs on June 9, 2009

A presentation I gave to the design team at Viget Labs on June 9, 2009

Mehr in: Design , Technologie , Business
  • Full Name Full Name Comment goes here.
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
  • Great deck. Thanks for sharing.
    A very good introduction to sketching
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
  • Hey, great deck. Is there any way you can share a downloadable version?
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
  • thanks jackson, could you please share for a offline review to my mail id kishoratu@gmail.com
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
  • Mr. Jackson,

    I'm a graphic design instructor. I've been trying to convince my students that sketching is the best way to develop their concepts. This is the best presentation that I've come across that does that. Is there any way I can get this actual presentation in powerpoint format, so I can show to my class? If not, I understand. If so, my email address is michael.lewis@tstc.edu. Thanks in advance for considering my request.
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
  • Informative content & a neat, clean presentation!
    Excellent job!

    (I know I’ll be referring to this in the future)
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
Keine Downloads

Views

Gesamtviews
14,883
Bei Slideshare
0
Aus Einbettungen
0
Anzahl an Einbettungen
16

Aktionen

Geteilt
Downloads
0
Kommentare
7
Gefällt mir
128

Einbettungen 0

No embeds

Inhalte melden

Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

Wählen Sie Ihren Grund, warum Sie diese Präsentation als unangemessen melden.

Löschen
    No notes for slide

Transcript

  • 1. rface design F or inte ^ Sketching 101 by jack son Fox june 9, 2009
  • 2. Sketching is not the same as drawing
  • 3. Drawing
  • 4. Sketching soxiam @ flickr
  • 5. How To Sketch
  • 6. Basic Shapes Circles Rectangles Arrows Triangles Squiggles
  • 7. Techniques • Line Thickness • Depth • Size • Notation • Shading • Selective Detail • Isolation
  • 8. Give emphasis to parts of the design by increasing the weight of the lines you’re drawing Line Thickness
  • 9. Size can also be used to draw aention to parts of your sketch Size
  • 10. Sometimes you want to de-emphasize part of your sketch — shading an area can draw aention away from it Shading
  • 11. Filling in details only for the important bits saves time and shows what’s important Selective Detail
  • 12. You can take selective detail even further, and only sketch in certain areas, leaving the rest prey fuzzy Isolation
  • 13. Adding just a bit of depth and perspective helps make UI bits in your sketches look “clickable” Depth
  • 14. Don’t be scared to annotate the crap out of your sketches to help explain what’s going on Notes
  • 15. Sketching Interfaces • Drawing buons • Showing states • Headings & text
  • 16. Drawing Buttons The secret to good buttons is thickening the right and bottom lines on the the rectangle to give the button some depth. Feel free to go wild with rounded borders and shading, but an extra two lines are all you really need.
  • 17. Showing States Storyboards are a handy way to show the progression of states for an element. To keep sketches clean, you can sketch out these alternate states on a separate page (sketch templates like the one above are handy).
  • 18. Headings and Text The only real difference between headings and body text is line weight. As always, the key is to put in only as much detail as you need, and most of the time, that means you don’t really need to show the actual text on the page. Some squiggles will do.
  • 19. What To Sketch
  • 20. Sketching 201
  • 21. Exploratory Sketching ugleah @ slideshare The informality of sketching makes it a great medium for exploring alternative design ideas. There are a lot of ways to generate new ideas: inspiration libraries, word association, conceptual models, etc.
  • 22. Sketchboards ssumers1 @ flickr Sketchboards are an iterative & interactive approach to exploring design problems. Design alternatives are quickly sketched out and placed on the board, organized, then critiqued by participants. Kind of a collaborative storyboard combined with a design studio.
  • 23. Sketching Components ryan singer @ 37s Start your design by sketching out the individual bits of the interface the user will need in order to complete their task. Focus on designing each one separately, then arrange them into a final cohesive design.
  • 24. Sketching Tools
  • 25. Superfine & Medium Tip Ultra Fine Sharpie Pi Markers Dorky pen holder Brush Tip Warm Gray Pi Markers Pen & Pencil The Basics
  • 26. Sketch Templates From Adaptive Path, includes 6-up and 1-up sketch templates Markers • Pentel Sign Pens are good for thick lines, and won’t stink up the joint • Micron pens seem to be built a bit beer than my usual Pi markers Other Handy Tools