About Sketch
So, why leave Photoshop?
What drove me to Sketch wasn't the Apple Design Award it had won, or its growing reputation for being the go-to tool for digital designers. It was actually a growing frustration with Photoshop and how it handled (Or didn't handle) retina displays.
Trying to mockup an app at 200% zoom, adjusting Photoshop's launch settings to fire in low-quality mode; These annoying little hacks had killed my faith in Photoshop. It simply hadn't kept up with the times.
What makes Sketch better?
In comparison, Sketch is ready to go @1x with a vector-based workflow, making it easy to switch from regular to retina screens without any loss in quality while editing. – If you need to export a concept in @2x or @3x, Sketch has built-in support for that by default.
This alone won me over, but as I explored the app and its features, I realised it had much more to offer.
A code-based approach to design
Building a concept in Sketch has a lot of similarities to writing front-end code; You build your skeleton out of blocks, and then tweak the block's appearance through a series of properties, a lot like HTML and CSS.
Because these properties closely mirror those found in CSS, it becomes a breeze for your developer to pick up your design and translate it quickly to code when you're done.
This is made even easier by plugins like Craft by InVision which allow you to output comprehensive style guides with a click. A guide will list out the hex values of your project's colours, the sizes and line-height values for all of your typography styles, and create ready-to-export icons.
As an added plus, you can even select an element and export its CSS properties; Especially useful for gradients and text.
Intelligent smart guides and layouts
I know what you're thinking.
"Photoshop has smart guides and snap!"
You're absolutely right, and I wasn't expecting anything extraordinary out of the box here. But my experience with guides in Photoshop has always been a love-hate relationship. Sometimes it works, other times you're left cursing at the screen as your element repeatedly snaps to random pixels.
In comparison, Sketch's guides are effortless; Elements snap into alignment in a logical way, you can read the distance between common blocks. It works in a helpful way without getting under your feet.
Exporting done right
Photoshop's export functionality was clunky and confusing. The Sketch experience is built for digital designers, and lets you export components to JPG, PNG, EPS, PDF or SVG; It even lets you output to @1x, @2x, @3x.
This becomes especially useful for creating resources for your development team. – Or, if you're like the team at Apacio, your devs will be firing up Sketch and using it like they've been designers for years.
To simply share your work - whether its a quick preview to a colleague or collaboratively with a tool such as Invision - this works with a simple drag-and-drop of your art-board.
In conclusion
Photoshop has treated me well throughout the years, and still does.
But its role has changed; I use it to edit photography and create graphics that are later imported into Sketch, which is primarily just a layout tool in our workflow.
This article is an opinionated view on my experiences, and I'm sure Photoshop has come a long way in the last 12 months. – If you're still using Photoshop vs Sketch, or you've also made the switch like myself, I'd love to hear your story.
Write a comment below.