Slide 1
Slide 1 text
Sketch
Rapid Prototyping & Theme Design
Ryan King
[email protected]
@ryancanhelpyou
http://www.slideshare.net/ryancanhelpyou/
Slide 2
Slide 2 text
What is Sketch?
http://bohemiancoding.com/sketch/
Professional digital design for Mac.
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
Open Source
• Sadly, no.
• $99 license (free trial + offer educational pricing)
• Open Source alternatives:
https://inkscape.org
http://www.gimp.org
Slide 6
Slide 6 text
What about Adobe?
• Powerful and great… but with that, bloated and
steep learning curve
• …and expensive: $120 - $600/ year
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
Why I use Sketch?
Nicely designed, solid app that allows me to
work faster and happier ;)
https://thenetawards.com/
http://bohemiancoding.com/sketch/
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
Other cool stuff
Extras
drag out layers (boom. done.)
CSS styles
Printing (great for review and critiques)
iOS Mirror…. magical + fun
Slide 11
Slide 11 text
Built for Mac
Integrated
Fast, snappy
Auto-save & Versions (amazing!)
iCloud sync
Slide 12
Slide 12 text
My Design Process
Where does Sketch fit in the design process?
Client Assets
+
Inspiration
Hand Sketches
Sketch
Slide 13
Slide 13 text
My Design Process
Where does Sketch fit in the design process?
Sketch
WordPress Theme
Slide 14
Slide 14 text
Enough talk;
let’s explore.
Slide 15
Slide 15 text
Quick Start
Let the magic begin!
Demo: File > New From Template: iOS
App, iOS UI, Material Design (Google),
Web Design, Welcome to Sketch
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
“
Thank you
Ryan King
[email protected]
@ryancanhelpyou
To design is to communicate
clearly by whatever means you
can control or master. - Milton Glaser