It seems that Sketch is becoming an increasingly popular
design tool, gaining more and more market share around the globe.
After being made fun of for not using it during an
interview, and hearing a lot of designers rave about it,I decided to take the
plunge, but after using Sketch for a couple of months, I came away with mixed
feelings.
Therefore, I’ve decided to share my experience with fellow designers, because I suspect a lot of them are facing the same
Sketch vs. Photoshop dilemma.
Sketch vs. Photoshop? It's a tie or
clear victory for either, depending on how you look at it.
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.
Sketch vs. Photoshop, Round One:
Compatibility. Photoshop still has the upper hand, as it’s not limited to Mac
OS X.
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.
Sketch vs. Photoshop, Round Eight:
Exporting assets. Step aside Adobe, Sketch wipes the floor with Photoshop.
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.
Bottom line? You won’t go wrong with
Photoshop or Sketch. Both have excellent use cases, and neither will miraculously
turn you into an ace designer.
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.
This article was
originally published on Toptal
About Author
Alex Gurevich
Alex has built, managed, and led a company that provided web solutions, branding, and marketing consulting services. He grew it from a small startup to one of the best design firms in the city in less than eight years.
Email: jordan.lyons@toptal.com
%20in%20India.png)
