Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rapid Prototyping & Theme Design with Sketch

F8176f011f107f24e070427747c04907?s=47 Ryan King
September 26, 2015

Rapid Prototyping & Theme Design with Sketch

Sketch is a Mac design app for vector and web graphics. Learn how to leverage this powerful creative tool to quickly prototype designs, wireframes, and theme layouts. Share UI/UX design tips and discover fun Sketch to WordPress workflows.

F8176f011f107f24e070427747c04907?s=128

Ryan King

September 26, 2015
Tweet

More Decks by Ryan King

Other Decks in Design

Transcript

  1. Sketch Rapid Prototyping & Theme Design Ryan King kingr@si.edu @ryancanhelpyou

    http://www.slideshare.net/ryancanhelpyou/
  2. What is Sketch? http://bohemiancoding.com/sketch/ Professional digital design for Mac.

  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. 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. Open Source • Sadly, no. • $99 license (free trial

    + offer educational pricing) • Open Source alternatives: https://inkscape.org http://www.gimp.org
  6. What about Adobe? • Powerful and great… but with that,

    bloated and steep learning curve • …and expensive: $120 - $600/ year
  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. Why I use Sketch? Nicely designed, solid app that allows

    me to work faster and happier ;) https://thenetawards.com/ http://bohemiancoding.com/sketch/
  9. 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
  10. Other cool stuff Extras drag out layers (boom. done.) CSS

    styles Printing (great for review and critiques) iOS Mirror…. magical + fun
  11. Built for Mac Integrated Fast, snappy Auto-save & Versions (amazing!)

    iCloud sync
  12. My Design Process Where does Sketch fit in the design

    process? Client Assets + Inspiration Hand Sketches Sketch
  13. My Design Process Where does Sketch fit in the design

    process? Sketch WordPress Theme
  14. Enough talk; let’s explore.

  15. Quick Start Let the magic begin! Demo: File > New

    From Template: iOS App, iOS UI, Material Design (Google), Web Design, Welcome to Sketch
  16. Resources http://bohemiancoding.com/sketch/learn/ (user manual) http://bohemiancoding.com/sketch/community/ http://www.sketchappsources.com http://blog.invisionapp.com/11-tips-for-prototyping-with-sketch/ https://medium.com/@assentorp/10-sketch-tricks-you-need-to- know-as-a-designer-bfba9e7ec137 https://www.facebook.com/groups/sketchformac/

    Shortcuts Cheatsheet: http://www.sketchshortcuts.com
  17. “ Thank you Ryan King kingr@si.edu @ryancanhelpyou To design is

    to communicate clearly by whatever means you can control or master. - Milton Glaser