For years I’ve been using Photoshop as my primary design tool for everything, from print design to web design. Photoshop was the all-in-one tool for me no matter what design project I would do. Of course, there’s Adobe Illustrator and Indesign too but I only
use these tools if necessary and when the job calls for it.
6 Months ago I made a huge move when I switched to using Sketch as my primary design tool instead of Photoshop. Before I made the move, I had already heard a lot about Sketch and how great it is as a screen design tool but I was too reluctant to jump on-board like the rest.
What convinced me to switch to Sketch were the cool features it offers that Photoshop and alike softwares couldn’t do which made design workflow faster and smoother.
What Makes Sketch Great
The Interface
At first glance of the user interface, it looked completely different to that of Photoshop. Work space is totally different, there were some familiar tools but how it worked and felt was a completely different from what I’m used to.
The layers panel works just like that of Photoshop, groupings of layers and dragging layers to rearrange them, duplicating layer styles and so on. The overall look and feel of the interface is just a whole lot different than what I’ve been used to.
Despite that, I really like the whole look of the interface because it’s really simple, clean, and straightforward. But it’s not the whole look and feel that sold me on it but rather the features that made it a more efficient screen design tool.
Here are some of the features that made me switch to Sketch
Symbols
Symbols are design elements or layers within your Sketch document that you can use over and over again all throughout your design. You can create a symbol out of anything, any design element or group of elements and create a symbol within a symbol.
I particularly like this feature because as a UX/UI designer I tend to use and repeat the same design element over and over the whole design especially ona mobile app and web design for consistency.
Symbols are like templates or in programming, a class that you can use or all over your design. Once you edit or change something on a particular symbol, all Artboards or Layers that use that symbol or design element will also change or update with whatever change you did to that symbol.
Symbols are a time saver. In Photoshop this would be mean having to edit every layer of the same design, even for just a simple text edit or when moving a few pixels to adjust an alignment. You can imagine how that can be a nightmare for any designer using Photoshop.
Resizing
Resizing is a feature that lets you set or constrain a layer to determine how they should behave when you resize the Symbol, Artboard, or group of layers. This is very handy dandy when designing for a mobile app wherein you can just design for one mobile resolution and then creating, let’s say a tablet version of the app, will be just a few clicks. It’s like responsive design in a flash.
It’s not perfectly good looking when you resize to a screen that is 3x or 4x bigger or smaller than the initial screen size that you designed, but it’ll get your work done 5x faster than the traditional way.
Plugins
Sketch has a vast array of plugins that you can try to install for free or purchase. Just like Photoshop, these plugins make Sketch an even more powerful screen design tool.
One notable plugin is Craft by InVision. This plugin has a feature that can generate dummy content like text and images in just a few clicks. It can also replicate a design element and generate dummy content for those replicated layers and automatically arrange them in the way that you would want it.
Prototyping
Today, handing over a mockup to a client isn’t enough to convince a client to approve your design. They say a photo can speak a thousand words. I find that not exactly true in mockups as the clients don’t know how your design reacts to user inputs or how it flows from one element to another.
Sketch offers Prototyping which steps up a designer’s game and gives the client and target audience a more immersive and realistic user experience without pushing a product into production. This gives clients a glimpse of not only what the project would like, but also how would it work.
In Sketch you can share these prototypes to clients and let them comment on your prototype within one document. This eliminates the clutter of having dozens prototypes and centralizing everything in one document in one place: Sketch Cloud.
Sketch’s Prototyping feature covers only basic user actions and flows of a website or mobile app. This works great for most projects but for a more detailed and advance prototyping, try Sketch’s Craft plugin which is integrated to InVisionApp and allows you to do more advanced prototyping.
A Vector Based Tool
Sketch is a vector based tool, meaning you can create vector graphics with it like icons, logos and other basic design elements needed for your project. With that said, if you ever need an icon, you can create it directly from Sketch or within your Sketch project rather than using another vector tool like Illustrator.
UX/UI Design Tool
Sketch is geared towards UX/UI design, which is exactly what it was designed for. It makes UX/UI designing 5x faster than using Photoshop or other softwares alike. With powerful features and plugins that make a designers job easy, Sketch is the design tool that every designer must have, most especially UX/UI designers.
Even though Sketch is better in so many ways compared to Photoshop in terms of UX/UI designing, I still use Photoshop for editing photos. I really find that Sketch is geared towards UX/Ui design.
Shortcomings of Sketch
For Mac Only
Not every tool is perfect, and Sketch is no exception. One of the downside of Sketch is that it is only available to Mac OS, so any designer who has a windows machine can’t use this app. This is also one of the reason why I was kind of reluctant to make the decision to move to Sketch.
Sketch, in terms of software cost, is much cheaper than Photoshop. But the hardware requirements for it are not. Macs in general, whether it be an iMac or a Macbook Pro, are pretty expensive and not everyone can afford it especially those designers that are just starting to make a name for themselves or startups companies in the industry with limited funding.
Prototyping
Prototyping in Sketch is pretty basic. There are other tools out there that can do advanced prototyping but Sketch is fine if you need something done on the fly and that it doesn’t require complex user interactions and animations.
Final thoughts
For the last 6 months that I have been using Sketch, I have learn to loved and embrace it as my primary design tool. The features mentioned above are just some of the things that made my job a lot faster and easier giving me more time to think about my design rather than spending that time on the laborious process trying to translate my ideas into the design.
After 6 months of using Sketch, it’s hard going back to Photoshop after getting used it. Now a days, working on Photoshop feels a little alien to me as I’m used to Sketch keyboard shortcuts, tools, and environment which are entirely different from Photoshop.
But with Sketch replacing Photoshop as my primary design tool, it doesn’t mean I won’t still be using Photoshop. Sketch for UX/UI and simple vector designs, Photoshop for Photo editing. Together these tools can work hand in hand to creating beautiful designs.
