Using Sketch in Your WorkflowFrom Idea to Finished Product
Brian Louis Ramirez | UX Designer | @brilouram
What's up?
4 What
4 Why
4 How
posters magazinesdocuments illustrations
What is Sketch
NOT?
Sketch is notPhotoshop!
Badass shortcuts⌘
Vector graphics= Exportability
PLUGINS - community
1 x 99€Independence from Adobe
How to
Use Sketchin Your Workflow
Workflow>>>>>>>>>>
1. Wireframe
2. Prototype
3. Layout & Design
4. Spec & Generate Assets
'r' for rectangle
'b' to toggle borders
'f' to toggle fill
'⌘ + g' for groups
'symbols' for repeating elements
'⌘ + d' to duplicate
'styles' for repeating styles
'⌘ + select' to select layers in groups
'o' for ovals and circles
double-click shapes to edit
⌥ + ⌘ + ↑ to bring layer forward
'⌥ + ⌘ + ↓' to move layer backwards
'⌃ + ⌘ + m' to use as mask
"content generator" plugin
InVisionfor iOS
from $13/mo(free / 1 prototype)
InVision Viewerfor iOSfree
Flintofor Mac
$99
Pixatefor Mac or PC
from $5/mo
Framer Studiofor Mac$99
sketchappsources.com
designcode.io/ios9.com
Sketch Mirrorfor iOS4.99€
4Spec & Generate Assets
"Sketch constraints" plugin
"Sketch constraints" plugin
=============SVMMASVMMARVM=============
Summary1. Use shortcuts, symbols, plugins, templates
2. Pixels are cheap
3. Know the strengths and weaknesses of tools
4. Be open to new things
Sketch is notjust a tool
Sketch isa community – a design culture
Links4 https://medium.com/@erqiudao/how-to-use-only-rectangle-circle-and-line-to-draw-illustration-in-sketch-7d8a58102e46
4 https://articles.sketchtricks.com/sketch-for-print-design-fd165b92cb3a
4 http://landing.adobe.com/en/na/products/creative-cloud/comet/229818-notifyme.html
Thanks!@brilouram