Sketch. Some of you may have never heard of it, some of you may know it like the back of your hand. This post is here to tell you what Sketch is all about, starting with what it actually is, and how it can be the new addition to your UI/UX design toolbox, and will end up replacing Photoshop for most of your needs.
In Sketch’s brief existence, I have only just begun using the incredible software. It’s won a few awards, including the Apple Design Award (2012), Best of 2012 (Apple Mac App Store), and more.
But what the hell is it? It’s a hammer.
A hammer? Yeah. A hammer. When you’re doing home improvement projects like hanging pictures, you wouldn’t use a shovel to drive the nails into the wall, right? It works, but it’d be rather silly. When it comes to UI/UX design, Photoshop is the shovel in this scenario and Sketch is the hammer.
Sketch has adopted the fundamentals of Balsamiq Mockups and Omnigraffle, and combines them with many features from Photoshop and Illustrator, creating a beautifully cohesive UI/UX design tool.
It’s the new addition to your design toolbox.
Now, I haven’t abandoned Photoshop completely; I’ve done so just for the layout design. I still use PS for creating fancy, static graphics to use in my site as well as app designs such as hero images, blending imagery together, modifying photo attributes, etc.
Sketch makes creating layouts a breeze with better shape tools, property palettes, a built-in grid editor, symbols, art boards, a feature called “Mirror”, application plugins, and the list goes on. UI/UX designers have basically hacked Photoshop to work the way we need it to, as it was originally created for photo editing and as Illustrator’s partner in crime for graphic design.
It handles out of the box:
- Vectors in a pixel-based environment
- Responsive web design
- Native text rendering, so you’ll know exactly what the type will look like before it’s built
- Unlimited shape fills, borders, shadows, inner shadows, and Gaussian blur
- Layer styles called, “Shared Styles”
- Numbers-based design
As you can see, some of these features exist within Photoshop. However for our purposes, features are added via Adobe Extensions to make the experience better within PS, thus labeling it a hacked tool. The way Sketch lays out all the tool palettes makes a lot of sense too.
Sketch is a BIG time saver.
In our process, we design mockups for the team to review internally before sending them off for clients to review. Then the client gets back to us with their feedback, and we make the changes before the project is built. When there are global changes that oftentimes don’t impact the overall look and feel of the design, we make minor changes like:
- Navigation updates
- Changes to the footer
- Consistent sidebars
- Other repeated elements
In cases like this, it’s necessary to go through every single designed PSD and replace them in one document then transfer them to the rest of the PSDs. Photoshop technically has symbols called Smart Objects, but sometimes these can be more cumbersome and slower to manage, and only apply global changes within one document, and not throughout several.
Opening a doc, making changes, opening a new doc, waiting for PS to load text and super high-res imagery, making those changes to the newly opened doc, saving, closing that doc, and opening a new doc… This explanation is exhausting, and so is the process. Sketch’s symbols functionality eliminates this issue, helps keep the designs more consistent, and leaves more time for more important edits.
It speeds up the alignment process.
Aligning elements to artboards is amazing too, just by pressing ALT + clicking the left, center, or right aligned buttons in the property inspector just like Illustrator. In Photoshop, I’d have to select the background layer (this method working best if it’s the original locked bg layer) and the layer I want aligned, then aligning. Sometimes PS is hokey about it and misaligns things because of the order of the layers.
It plays nicely with other software.
When using sites like Invision, Sketch is awesome too. With Photoshop, you’d have to import huge PSDs to Invision (which would take a lot of time) or JPGs (which would take time to export from each individual PSD doc). With Sketch and Invision, you can design all your pages in one Sketch doc, import that doc to Invision, and Invision will automatically separate all your artboards into individual pages. From there, you can start prototyping your website or app designs. And if you’ve already started prototyping a site and have kept your filenames the same, re-importing will replace what’s already stored in Invision (keeping any progress you’ve already made).
There is a lot of plugin support and resources.
Not only are you able to download and install a whole bunch of plugins, Bohemian Coding naturally has documentation on writing your own plugins for the application. So if you know CocoaScript (“when you write in CocoaScript, you are really writing JavaScript” –CocoaScript’s README), then you can write a plugin for Sketch tailoring it exactly to your needs.
Also with sites like Sketch App Sources, you can find plugins to fill your heart’s content. I’ve downloaded several already that help me save time:
- Content Generator which creates dummy:
- GEO location data
- Persona details (email, phone, female names, male names)
- Photos (music artist, or nature/urban content from sites like Unsplash)
- Tons of Lorem Ipsum stuff
- Day Player – more Lipsum stuff
- Renameit – extensive layer renaming functionality
- Send to Slack – can instantly share artboards to Slack
- Sketch Dynamic Button – can add “padding” around text just like CSS would by putting CSS shorthand in the layer name
- Sketch Generator – generates images on the fly for website and mobile app development
- Sketch Plugin Scripts
- Blend steps (adds Illustrator’s Blend functionality)
- Duplicate as pattern
- Fill artboard with shape
- Simple pattern
- Sketch Subtle Patterns – dynamically integrates Subtle Patterns patterns
The bottom line.
Sketch is a lot cheaper to use. It’s $99 for a single user license with updates, and that’s essentially to own your copy of the software, opposed to Adobe’s per month basis. At that point you’re renting Adobe’s software, which doesn’t really feel the same.
Sketch 3.2 (the latest release) is still a bit buggy at times, but given that it still helps tremendously with design workflow it’s totally worth the switch.
