Switching To Sketch
For Your Next Project

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

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

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

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 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

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

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

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

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

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 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.