Sketch vs. Photoshop: Is It Time To Switch From Photoshop To Sketch?

Here are my thoughts on some of the key points differentiating these two tools. I hope my experience will help others decide whether it is time to jump ship and ditch Adobe for Sketch.

What Is Sketch And Why Should We Care?

Sketch is a mockup / UX and UI development tool created by Bohemian Coding (someone other than Adobe; yes, I know it’s hard to believe), and the newcomer has managed to unsettle Adobe, which was the undisputed industry leader for decades.

What makes Sketch different?

In as few words as possible, Sketch promises faster workflow and easier use than its counterparts. You could think of Sketch as Illustrator with some Photoshop stitched together, but that’s only part of the story. Many Adobe features that you don’t use 90 percent of the time were stripped out, so what we end up with, is a streamlined tool, designed to quickly prototype everything from simple wireframes to complex mockups.

Compatibility

Let’s get the elephant out of the room first: If you are using a PC, working outside the US, and most of your clients and team members do not use Macs, then you can probably stop reading now since you will constantly deal with users that can’t use your files.

Sketch is only available for Mac OS X, sorry PC users, there’s no Windows version and you shouldn’t expect to see one soon.

If you are a designer you are probably using a Mac anyway, so the next few points ought to make it easier for you to decide if you should try convincing everyone else to switch to Sketch.

If you are planning on using Sketch mostly for wireframes, there is still hope for multi-platform compatibility since you can export files to SVG and PDF format; you can get some editing capabilities back once you open it in Illustrator.

The only other way of making sense of Sketch files on Windows is by employing specs tools, namely Avocode.

Interface

If you are used to Photoshop and Illustrator, you will feel semi familiar because the Sketch interface looks like it was re-imagined by someone who might have worked at Adobe. You can learn everything you need to get started in a matter of hours.

From time to time it does feel like the Sketch team decided to move things around just to differentiate their product from Photoshop.

For example, you have your layers on the left (don’t know why they didn’t leave them on the right side, other than to look different).

Layers panel is pretty much a stripped down version of the Photoshop panel. You will see this area get quickly populated and disorganized as soon as you start working on anything complex. Unlike Photoshop, you can’t organize it into colors or see all the the little effects that you applied, and since you can click through the layers on your board you will quickly forget it even exists unless you want to move an artboard. This might be a good thing since I noticed that I spent more time designing than managing and messing around with my layers (like Photoshop). The right side shows options for specific tools once you click on them.

Since Sketch is more lightweight on features, everything fits on the right. You don’t have to dig around trying to figure out if your settings decided not to show up because you switched to a different layout last time you used it. In Sketch even features that could be considered “hidden” in Photoshop, such as blending options, show up on the righthand panel.

The simplified UI approach works, but it’s not perfect. Things sometimes disappear into Option buttons (even though there is still plenty of space for them). For example, if you want bullet points, Sketch assumes you don’t use them often, so they are tucked away under a gears icon that you end up clicking a lot thinking something else might be hidden there.

You can customize the top toolbar to add hidden functionality, such as rectangle and circle objects, for easy access (until you learn the shortcuts and get rid of them, again).

My opinion? I am fairly happy with the Sketch interface; it’s simple and you will get used to it within a few hours. This is a big deal because designers usually don’t have a lot of time to waste. The ability to try out a new tool and figure out the UI in a short time is a good way to get more professionals to try it ; they don’t have to waste days figuring out the basics, they can do it in a few hours while they work.

Creating Objects

Creating objects with Sketch is one of my favorite aspects. Simply press “R” and you got a rectangle, press “L” it draws a line (yes, Adobe Illustrator has shortcuts too, but they are harder to remember and don’t work as smoothly). By the way there is a great shortcut guide blog post here.

You can quickly jump inside groups (similar to Illustrator, but a lot more transparent) by double clicking an object. This means you are able to throw together a wireframe and adjust things instantly (however, you can’t rotate objects by dragging a corner, for some reason). Resizing an object keeps its properties too, so if you hated how your rounded corners got messed up in Photoshop when you transformed your square, you are going to love this particular aspect of Sketch. The snap-to-grid works a lot better than Photoshop’s or even Illustrator’s; you will actually use it to align things instead of wondering where Adobe came up with those alignment points.

Photoshop still has the upper hand as far as modifying and tweaking objects since it’s part of a more elaborate, full-feature photo editing software suite. If you are working with intricate skeuomorph designs, Photoshop might work better for you since it can do more and you don’t have to learn a new interface.

However, this isn’t really good news for Adobe because design trends are changing, and skeuomorphism is already considered passe. Contemporary design is minimal, clean and flat, making Adobe’s lead in this department a lot less relevant than it would have been a few years ago.

Artboard Workflow

So, the next thing that a Photoshop and Illustrator user will be familiar with are artboards.

Artboards in Sketch may be described as a mix between Photoshop artboards and Illustrator’s. They are really easy to create, like in Illustrator, and show up as sections in your layer panel, as in Photoshop.

You can also have separate pages; think of it as tabs, all within one document. So you can have a page for your mobile artboards and a page full of desktop artboards, all in one document without bunching everything into a single space. Objects can be placed outside the artboards, just as in Illustrator (although it doesn’t work as well; I quickly discovered that this particular feature is still a bit buggy).

For example, I can drag an object from one artboard to another and it will sometimes disappear into nothingness because it’s still, technically, part of the other artboard group (good luck finding it in the layer panel!). Oh, and sometimes this works as it’s supposed to, thus creating awesome workflow frustrations.

Symbols (Aka Photoshop Shapes or Smart Objects)

Another semi-convenient thing in Sketch is the use of Symbols, a concept Photoshop users will be familiar with, but Adobe likes to call them Shapes. I got super excited when I clicked on the shapes icon and I got the following drop down:

Symbols are, basically, a group of objects, sort of like smart objects in Photoshop. In Sketch, symbols get their own drop down menu. All symbols are unique to an open document. Built in Sketch templates place them on their own separate page by default (although you don’t have to), so you can easily switch to it and see all the symbols that are at your disposal.

Here is why this is all only “semi convenient:” The first thing I did is something many designers do when they try out a new tool; I downloaded a bunch of free icons with hopes of speeding up my workflow.

This is where the fun stopped. Sure, you can import symbols, but they will be regular objects in your document by default, even if I drop them into the symbols designated page, as you see i did above. Unfortunately, you have to manually convert each item into a symbol, and spend time organizing them, in order for them to show up in your drop-down, so you will likely end up pasting them, just as you did in Illustrator, instead of utilizing the fancy symbols drop down menu. This time you are just pasting from a different Sketch page.

Of course, you can spend hours setting up a perfect starter template to avoid this. I like how Photoshop does it: You simply download a shape file from the internet and load it as you need it; shapes will be available all the time for all documents.

While we are on the subject of symbols, it’s really easy to accidentally modify a symbol, where it replicates in all your artboards, in Sketch. Yes, you can watch out for it and make sure you convert it to “no symbol” when you are editing this object, but trust me, you will do it at least a few times. You will be surprised to see stuff move or change on something you already finished. The most common problem I encountered was editing the button text and then forgetting to check the “exclude text value from symbol” option, consequently finding half my buttons renamed.

If it were up to me, I would advise Sketch developers to include some sort of a warning, or a lock feature, making sure that people don’t edit them accidentally. Photoshop is better in this respect because it opens a separate window when you need to edit your smart objects.

Styles Done Better

When you add a text box and you are working from a template, Sketch automatically adds a style to it. It is also easy to create and define new styles. So easy, in fact, that you will be accidentally overriding them half the time and then watch in horror as your changes propagate to all your artboards. (Actually, most of the time you won’t notice it until you are presenting.)

This is when you pray the Undo button actually works (more on that later). I would say styles implementation is better (since you are forced to use them) than Adobe’s, where I have to spend time manually setting up styles and then forget to use them, anyway.

You will eventually learn to check if the styles dropdown is highlighted before you make any changes. However, you can still trigger it, maybe by resizing an element with text in it, thus changing the font size and triggering a global style change. It would be cool if there were a way to prevent this, maybe through some sort of lock button that you have to press before messing with styles. Or, perhaps, style application is cleared if you change an object (as in Photoshop), or only allow style changes from the designated Symbols / styles page.

Exporting

Yes, it’s easier and faster to export in Sketch. Simply drag artboards to your desktop and it saves them, and it’s easy to specify the resolution, such as 2x, for Retina-class tablet displays and so on.

Not that you can’t do these things in Photoshop, which now has a “quick export to png” option when you right click on items; it’s just a little faster and better implemented in Sketch. However, you can’t export your entire screen, only artboards (as in Illustrator). It’s something to remember before you draw arrows between artboards to guide the wireframe flow.

Another significant plus for Sketch is that it’s a vector-based tool, just like Illustrator. Your design will look good on all devices and assets, it won’t be as huge as your Photoshop files, and you can even save them as SVGs.

Speed And Stability

This is a big one. Yes, Photoshop can be slow, so you need a lot of RAM, processing power and fast storage if you want to open a dozen artboards simultaneously. That said, Photoshop runs fairly well on my Macbook Pro 2013, and even though things get a little sluggish from time to time, I didn’t feel like these performance issues hinder my workflow. Yes, this can be a nuisance, but it’s not a serious problem in most situations. You are also more likely will have Illustrator open alongside, to import vector objects, which further adds to the overall Adobe speed footprint on your computer.

The great thing about Photoshop and Illustrator is that they are polished products and I am willing to trade speed for stability, any day.

Sketch may be described as the opposite. Sketch has a smaller footprint, it’s really fast, and allows me to have 40 artboards on screen and quickly move things between them without a hint of sluggishness. Unfortunately, this is where the good news come to an end. Despite being around for a few years, it still has a lot of bugs . Some users (including me) feel like they are using a beta product, and stability can be a deal-breaker for many people.

Thankfully, I never had it crash on me. However, you should expect some unexpected behavior like the undofunction not working (this particular bug has been documented for a month now), or undoing some random step on some random art board without the ability to get it back. I actually had to stop using undo in my workflow because of this bug. In one instance, undo completely deleted one of my artboards and everything in it with no way of getting it back. This is not the only bug, although I found it the most frustrating. You should also be ready for inconsistent line spacing and text resizing. I remember one time I loaded a file for a client presentation and half my objects were moved to the right by about 20px, making me look like a noob designer who can’t align things.

Let me be clear. Sketch is buggy, but it is not buggy enough to be considered unusable or unsuitable for serious work. Having said that, I think many users will reach a point where these minor glitches start to annoy them to a point they consider switching back.

Plugins

Sketch has a lot of cool plugins, such as those that allow users to automatically populate text fields, and so on. There are also pretty extensive plugin databases out there, and most of them are free. Like Sketch App Rocks. Also, most plugins are geared towards simplifying workflow and performing certain actions faster.

Photoshop has a range of plugins to choose from, too, however, they are not as focused on UX/UI design (because it’s a photo editing tool) and they are scattered around the Internet. However, I must stress that the best and most commonly used plugins are available for both platforms such as the awesome Free Invision Labs plugin that allows you to easily create repeated elements and add filler content. Sketch is the new hip thing, so new plugins and sites dedicated to it are popping up everywhere.

Sketch vs. Photoshop: Conclusion

For me, it’s a tough choice. I really wanted to fall in love with Sketch, however some of its limitations keep me from jumping ship. Yes, Sketch is faster and feels a lot more like an actual UI design tool than Illustrator or Photoshop. You will be able to build things much more quickly, even if you just moved from Photoshop and Illustrator.

Still, bugs will push the otherwise excellent speed back a notch, and Mac-only support really limits the scope of projects. For now, I am using Sketch solely for wireframes and smaller projects, and sticking to Photoshop for my main UI mockups.

You should ask yourself questions such as, “Do I enjoy using buggy, but cutting-edge software?” or, “Do I want to fall for the hype?” If the answer is, “Yes,” then go for it! If you are an Adobe veteran, you can probably afford to wait a few months for Adobe Comet to launch. By the looks of it, Comet will pretty much do what Sketch does, plus animation and artboard linking. Ultimately, these are just tools for your workflow. They are not going to make you a better designer, they might just speed up your workflow, and that’s all.

Personally, I have added Sketch to my toolbox, even though I have to check my files each time I open them to make sure they didn’t get changed by one of its bugs while I was asleep. Things will get better, there’s no doubt about that, but the question is when? Sketch managed to gain a huge following, yet it failed to iron out all the kinks. I only hope that the imminent launch of Adobe Comet will create a new sense of urgency and force the Sketch team to address more bugs in the coming weeks and months.

UPDATE:A few months have passed since I wrote this post, and it looks like Sketch has been busy fixing bugs as well as other nagging issues I experienced and described in the article. For example, in version 3.8 they finally fixed the dreadful undo issue and I haven’t had any problems with it since. They also addressed style change issues, so now styles won’t change globally if you accidentally edit the text. Additionally, if you use symbols, you can now override the text that’s within them. Symbols are still spaced weirdly and .svg import sometimes requires adjusting, but those are minor bugs that I can live with. I believe now is a good time to recommend Sketch to new users, especially with tools like Zeplin and Avocode that help you hand off your designs to developers, even if they aren’t using a Mac.