It has been about a year and a half since the design team at Digital Garden has made the switch to Sketch, a design application by Bohemian Coding created specifically for digital design,  from Photoshop. At first, I was skeptical about abandoning a tool that web designers have used for years and has almost become the industry standard, but surprisingly, the transition was relatively painless with a very brief learning curve.

Here is what I found over the course of primarily using Sketch for web design compared to using Photoshop.

+ Pages and Artboards

Designing templates in Photoshop meant that  each template was a separate file and this became especially painful to manage large sites with many templates in multiple breakpoints. Sketch uses artboards within one document instead, which makes it easy to copy shared elements across artboards, and also get an overview of all the templates at a glance for overall balance and consistency. Managing version control is simpler as all the templates are always kept in a single file, bundled together.

+ Working in vector

Scalability is important in responsive web design as elements constantly need to be resized between breakpoints. Although Photoshop does offer some vector features such as shapes paths and smart objects, I find the process clunky and unconsidered, constantly needing to switching between tools and applications. 

+ Managing rules and consistency

Sketch offers intuitive features such as symbols, shared styles, and text styles that automatically sync and update changes between specified groups, allowing global elements such as headers and footers to be managed in one place. Although I find that these features have a lot of room for improvement, (glitchy text styles, inability to create nested symbols) I still find it less convoluted than trying to manage the same in Photoshop through layer comps. 

+ Sketch mirror

Sketch mirror lets you preview the designs on mobile devices in realtime. In Photoshop, you can buy additional apps to achieve the same such as Skala view, but it is just simpler with this feature built into the app, as it is literally a click away.

+ Exporting designs and assets

Not only all the artboards can be exported at the same time with a single click, being vector-based, there are a myriad of useful slicing and export options such as PDF and SVG formats, and exporting at 2x, 2.5x and 3x sizes. Exporting assets is also as easy as literally dragging them out of Sketch into a folder - it is incomparable to slicing in Photoshop.

- Bugs

Although updates are released frequently to squash bugs, and performance has significantly improved since when the app was first released, from time to time, there are some noticeable bugs and glitches.

- Backward-compatibility

As mentioned above, updates are very frequent but even minor updates sometimes prevent the app from opening files created with the previous version, or renders third party plugins unusable. It was also a difficult transition from Sketch 2 to 3, due to the same reason, where as Adobe applications allow files to be saved as previous versions.

- Only on Mac

The application is only available on OS X, and Sketch mirror only on iOS devices. Although most designers do tend to use Macs and this may not be a problem them, unfortunately, making a website is a collaborative process, and it can be a problem if people on the team cannot install Sketch, when persuading others to try the program in the first place is already a challenge in itself. 

In all, I'm glad I made the switch to Sketch and I hope I never have to design for web on Photoshop again but it doesn't really replace all the design applications as it says it does. I still need photoshop to prepare and create bitmap artwork, Axure to wireframe, and I even use illustrator from time to time to complete more complex vector work. I just consider Sketch as another powerful tool in my toolbox, along with other design tools. Photoshop is a great all-rounded versatile design application and I still use it all the time for various general design work, while Sketch has stripped off all the features irrelevant to web/UI design that only impede the process, and has only included exactly what you need. 

You can get the same job done with Photoshop, but it is like trying to cut a piece of paper with a swiss army knife - it can be done but is clunky and fussy. Sketch could be likened to a good pair of scissors with large comfortable handles - although it cannot screw nails or uncork bottles, it is optimised for doing just one thing, and simply allows it to be done effortlessly.