The Power of Sketch
A GUIDE TO PROGRAM ADOPTION
Sketch is a vector based product design tool that allows for in-app prototyping.
Sketch was
Specifically Built for User Interface Design
Compared to Photoshop, Sketch is a vector-based (not raster-based) program built specifically for web and app design (not print/graphic design).
Sketch
Renders are Closer to Final FED Output
Sizing and spacing are much closer to the final front-end code because we can use concrete calculations to create consistency (instead of pixel-pushing).
Sketch was
Light Weight & Super Fast
Compared to Photoshop, Sketch is incredibly fast when loading large files that contain multiple pages, artboards, and graphics.
Sketch is
Easy to Learn
It takes the average NYC BORN Creative team member less than 1 week to learn Sketch and an average of 1 month to become proficient.
Sketch has
Rapid Prototyping
Sketch’s Craft plugin allows you to create, sync & share prototypes with 1 simple click without ever having to leave Sketch!
SHARED STYLES
Creating & Managing Shared Styles & Design Systems
Shared styles in Sketch save the stylistic attributes of a layer and keep every layer connected to the style in case it changes. If you decide at any point to change the style of a layer, one-click will instantly sync the style to every layer sharing it. This feature is especially useful for projects with shared templates.
SYMBOLS
Creating, Managing & Overriding Symbols
In Sketch, you can select any instance of a symbol and swap it out for another on the Inspector.
Moreover, every text layer, symbol, and image within a symbol is considered a variable that can be “overridden” on the Inspector. This means we can design one button, use it as many times as we want, and always be in control of the content for each instance.
This feature is especially useful and *non-destructive* practice when creating different button/icon states as well as managing the content in reusable modules.
PROTOTYPING
In-App Prototyping
You can now prototype for desktop and mobile directly within Sketch and sync the finished result to InVision by using Craft (sketch plugin).
It’s one click to sync to InVision and create your fully interactive prototype.
This feature is especially useful for rapid prototyping and team/client collaboration.
RESPOSIVE RESIZING
Group Resizing
In Sketch, the contents of a group or symbol can be assigned to behave more “responsively” by preserving margins or fixing dimensions in place.
When combined with symbol overrides, this adds a staggering amount of flexibility to a symbol.
This feature is especially useful, and *non-destructive* practice when creating image grids.
In the past
our toolset looked like this…
But now it looks like this…
Now the UX, Design & FED teams can use the same exact programs to create, share and manage wireframes, designs, prototypes and assets across multiple team members & departments (locally/globally). Additionally, Art Directors are able to create design systems and distribute shared styles in a quick, efficient & non-destructive way (locally/globally).
Finally, the proof is in the pudding!
