Quick thoughts on Sketch for RWD
There are plenty of great reviews on Sketch as the future of UI design — or at very least, a great alternative to using Photoshop. This is not one of them. Instead, I wanted to add some quick thoughts to a recent review penned by Ashley Bennett for Smashing Magazine. (If you haven’t read it yet, I recommend it.) I’d like to add a few points to her piece, if I may.
I first played with Sketch 2 about a year ago and found it intriguing, but lacking in some key areas to make it a viable option for my work. Now that Sketch 3 has been out for some time, I decided to give it another try and my experience, so far, has been quite positive and congruent with Ashley’s observations. Sketch 3 is truly a step in the right direction for RWD and its focused feature-set is a nice break from Photoshop’s endless menu panels and tools. There are, however, a few things that would make it even better:
Sketch’s artboards and multi-page structure make it great for quickly verifying the integrity of your design from one layout or screen to the next. Photoshop doesn’t come close to anything like this. Illustrator does a little better, but still falls short. The big drawback for Sketch, however, is that it doesn’t support moving pages between documents (yet). This is not a big deal (and perhaps even preferable) when you’re a solo designer, but when you’re working on a large project with a team of designers, being able to move and share individual pages between designers is a great way to share the load without creating duplicate documents and possible confusion (e.g. “which document has the correct design for the about section again?”).
Symbols vs. Smart Objects
Symbols are a much-anticipated and welcome addition to Sketch 3. The implementation is great, but there’s a few key areas where Photoshop’s Smart Objects outsmart Sketch.
First and foremost, being able to resize a symbol without it affecting every instance of that symbol is an unfortunate “feature.” Currently, you need two separate symbols of the same logo if its size were smaller on a mobile screen and larger on a desktop screen.
Secondly, inserting an image into Sketch effectively embeds it to the document rather than linking to it. This means that if you insert an image (raster or vector), and this image changes outside of Sketch (e.g. a shirt color changes, or a logo swaps a ™ for a ®), you would need to re-insert that image to reflect the new changes.
(I recognize that Photoshop just recently added the ability to place linked images into a document, but it’s a welcome addition that I hate to lose.)
Importing EPS vs. AI
Drag and dropping a vector EPS file into Sketch will import every path into a separate layer and gather all layers into a group. This is surely desireable in many instances, but could prove problematic if you accidentally move one of those layers without noticing. Dragging an AI file, on the other hand, keeps the entire file as a single (mostly un-editable) layer but is not “linked” to the original file.
[Edit] After additional testing, it turns out that dragging an AI file into Sketch flattens it into a bitmap, which defeats the whole purpose. So if you’re going to export the file as SVG, be sure you’re using EPS source files.
This one’s more of a wishlist item. I find Sketch’s color palette to be a bit…basic. I appreciate being able to set global colors and document colors, but I would also like the ability to further categorize the colors (e.g. primary, secondary, neutral, etc.). Additionally, being able to import an ASE file would be a huge timesaver. Is there a plugin for this?
These behave similarly to Photoshop’s paragraph styles with one notable difference: you cannot format at the character level when text styles are applied. In other words, if you set your “body copy” style and you want to represent an inline-link within it, you would have to unlink the whole text box from the text style, therefore defeating the whole purpose of having the style in the first place. Fortunately, it seems like this may be changed/fixed soon.
Another challenge I find with text styles is that applying multiple text styles to a single text box can be buggy sometimes. (Photoshop suffers from the same ailment though.)
Yes, it’s nice that Sketch has built-in formatting for bullets, but applying this will affect the entire text box. So if you have a text box with an intro paragraph followed by a bullet list, you need to split it up into two separate text boxes. While one could argue that this is more appropriate because it stays true to how code works, it is also a huge pain for text-heavy pages.
— — —
Sketch is truly impressive in its simplicity. The fact that I was recently able to design 40+ layouts in a week as a first-time user with minimal setbacks speaks volumes about the software. I don’t see it as a replacement to Photoshop or Illustrator in our daily workflow (at least not yet), but I definitely see it as a new, capable and exciting tool to add to Perspective’s toolbelt. I’m excited to see how the folks at Bohemian Coding continue to improve upon it. And, if Adobe isn’t paying attention, they really should be.