Sketch 3 has launched, is it time to switch?

The latest, highly anticipated version of Sketch by Bohemian Coding, has just been released. It’s an application that has promised much in the past, with many designers embracing it wholeheartedly. However, the previous two versions felt too immature for professional-grade work; the question is, has version 3 addressed those concerns, and is Sketch ready to be used as the go-to design app for creative studios?

The first thing to note is that unlike some pretenders to Adobe’s crown, Bohemian Coding are a professional operation who’ve been working on the various iterations of Sketch for six years, which in Web years makes them old-hands. Sketch is a stable product with relatively few bugs and, as far as I can tell in the time since version 3’s release, the latest version is equally well made.

Where Sketch really excells is creating UI graphics. It’s the market that Bohemian are aiming for. With Fireworks shuffling off in the direction of the trashcan and Photoshop being repurposed as a bloated 3D generator then there’s certainly a niche to fill.

Drawing comparisons

Sketch aficionados almost invariably compare Sketch to Photoshop but it’s a comparison that doesn’t really hold water: the two applications are built for completely different purposes, a more appropriate comparison can be made between Sketch and Fireworks. And seemingly it’s from the Fireworks community that most Sketch fans originate.

It would be naïve to pretend that direct comparisons between Photoshop and Sketch won’t continue to be made, but that is largely due to the ongoing (mis)use of Photoshop as a web graphic creation tool.

Compare Sketch with Fireworks and you’ll quickly draw some interesting conclusions: firstly, Sketch’s GUI is far simpler than Fireworks’ and the improvements made to Sketch 3 only serve to widen that gap; secondly, Sketch is a contemporary web tool, it’s not running off assumptions made by Macromedia back in the 1990s; thirdly, Sketch offers a similar mindset to Fireworks, but with an ongoing commitment to development, whereas Fireworks—rightly or wrongly—is barely clinging to its slot in the Creative Cloud lineup.

Exporting from Sketch

One of the more popular features in Sketch is the @2x export option. This allows you to export a larger version of your image for retina displays. However, if you’re working in vectors, then you can export at any size from Photoshop, and if you’re working in bitmaps, then Sketch is no better off. However, I do like the simplicity of Sketch’s export options, even if I maintain that all vector art should be rendered as SVG (which by the way, Sketch can do).

In order to make a direct comparison I drew a vector circle with a gradient fill in Sketch, Photoshop and Fireworks, exporting it twice from each application at 244 x 244px and 488 x 488px. The results were unexpected: Sketch’s two files came in at 53kb and 197kb; Photoshop’s were 44kb and 165kb; Fireworks’ were 8kb and 22kb. That, in the modern parlance, is known as a beating. Of course, the test was heavily skewed towards vector programs, and I wasn’t surprised that Fireworks did so well, I was a little surprised at Photoshop’s triumph however. Had I been saving a complex bitmap I’d expect Photoshop to have done even better.

What’s more, whilst Sketch’s primary export option is slicing, Photoshop’s is now the generate feature, a process by which layers are exported live when altered. Given the iterative approach of most design processes, that’s something that Sketch is sadly lacking—perhaps in version 4.

Sketch’s saving grace in this respect is that it allows direct access to CSS properties associated with elements, meaning you may not need images for your layouts at all.

Embracing CSS logic

The biggest success in Sketch is that Bohemian have embraced the logic of CSS. When Photoshop was first released CSS simply didn’t exist, even so, it’s hard to envisage how Adobe managed to settle upon such arbitrary settings—when people are releasing whole sites to help designers convert a Photoshop drop shadow to a CSS drop shadow, then someone at Adobe HQ should be able to spot the hole in their product. Fireworks performs a little better, but Sketch’s lack of baggage means that Bohemian have been able to build an app more in tune with how contemporary designers work.

Certainly type aficionados will appreciate not having to pick one of Photoshop’s irrelevant anti-aliasing options.

There is something to be said not just for the efficiency, but for the experience of using an application, and whilst it’s hard to be objective after so many years of Photoshop use, Sketch’s CSS approach certainly feels neater. The consistency with a front-end coding mindset is one of the great successes of Sketch. It just works.

What’s wrong?

There are unfortunately some questionable choices in Sketch 3. Why, for example, has such emphasis been placed on creating reflections of elements? Reflections are an intensely dated design crutch and aren’t worth a second thought (unless you’re part of the in-house team at Apple, in which case they’re part of your brand guidelines). I’m not so much questioning the inclusion of reflections, rather the decision to make such a feature of them when they could have been tucked away somewhere inoffensive.

Another let-down is Sketch Mirror, an additional purchase from the app store that allows you to preview your design live in your device—provided your device is an iPad or iPhone. Fans of Android will need to stick to Adobe’s Edge Inspect, which does the same job across multiple devices.

Those issues pale into insignificance when set alongside the fact that industry adoption of Sketch isn’t yet widespread. For individual designers, particularly iOS designers, Sketch may be a personal preference you’re entitled to act upon; but for designers working within a team, or delivering content to clients for development elsewhere, Sketch’s integration with existing workflow is limited. For the time-being, PSDs are still the industry standard, and when PSDs are eventually rejected it will be for in-browser design, to the detriment of all design apps, Sketch included.

Is it time to switch?

Sketch isn’t a must-have tool. It doesn’t compete with Photoshop for bitmap editing, and I’m surprised at how badly it handled exporting a vector; compared to Fireworks, its performance is a little embarrassing. It doesn’t have drawing controls as sophisticated as Illustrator, and it won’t play nicely with the workflow of anyone but a one-man design and code shop. However, Sketch is substantially cheaper than any of Adobe’s offerings. There’s a 14 day trial which I’d encourage you to take, especially if you’re one of the many who are still bemoaning the demise of Fireworks.

All criticism aside, Sketch is a really fun tool to use. It’s really fast to create in, and the CSS logic means converting designs to pure CSS is blissfully easy.

Most designers won’t be switching to Sketch as a primary tool just yet, but as a secondary prototyping tool it excells, and the idea of Sketch replacing Fireworks (or Photoshop) isn’t as strange as it seemed a year ago; if Sketch 4 makes the same kind of in-roads that Sketch 3 has made then Adobe will be taking a long nervous look over their shoulder.

Ben Moss

Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.