Sketch & Photoshop - A few thoughts on tools and efficiency

Colin Thumb

Colin Mumbach
01.04.17

I have been using Adobe Photoshop in some capacity for over a decade. It’s gotten me through difficult times, and in other ways, has made things more difficult for me. It’s like a hammer that has driven countless nails, but sometimes misses the mark, smashing my thumb. As I started using it to design websites, this thumb-smashing seemed to start happening more often. This translated to dev in all the wrong ways: excessive file sizes, funky layer and asset management, inconsistent color and type, and a lot of confused conversations with developers. While I certainly got better with those issues over time, I always felt like there had to be a better way to go about designing websites.

Finding the Right Tool for Web Design

I was speaking with a friend a few years ago about the programs we use at our respective jobs, and I told him that I’m a heavy user of Adobe Illustrator, to which he said “That program is TERRIBLE, Photoshop is SO MUCH BETTER.” For me, like I mentioned before with the Photoshop hammer metaphor, they are different tools that do completely different things. Illustrator is arguably the leader in vector-based graphic design, and Photoshop does a much better job with images and other raster objects. So to say that one is better than the other is like saying hammers are better than screwdrivers. They’re just better at performing different tasks.

Sketch Photoshop Blog

This was the main problem I seemed to be having with Photoshop and web design. It just felt like using a hammer when what I really needed to be using a saw. There have been programs out there in the past to cater to this need (Dreamweaver, Muse, etc.), but none seemed to hit the mark for me for various reasons. To me, they all felt too cumbersome and not very intuitive. Or at least; they didn’t give me enough of a reason to make the switch from Photoshop.

The Case for Sketch

Then along came Sketch, created by the small Dutch-based studio, Bohemian Coding. Aside from a small keyboard shortcut adjustment period, it was incredibly easy to pick up the workflow of the program. And it’s so clearly built to build websites. Sketch allows for batch asset export in a variety of formats. It easily assigns text styles across multiple artboards. It makes it very easy to assign button styles across multiple pages. You can edit your Illustrator vectors (logos / icons / etc.) right in Sketch. You can design for mobile right alongside desktop, and have all of your artboards in one spread for easy reference. Final file size is exponentially smaller than Photoshop files. It’s super cheap, and there is no shortage of tutorials across the vastness of the Internet. And there are always updates with bug fixes and new features. And if there’s something that it doesn’t do that you want it to do, there’s probably a third-party plug-in for it.

I was really excited for the bump in workflow efficiency, and ultimately a better-looking and better-functioning product for our clients. But then true test came: Building a site and passing the Sketch file along to our developer.

“This is so much easier,” said our developer, Matthew. “Ok cool,” said I.


buildwithus
Get Started