Sketch 2 First Impressions

sketch

If there’s one thing even die-hard Photoshop users like me have to admit, it’s that Photoshop was never intended to be a web design application.

All the features we use daily for web design probably came to life as side benefits in Adobe’s quest to make Photoshop the perfect photo editing application.

In fact, it’s only with Photoshop CS6 that Adobe has started giving signs that they actually care about people who design for the web and mobile, with new features like pixel snapping and effects on layer groups.

But that might very well turn out to have been too little, to late, because new apps are coming out every day to address the huge, unhappy market of web designers. The latest entrant in the race is Sketch 2, by Bohemian Coding. But can it hold its promises and actually replace (or at least, complement) the Adobe suite? Read on to find out.

User Interface

I really liked Sketch’s UI. It’s much simpler than either Photoshop or Illustrator, yet gives you easy access to most of the same features. I especially liked the small tips that appear near the top of the screen, and really helps jumpstart your first few sessions with the app.

Help is always there thanks to the onscreen tips

The sidebar is also pretty nice. Everything is right there where you need it, none of this hide/show/dock/undock nonsense that plagues Adobe applications.

The Sketch Sidebar

Selecting and Moving

Selecting and moving things is probably the most common action you can do in any graphics editing app, so it’s important to get this right.

Sadly, I thought Sketch really fell short here. Let’s compare Sketch and Illustrator to see why:

Sketch on the left, Illustrator on the right

Unlike Illustrator’s bright blue outline that spans the whole perimeter of the group, you can barely see when a group is selected in Sketch (see the handles at the top?).

And unlike Photoshop (where you can drag a layer by clicking anywhere in the screen while holding Command/Control), I haven’t found a way to move a group or layer with the mouse without having to click inside it, which can be hard to do for layers that are only 1 pixel wide. Actually, command-clicking works the same way in Sketch, so scratch this. My bad!

What’s more, if you have two adjacent shapes, you will often select the wrong one by mistake (it seems a shape’s click target extends past its own border).

Selecting adjacent objects can be tricky

(To be fair, Photoshop CS6 seems to have the same problem when selecting small adjacent shapes. Which surprised me, because I’ve never experienced it in previous Photoshop versions)

There is also a lot of problems with selecting things when digging deep inside groups or combined objects, as a single click anywhere outside the group’s shapes will exit the group, thus making it impossible to select individual components. By contrast, Illustrator requires you to double-click to exit a group, meaning that you’re less likely to exit it by mistake.

Sketch makes it impossible to click+drag to select sub-objects

This accumulation of annoying quirks can make Sketch 2 very frustrating to use at times, especially when dealing with many small shapes.

Vector Tools

If there’s one area where Sketch aims to have Photoshop beat, it’s vector tools. And right away you can see that Sketch developers have implemented a feature that’s cruelly missing from Photoshop: changing a rounded rectangle’s radius after you’ve drawn it.

Changing a roundrect's corner radius: a revolutionary concept

Sketch also has some nifty Beziers curves tools. It looks like it’ll take some time getting to know them, but I can already tell that the rounded corner Bezier tool will be tremendously helpful.

Instant rounded corners anywhere!

Pathfinding Tools

The main reason why some designers don’t like using Illustrator as their tool of choice is that Illustrator is at heart a vector-editing application, and doesn’t play that well with pixels.

Of course, Photoshop provides a lot more control on individual pixels, but on the other hand its vector tools are much more limited. So a vector app that’s also good at pixel rendering would be the holy grail of web design.

Sadly, Sketch 2 still suffers from some bugs that prevent it from taking that crown. When using the “union” tool to combine two shapes, some of the shapes actually shifted for no reason as you can see here:

Original on the left, "union" version on the right

In another case, the Union tool actually ate half of my shape, leaving me with a mangled mess of pixels that looked nothing like what I had started out with.

I have no doubt these bugs will eventually be fixed though, so we might just need to be patient on this one. Still, it seems strange that such obvious bugs would be shipped in a non-beta version.

Conclusion

It’s clear that I’m not ready to switch away from Photoshop and Illustrator. They might have confusing interfaces, hog all my computer’s resources, crash regularly, and be bloated with useless features, but at least I can select things on the first try.

This unfamiliarity with Sketch, combined with the quirks and bugs I encountered, makes it hard for me to advocate switching to it right now. It definitely shows a lot of promise, but I can’t really see myself being productive with it until those problems are fixed.

That being said, I am planning to give Sketch its chance, and keep trying it out for small things like icons or buttons. I’m sincere when I say that I’m looking forward to a real, design-focused alternative to Photoshop. So the least I can do is to give Sketch 2 its chance!

Share:

4 Responses to Sketch 2 First Impressions

  1. Pingback: Great tool! Sketch for Mac | Hydrangea Land

  2. Pingback: Why I Still Use Photoshop | SachaGreif.com

  3. Pingback: Design After Fireworks « The EchoUser Experience | Thoughts and stories from our work and otherwise. Enjoy.

  4. Pingback: 好工具! Sketch for Mac | Hydrangea Land

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>