I use a number of tools throughout my design process. Typically, I start by logging my research into Evernote and compile my thoughts there. Once I do that, I try to draw a really rough wireframe using a pen and paper. If I’m happy with the general layout on paper, I’ll transfer that wireframe to a tool like Balsamiq if I’m working on a web app or I’ll create a pixel-perfect mockup using Adobe Photoshop if I’m designing a mobile app. In some cases, I’ll even use Adobe AfterEffects to animate the UI so developers can recreate the concept pixel-to-pixel.
I’ve used most of these tools for years. Balsamiq is fairly simple to learn but very basic. It took me 2 years to get sufficiently comfortable with Photoshop. Photoshop wasn’t specifically designed to mockup UIs. People just sort of work their way around it. I’m not usually comfortable switching tools that I’ve grown accustomed to over the years, but I decided to give Sketch a fair try this week after hearing so much about it. I know I’m late to the party but I am glad that I finally tried it.
I may have not appreciated Sketch as much if I hadn’t used Photoshop for so long. In the 2 days that I’ve used Sketch, I’m about 90% convinced that I’m never going to use Photoshop again for designing interfaces. Sketch feels like it was purpose-built for designing UIs. It combines the simplicity of Balsamiq with the power of Photoshop. It took me just a few hours to get comfortable with its features and I even recreated a layout that I had previously wireframed using Balsamiq. The whole process just felt natural.
Here’s what I love about Sketch:
Somehow, you instantly feel comfortable when you use Sketch. I found myself navigating around the UI very easily. I even picked up all the keyboard shortcuts in just a few hours. If you’ve used Photoshop before, you’ll like how Sketch organizes layers. As a Mac user, the Inspector also feels very natural.
Artboards in Sketch are like canvases in Photoshop except, you can have more than one in the window. Sketch even comes with pre-defined templates to design responsive-web apps, iOS apps, Android apps (Material design) and icons.
The Sketch interface is extremely well laid-out. Photoshop can’t afford to do this because it’s used for a whole bunch of other reasons. You’ll find yourself ignoring half the menu items in Photoshop when designing UIs because they just don’t apply to the UI design process.
Sketch is not like that. It’s purpose-built. You’ll use just about every feature it has to offer. Not because it’s there but because it’s exactly what you need. This means that you’ll get from idea to UI about 3x faster (at least from what I have observed).
Sketch also has a lot of handy 3rd-party plugins that will make it even quicker to design UIs. Here’s a plugin that I especially liked: Content Generator. It has already saved me hours of work. You can download hundreds of plugins and configure Sketch just the way you like it.
It feels like Sketch is the only app that can give Photoshop a run for its money in terms of community support. There are hundreds of plugins & freebies created by the thousands of Sketch users. There are also 3rd-party tools like Framer that directly import Sketch files. I’m sure that I don’t have to ever use Adobe AfterEffects once I’ve mastered Framer.
I can’t count the number of times I’ve copied a Photoshop layer style and applied it to other parts of the layout just to keep my UI consistent. I also didn’t bother with custom-swatches because they’re so time consuming to create and maintain. I would just copy colors, styles and whole layers. Not anymore with Sketch.
In Sketch, you can simply define a component of your UI as a “Symbol” to be reused. You can even define custom text styles that you can use across your UI. When you modify the style of one text field, all other text fields that use the same style inherit your changes. Magic!
Among other things, you can even copy the generated CSS styles for any element within the Sketch file and easily export images to be used in web, iOS and Android apps.
I’m convinced that Sketch is the right tool for UI design. It’s simple and powerful. Why pay $700+ for Photoshop when you can get everything you want in just the right package for under $100? I haven’t even scratched the surface of Sketch. I’ll report back when I have used it some more.
Chinese Translation Available: This blog post was generously translated to Chinese by Laba Zhou - http://www.labazhou.net/2014/12/moving-to-sketch/.