The latest, highly anticipated version of “http://www.bohemiancoding.com/sketch/” class=”external” rel=
“nofollow”>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,  class=”external” rel=”nofollow”>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 officianados 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.

<pre><code class="language-css">p { color: red }</code></pre>