Switching To Sketch
For Your Next Project

The pros and cons of using Sketch vs. Photoshop for web design

I’ve been using Photoshop, along with a good number of other Adobe products, for more than a decade now. It’s what I used to play around and edit photos as a kid, where I got my first taste of design making band flyers for friends in high school, and what I used when learning how to design my first website.

Even though the program is essentially muscle memory for me, I think we can all agree Photoshop falls short as ui and web design tool. It’s just not what the program was built for, and as technology keeps shifting and we continue towards a more collaborative design process, Photoshop seems to fail to meet those needs.

Needless to say, I’ve been eager to find another design program to add to my workflow. After hearing a few rave reviews, I decided to take the plunge and try out Sketch, a fairly new web design app. Here are the pros and cons I’ve found to using the program in the past month:

Pros

Everything is vector

It’s like a dream. I can rescale the objects on my canvas without losing quality or time redesigning something a different size. Another great thing about Sketch is that the artboard is pixel aware. Even though you’re working with vector objects, the rasterization is precomputed so you can do things like snap to a pixel grid, making it perfect for web design.

 

Smart guides
Smart Guides

I’m not sure what I did before smart guides. They allow you to perfectly snap-align all of your layers. Not to mention, you can easily see the guides and spacing between objects by holding down the alt key. Dragging down a guide in Photoshop now makes me feel as though I’m using ancient software.

 

Built in grids
Built in grids

It’s impossible to work without a grid on a site design, but I hate having to pre-make a grid and drag it into my layers palette. Grids are built into Sketch, and I can easily change the column or gutter width on the fly.

 

Multiple artboards
Multiple artboards

Since Sketch has an infinite canvas, you can create multiple artboards and view everything you're designing at once. It’s been perfect for designing responsive sites where I need to show a web, mobile, and tablet version of a page to the client.

 

Font rendering
Font rendering is closer to web

Nothing was more disappointing than seeing your font appear a completely different size or weight in browser than it did in the psd. Sketch thankfully uses native font rendering, so the text is sharper and more accurate looking.

 

Easier exporting
Easier exporting

No one else on our team owns Sketch yet, so I will admit I was a bit nervous having to slice and export all of the design elements for our developers on my own. Luckily, no slicing is involved as I can easily save individual layers and even export objects @2x for retina displays.

 

Faster program
Faster program

Photoshop is bogged down with loads of features I will never use for web design. Because of its massive size, I'm often losing time waiting for the program to start, open and save files, or even reboot after a crash. Sketch is pared down to just the web designer's essential tools (the program's a mere 12MB compared to Photoshop CS5's 412MB). Since the program's not slowed down by nonessential features, it makes for a much faster and smoother workflow.

 

Cons

Buggy
Still a little buggy

Some examples: When I first started using the app, any imported svgs I tried to rescale would become distorted, which kind of defeated the purpose of using a vector-based app (note that this issue has since been fixed in a recent update). I also find the app will sometimes freeze or go extremely slow when I try to select a new font. The program is new, so I expect some bugs, but they can still be a big downside.

 

Color management
Color management

I had just gotten a pretty nice color workflow down in Photoshop, finally deleting the default colors and creating a custom palette for each project. It really helped me avoid confusion and speed up my process. It was pretty disappointing when I found out the Sketch color palette is the same for all of your projects. Delete or add a color from the palette in one project, and it will show up the same way in another.

 

Not a replacement for all programs
Not a replacement for all programs

Sketch is solely a web design tool. It’s photo editing capabilities don’t pale in comparison to Photoshop, and you can only design at 72dpi, so I won’t be creating any logos in there soon. This is not necessarily a downside as a tool, but more a downside that you’ll have to hang onto your Adobe products.

 

Learning curve
Learning curve

Learning any new program is scary and puts you out of your comfort zone. It takes time to get used to a new program and create a new workflow for yourself. That said, the learning curve for Sketch isn’t much, and I was completely comfortable using it after two projects.

 

The pros clearly outweigh the cons when it comes to using Sketch over Photoshop for web design. There are definitely other vector programs out there that have some of these features, but I have yet to use another program that gives Photoshop such a run for it's money. Yes, there are still bugs and features that need added to sketch, but the problems are minor in comparison to Photoshop's design flaws. Given the program's rapid growth in just two years, I would highly recommend switching to it for your next web design project (did I mention it's extremely affordable at $79?). I've already made the jump to using the program for all of our new designs, and I'm excited to see how this app will improve my workflow!

Have you used Sketch for a recent web project? I'd love to hear your thoughts on it! If you'd like to try out the program on your own, you can download a free trial here.

Comments

Luca Bertaiola's avatar
Luca Bertaiola
I use Sketch for all my layout, i love it and i will never use Photoshop which is pretty useless for a web designer right now.

About the cons#3 i use Pixelmator as a replacement for the image retouch part which is missing (not a bad thing) in Sketch.
Nathan's avatar
Nathan NMC team member
Terrific, concise article Ashley. Totally agree with your conclusions on all points: first legitimate contender to dethrone Photoshop (though I was already a long-time Fireworks user, which is really what Sketch replaces since Adobe EOL'd it). Bugginess still gets to me, especially around type handling, but that's something that can be fixed and not fundamental to the software.

Creative Cloud is a bold bet for Adobe and while admirable for how affordable it is (compared to how drastically overpriced Adobe software is), it's not a great choice movig forward. I want to own, not rent, the tools I need for my job. The Sketch Pixelmator combo is unbelievable at $98! Also, I've long felt that visual designers should take responsibility for delivering their own assets to developers, anyway, so compatibility isn't so much a problem.

If you haven't yet checked out Meng To's article series about Sketch on Medium, be sure to: really great tips and resources from a long-time Photoshop user's perspective.
Edison's avatar
Edison
" It’s photo editing capabilities don’t pale in comparison to Photoshop, and you can only design at 72dpi, so I won’t be creating any logos in there soon."

So it's on par with Photoshop?
Lucas Stinis's avatar
Lucas Stinis
The fact that colors can't be defined on a per project basis is a huge issue for my workflow... I absolutely love Sketch and, as many fellow interaction designers around me state, it's impossible to go back to using Photoshop or Illustrator for UI design. Fact is though that the color annoyance and the fact that the current version is full of small annoying and seemingly random bugs (selecting objects is often buggy, working on "bigger" projects gives all kinds of issues that make the app a pain), makes it a love hate relationship for me. 4/5 stars until these things get fixed ;)
Ryan Belisle's avatar
Ryan Belisle
Great article and I agree on all points! I was curious to know how your process from delivering sketch designs to your front-end developers? I'm used to just handing over a PSD, but if a developer is on the PC, you can't just hand over the Sketch file. I was wondering if you are in the same situation or have another process for getting the designs to your developers?

Thanks,
Ryan
Ashley Bennett's avatar
Ashley Bennett NMC team member
@Ryan - great question! We used to just hand the psd off to the devs, but now the designers export the assets and put together a style guide with colors and font sizes. It took some getting used to, but since we are saving a lot more time designing in sketch, it isn't increasing the design time for a project at all.
Maik's avatar
Maik
Ok, have just tried Sketch 3. Awesome.
For me, i miss a export preview with settings like Adobe Fireworks has, because for banner ads, i have to control the final size of every output to be fine with.

And, of course, some bugs should be fixed... :-)
pet's avatar
pet
Hi,
I am familiar with sketch which helps me to design better as much possible and photoshop will never replace the sketch while designing.
Dave's avatar
Dave
I read in reviews sketch is incredibly unstable and buggy, not as great as promo articles are painting it to be.
Right now its $120 , seems overpriced to me when Mac Affinity is $49 and seems way more broad and capable the sketch.
Nathan's avatar
Nathan NMC team member
Hi Dave,

Which reviews do you mean? Early versions certainly had plenty of problems but since 3.0 early last year it's been really solid -- all 3 of NMC's designers use it full-time for pro work and I'm fairly sure there's now *less* grumbling about stability and crashes than when we used Photoshop ;)

Affinity definitely looks awesome. I'd been an early user of the beta and bought a license when the 1.0 was released. Haven't spent a lot of time in it but it seems I may be able to ditch Illustrator for good! It's positioned more as a replacement for vector illustration, though, rather than UI and screen work. Also, on Bohemian Coding's web site Sketch is listed as $99, not $120.
Rob's avatar
Rob
Hi Ashley, thanks for your nice report on behalf of Sketch 3. I'm working with Sketch since a while and really like it. One problem though I experience is the fact that I'm a free lancer and work with different developers all the time. They all have there own way of working and according to front end development they all still expect from me to deliver them layered psd's in order for them to be able to create the website.

I saw Ryan's questions about this and am still puzzling how to combine Sketch with the slightly old school way of working the developing companies still prefer. Hopefully you can me give a little more information on how to deliver the assets to the developer so they still can work in their own fashion. Because when I design in Sketch I can export slices to different file formats and I can copy the attributes for css. But many 'assets' are vector shapes and I'm wondering do I have to slice those too and export them in a certain file format? And secondly if you sent the style guide included with the sliced assets is it enough to enclose a pdf of the total layout so the devs can develop on sight from there?

Thank for your help

Gr. Rob
Ashley Bennett's avatar
Ashley Bennett NMC team member
Hi Rob,

Good questions. The developers at NMC just started using Sketch and I work with several developers on freelance projects who have no idea what Sketch is. When it's time for the developer to start working, I generally send them .png files of the completed mockups, a folder of assets, and a color a type stylesheet.

As far as exporting the assets goes, I try to stay pretty on top of what can be done in CSS, but there are definitely cases where there are some vector shapes that need to be sliced up and exported. If I'm ever not sure, I usually just have a quick chat with the developer about what assets they need, what file format, etc. Sketch definitely requires a more collaborative design approach (which I prefer), than the typical waterfall, pass-off file delivery method.
Julie's avatar
Julie
Hi Ashley, thanks for this great article to describe the pros and cos about using Sketch.
I've been using Photoshop for over 15 years, and I can def see the transition to a completely new program wont be easy. But what I'm more concerned is most of the design assets and templates that our company has been built are in Photoshop. Some designers in the team are more comfortable working in Photoshop and some new designers like to use Sketch. We aren't able to have ALL the designers switch to Sketch immediately as we also need to get work done in a very fast paced startup life.

Does any of you work in a team of designers use both Photoshop and Sketch to create design assets? and how do you collaborate and share the design templates with each other across two different programs?

Thanks!
Julie
Shres Mahesh's avatar
Shres Mahesh
This is my second project working on the Sketch after using Photoshop for ages to design web templates. I was bit struggling on the first attempt but realised how cool the app was. Then I decided to do second project all though my workflow is slower than in photoshop. Here I landed on you article when I was Googling for a colour palette management on the Sketch, which is really lacking. When I have to switch the project in between, its a nightmare. I wonder if someone has developed a plugin or so to manage the colour. I am still in search. Overall the app is way more easier to use than any other in the market. Thanks for the article.
Frank's avatar
Frank
is this software available for windows please post that link thanks in advance
Angie's avatar
Angie
Can't put it better. I still get bugs in Sketch but I'm not going back. I've been using this with Zeplin (Zeplin's still buggy) and it's made big build projects that much easier. It's hard to force the program onto your designers but it's working.

When working with large images, shut down other programs, sometimes we get the 'Out of Memory' bug. Seems like nothing but a re-start will help. Also love the auto-recovery. The auto-save function takes getting used to. Gotta remember to re-save a version at the beginning of each design otherwise it WILL over-write any old versions.

My biggest gripe with it for a while is the inability to hold alt to copy elements and also that holding shift key down to lock vertical / horizontal positioning was broken but they seemed to have fixed this in the last update. Moral of the story is, these guys are on the ball. They listen to problems and tackle them with each release. I've got big love for Sketch.

Don't get me wrong, nothing will ever beat Photoshop for artworking/comping/retouching - that's why it's called 'Photo'shop. I just can't stand the 800mb files for 2 artboards anymore.

Leave a comment