Navigation

Sketch 3 has launched, is it time to switch?

By Benjie Moss | Resources | Apr 15, 2014

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.

Share this post
Comments (no login required)
  • http://www.unitedworx.com Paris Paraskeva

    Been using illustrator and photoshop for design work for over 8 years and I have fully converted to sketch for over 6 months now. Actually I mostly used illustrator rather than photoshop for design work.

    The simple fact that sketch lets you create styles that match the CSS code you will later on write or grab from sketch is simply the winning sauce for me.

    I am now designing with the same logic I will later on code my design in CSS.

  • tjedison

    One big comparison point that can’t be ignored is price. Sketch is $79 ($49 for launch week). The latest photoshop requires a monthly fee almost that high. For new users without an existing investment in Creative Suite, it’s a no-brainer.

    Also, although a LOT of people use Photoshop for web design, my shop has used Illustrator instead.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      Sketch is a lot cheaper than anything by Adobe. The problem is that if you’re a serious designer, you have to have Creative Cloud (or possibly a recent Creative Suite) because it’s what everyone else works in. Even if you’re a one-man-shop, you still have to be able to handle PSD files as a bare minimum.

      Until Sketch handles PSDs (or until PSDs are no longer standard) Sketch will always be an additional cost.

  • Tim

    I love Sketch for quick wireframing and mockups. The reflection effect has been in the app for years now. It’s in the same spot it’s always been along with drop shadows and other effects. Not sure why you would call that out and not the other effects? Reflection can be used equally bad or good as the other effects. With great power comes great responsibility.

  • bgbs

    I’ve switched over to Illustrator for web design a while back.
    Should give Sketch a try. And I think it makes sense to put compare Sketch with Illustrator for web design, not Photoshop.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      Illustrator is great. I don’t think Sketch is a patch on it presently.

      As I say above, comparing with Photoshop makes little sense, except that that is the comparison that is always made.

  • brendan

    I have never used Sketch, in fact I have never even heard of it until this blog post! I’m out of the loop, I guess.

    From what I see it’s just Photoshop with a large symbol library and an easy way to test on mobile?

    Seems kind of like enforcing that everything should look one certain way with this large symbol/shape library that the video on their site shows off, doesnt exactly promote creativity, does it? Nor does their logo, which is just this ruby gem logo I’ve seen a million times.

    Nice idea, but seems to be just enforcing same-ness, something that Photoshop/Illustrator/Fireworks never really did

    • Tim

      So, you’re saying that Photoshop’s icon is the beacon of creativity?
      Apps do not promote creativity. They are tools. The creativity comes from the person using the app. I’ve seen great designs done in Microsoft Word.
      And, the symbol library comes from your own designs. Sketch doesn’t start out with any symbols unless you select a template that has them built-in.
      You can do anything in Sketch that you can in Illustrator (except print work because it does not yet support CMYK).

  • Lucas Stinis

    A very useful product, but a terrible, predatory product strategy. Version 2 was extremely buggy… and after only getting 2 months worth of use I have now been “forced” to purchase a new application even though it’s clearly nothing more than an update. An email to customer support stating my more than reasonable claim for a free update yielded a, yeah, good story bro, you can purchase the “new” shiny version from the AppStore reply. Nice way of building loyalty Bohemian Coding, very nice.

    • Giant Pink

      I’ve had terrible experiences dealing with Bohemian Software’s customer support. Emanual Sa called me an idiot for suggesting they reconsider closing down their user forums. That was enough to convince me to stick with my aging copy of Illustrator.

  • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

    My feeling is that Macaw possibly edges it. But if you’re using one or the other you’re unlikely to switch.

    • Lucas Stinis

      Macaw and Sketch are only comparable if you use Sketch to create websites, and even then the comparison is not really fair as Macaw is not meant for designing assets. I can fully recommend using Macaw and Sketch together though! Very complementary, and both together have made my life much easier. It’s a good time to be a designer/developer hybrid with all these great tools becoming available..

      • Talktokame

        As a designer currently looking at options besides Photoshop in order to make the design to code process easier, I’d be very interested in your current workflow, i.e. how do you combine Macaw and Sketch (and perhaps even some Photoshop/Illustrator?)

  • http://www.miraclegroup.com/ Jasonsmith21

    I would definitely like to take the 14 day free trial of sketch. I haven’t used sketch yet. But lets see how it works for me. I’ve been using Photoshop and illustrator for my designing works previously.

  • B30

    “… if Sketch 4 makes the same kind of in-roads that Sketch 3 has made then Adobe will …” buy them out, and discontinue Sketch (maybe adding some features to Illustrator).

  • J Smilanic

    Long live Fireworks. If every screen designer who uses Photoshop to design saw the light and switched to Fireworks – Adobe would still be actively developing FW.

  • B30

    Do you remember Macromedia?

    • Giant Pink

      I cry a little inside every time I think about how easily Adobe bought Macromedia with the intention of killing the competition Macromedia offered. Seems anticompetitive to me.

  • http://www.abbasarezoo.co.uk/ Abbas Arezoo

    I disagree that to be a serious designer you need Creative Cloud. It depends what you’re designing. If you’re designing and building websites then CC isn’t required at all. Sketch, a decent text editor and a good knowledge of browsers/devices is what you need. Not a bloated monthly subscription to a bloated graphics package.

    I also disagree that “really serious designers” don’t work in a team of designers. Why not? I work in an agency in a design team of five and I would definitely class myself as a “really serious designer”. Yeah I work on my own projects but I mostly collaborate with the team.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      You don’t need Creative Cloud to be a serious designer, you need the ability to work with industry standard file formats. Unfortunately Sketch doesn’t deliver that yet (CC does).

  • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

    Except when your client specifies a PSD. Or supplies their logo as an AI.

    • http://www.abbasarezoo.co.uk/ Abbas Arezoo

      Absolutely Benjie – it depends what you’re doing ultimately. I think a serious print designer wouldn’t go anywhere near Sketch as it exists at the minute for the reasons you mention. It looks like a good bit of kit for designing assets for the web.

    • http://camgould.com/ Cam

      Yep lol. Unfortunately Illustrator still has to be installed… just used rarely. I loath having to load it up though.

  • http://www.daverobertson.me Dave Robertson

    It’s a shame Sketch doesn’t run on Windows. Means I can’t even give the trial a go.

    • http://miltersen.com Sune Adler Miltersen

      Give Mac a try. You won’t regret it.

      • http://www.daverobertson.me Dave Robertson

        Done and done, not for me. Never been a fan of Mac OS.

  • http://gravesidestudios.ca Mark Phillips

    I purchased Sketch 2 on Feb 8th 2014 and after a few months of use was also shocked and disappointed to see the “free” upgrade eligibility was cut off to users that purchased Sketch 2 before March 2014. With only being a few weeks out of the eligibility window, I expected after contacting them, they would honour the upgrade. Instead I was given the same “good story bro, you can purchase the new shiny version from the AppStore” reply. Great product, absolutely predatory product strategy.

  • CheeseStreet

    I know this is an old-ish post, but the word is spelled “aficionados”, not “officianados”.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      Thanks for pointing that out, we’ve corrected it.