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.

Sketch: Rapid Prototyping & Theme Design

704 views

Published on

An intro to Sketch.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Sketch: Rapid Prototyping & Theme Design

  1. 1. Sketch Rapid Prototyping & Theme Design Ryan King kingr@si.edu @ryancanhelpyou
  2. 2. What is Sketch? http://bohemiancoding.com/sketch/ Professional digital design for Mac.
  3. 3. Assumptions • General graphic app concepts and terminology • Basic understanding of how webpages work • While you can use Sketch for other design purposes, this talk is primarily web focused
  4. 4. Presentation • This is just an introduction. • One of the great things about sketch is the community. There are so many high quality resources out there from tutorials, to plugins that enhance functionality, to shared assets and UI/UX libraries to get you started (think stock graphics) • I will get you started, and provide you resources to continue the journey on your own
  5. 5. Open Source • Sadly, no. • $99 license (educational pricing also) • Open Source alternatives: https://inkscape.org http://www.gimp.org
  6. 6. What about Adobe? • Powerful and great… but with that, bloated and steep learning curve • …and expensive: $120 - $600/ year
  7. 7. When to use Sketch? Sketch: Web (vector / flat artwork) Photoshop: photographs, heavy image retouching and manipulation (photo correction) Illustrator: logos, line art / drawing InDesign: print
  8. 8. Why I use Sketch? Nicely designed, solid app that allows me to work faster and happier ;) https://thenetawards.com/ http://bohemiancoding.com/sketch/
  9. 9. Benefits
  10. 10. Benefits Simplicity Easy to use, quick to learn The Inspector panel Very thorough and free online manual: http://bohemiancoding.com/sketch/support/documentation/
  11. 11. Benefits Vector “Vector-based drawing is by far the the best way to design websites, icons or interfaces.” - sketch manual
  12. 12. Benefits Space Infinite canvas + multiple artboards
  13. 13. Benefits Reusable Elements Objects Symbols Text Styles
  14. 14. Benefits Easy Exporting Multiple formats Streamlined workflow
  15. 15. Side note I’m a beginner I picked it up on my own and am still learning… but wanted to share with you my findings and tips I’ve learned along the way
  16. 16. Other cool stuff Extras drag out layers (boom. done.) CSS styles Printing (great for review and critiques) iOS Mirror…. magical + fun
  17. 17. Built for Mac Integrated Fast, snappy Auto-save & Versions (amazing!) iCloud sync
  18. 18. Enough talk; let’s explore.
  19. 19. The Interface • one-window app • toolbar on top • inspector on right (adapts/contextual… displaying only the properties you need for the tool you are currently using) • layers and artboards on left
  20. 20. Quick Start • Let the magic begin! • Demo: File > New From Template: iOS App, iOS UI, Material Design (Google), Web Design, Welcome to Sketch
  21. 21. Tools • Shapes • Text • Artboards • Symbols • Slices • iOS Mirror
  22. 22. Plugins • Content Generator • Swatches • Integrations: Slack, Git, etc • Sketch Toolbox
  23. 23. Export • Demo: drag whole art board • export multiple versions @ once (png, jpg, pdf) • will only give you the necessary options • can even set specific width, etc
  24. 24. Resources http://bohemiancoding.com/sketch/learn/ (user manual) http://bohemiancoding.com/sketch/community/ http://blog.invisionapp.com/11-tips-for-prototyping-with-sketch/ http://www.sketchappsources.com
  25. 25. “ Thank you Ryan King kingr@si.edu @ryancanhelpyou To design is to communicate clearly by whatever means you can control or master. - Milton Glaser

×