An intro to Sketch.

1. Sketch
Rapid Prototyping & Theme Design
Ryan King
kingr@si.edu
@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 (educational pricing also)
• 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. Benefits

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. Benefits
Vector
“Vector-based drawing is by far the the best way to design
websites, icons or interfaces.”
- sketch manual

12. Benefits
Space
Infinite canvas + multiple artboards

13. Benefits
Reusable Elements
Objects
Symbols
Text Styles

14. Benefits
Easy Exporting
Multiple formats
Streamlined workflow

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. Other cool stuff
Extras
drag out layers (boom. done.)
CSS styles
Printing (great for review and critiques)
iOS Mirror…. magical + fun

17. Built for Mac
Integrated
Fast, snappy
Auto-save & Versions (amazing!)
iCloud sync

18. Enough talk;
let’s explore.

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. Quick Start
• Let the magic begin!
• Demo: File > New From Template: iOS
App, iOS UI, Material Design (Google),
Web Design, Welcome to Sketch

21. Tools
• Shapes
• Text
• Artboards
• Symbols
• Slices
• iOS Mirror

22. Plugins
• Content Generator
• Swatches
• Integrations: Slack, Git, etc
• Sketch Toolbox

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. 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. “
Thank you
Ryan King
kingr@si.edu
@ryancanhelpyou
To design is to communicate
clearly by whatever means you
can control or master. - Milton Glaser