Tuesday November 10, 2015

30 Days with Sketch

So. I tried Sketch.

Though Sketch has been around for a while, it didn’t really catch on in my social circle until recently. That’s likely because my circle has used Photoshop for many moons and the motivation to move to some other tool could end up being more of a bother than a benefit. Still, where there’s smoke there’s fire, and I wanted to see what all the fuss was about. So I decided to use it on my last project. Here’s what I found.

The Good

There’s a lot to like about Sketch. It is fast, vector-based, and clearly built for UI work. Like Illustrator, one of its most powerful attributes is artboards. The ability to lay out multiple screens on a single canvas is not a feature that I would have previously describes as “must have”, but after experiencing this as Sketch’s default way of working I’m not sure I could go back to having a file (or layer group) for each screen. Photoshop has recently added artboard support, so Adobe also clearly sees this as a necessary (or at least desirable) component of the modern design process.

Artboards, as nice as they are, is not the feature that seems to really set Sketch apart from other design tools. That distinction belongs to Symbols and Styles. Between these two workhorses, it is really easy to define a UI element in such a way that editing it in one place instantly propagates across all of its instances. I found that this removed the hesitation to get an idea on screen quickly because the effort of going back and adjusting the idea later is greatly reduced. This also allows style or fidelity to build over time. On my project, the client was not sure what kind of style direction to provide. No problem; I worked in grayscale and later adjusted shapes and colors within Symbols and Styles to push final visual design across dozens of elements and artboards. Easy peasy.

Exporting is also pretty great. For any element, Sketch lets you define the resolutions and filetypes of the export. Granted, Sketch makes you set up the parameters for every single element you want to export — which can be pretty tedious — but the setup is still arguably quicker than manually exporting all resolutions and formats, and you get multiple files formats exported all at once.

The Bad

As Khoi Vinh recently pointed out, the text situation is pretty tragic. Don’t even attempt to create a bulleted list inside a text block unless you intend for all the text to be included in the list. And inline indenting? Forget about it. If you are used to the bevy of typographic controls provided in Adobe tools, Sketch will leave you very disappointed. You can’t indent text within in a text block. You can’t insert a list in the middle of a block of text. There are no superscript or subscript type controls. And on and on it goes.

And then there are the crashes. Personally, I never experienced any random crashes. Mine started happening after I had about a 25MB file size. Then the “out of memory” warnings began, caused by Sketch’s failure to play nice with OS X’s autosave feature. It halts all work. The only thing worse than this is losing your work entirely. And sometimes, despite all attempts to release memory, the app crashed anyway. On the bright side, I hear this issue is fixable with a newer release of Sketch.

And The Ugly

Bugs, missing features, and frustrating results are one thing, but dishonest UI is quite another. One of the first things I became excited about upon first exploring Sketch’s feature set were the arrows. They looked so great! And then I tried making an arrow, with appalling results. There is a time and place for UI to display abstract representations of its functions, but this is not one of those places. Those arrow UI icons are liars.

I also had a poor first-run experience due to all of the shapes being tucked up under an “Insert” dropdown menu. Hiding these toolbar icons by default certainly maintains a clean UI, but it makes learning more challenging.

So will I keep using Sketch?

Probably. It’s the speed, styles, and symbols that draw me back in. That’s a potent combination. I have issues with Sketch, but I also have issues with Photoshop. Tools are never perfect, and oh boy is Sketch no exception. But I do feel like it has more going for it than against it, and that’s something.

There is one thing that nags me as I consider moving away from Photoshop that does not really qualify as Good, Bad, or Ugly. It’s the same issue that I have with designing in the browser: that the design tool will constrain the design style. Sketch caters to the design trends du jour — flat & minimalist — and that is fine under many circumstances. But that style is not appropriate for every UI. As bloated and complex as Photoshop may have become, it does facilitate many more stylistic possibilities. That’s important.

Keep on truckin’, little indie app.

Addendum; List of Grievances

  1. Sketch tries to keep the list of artboards in sync with their arrangement on the canvas. Moving an artboard typically results in the order of the artboards changing in the list. I realize this is more of a personal quibble, as others may not care, but for me it’s infuriating to have a carefully organized list of artboards blown up just because I decide to move one of them on the canvas.
  2. Having to set export parameters for every single element. My kingdom for bulk Export settings! (To be fair, it is possible to select multiple elements when setting Export parameters and the settings will apply to all selected. But this can be difficult when elements are scattered across dozens of artboards.)
  3. There are no toolbar buttons for “Back/Front” arrangement actions, but there are for “Backwards/Forwards”. This seems like a wholly arbitrary decision.
  4. Setting user-defined guides was not very discoverable. Does Adobe have a patent on the “drag guide out from ruler” method?
  5. When using the color picker you cannot move the document to get to the element that you want to color pick. If it’s not on screen, you’re just out of luck.
  6. Artboards can only be collapsed one at a time. This results is a lot of clicking when all you want to do is clean up your list.
  7. Styles don’t have much control. For example, I found myself having to create 3 different styles for text that was identical in every way except for its orientation. Since Styles saves orientation by default, I had to have separate Styles for left, center, and right aligned text. Would be nice to untick the “orientation” box on the style attributes for that test style.
  8. Lots of UI I commonly use is hidden away under popup panes. I dislike that you cannot customize the panes to show those options all the time by default instead of having to click to access. I have plenty of space on my monitor. Lemme use it!
  9. I just personally find the color picker controls to be clumsy and lacking good control. I’ve gotten used to this, though 20 years of using Photoshop will always make this a bit too basic for me.
  10. Vertex points do not snap to each other. WHAT.

« Older writing is available in the Archives.