Sketch VS Photoshop

It’s been more than 3 months that I made the switch to Sketch after more than 12 years of Photoshop. I want to take some time to give the reasons why it has improved my design flow. It not only made me a more precise designer but it greatly improved my efficiency by focusing on the functional parts and less on the fluffiness. Not that there’s anything wrong with the latter.

100% Vector

With the growing popularity of retina displays and mobile devices, I feel like redesigning your app for the sake of adapting to 1x, 1.5x (Android) and 2x doesn’t make much sense and is a huge time waster. That’s why you need a flexible design tool. Sketch supports infinite zooming, 2x export and styled vector shapes that are perfect for multiple resolutions. Layout-wise, resizing rounded rectangles no longer requires you to edit the shape points or duplicating the middle portion. You will only care about pixel dimensions and updating images on the fly will be a breeze on Sketch.

Robust Export Feature

Photoshop is very bad at exporting assets. The slicing tool there is cumbersome, e.g. that usually means slicing, setting file types and use Save for Web, which forces you to select slices one by one and export. It is so bad that a beautiful application called Slicy had to be created to solve that decade-long problem.

Sketch solves that without a single add-on. For one, it has an Export All feature. Secondly, since it’s vector-based, it can export in PDF, JPG and PNG, optionally in 2x. Last but not least, the UI for managing your slices is efficient.

Code-friendly Designs

This might be a new concept for many designers, but what it essentially means is that all the properties that you use on your designs (shadows, border, gradients) are all possible on CSS. Why is that important? Well, you don’t want to drive the front-end guys crazy. That could mean you. On Photoshop, you can go absolutely crazy on the lighting directions, textures and drop-shadows that really don’t translate very well to CSS or Mobile. Styles like Bevel & Emboss, Satin, Angles won’t work seamlessly on CSS unless you’re ready to use many images. Remember, Photoshop is a tool originally made for photo editing and complex graphic designs. Sketch cuts all of that and really focus on user interface design. And even though Sketch is simpler, it actually has deeper features such as unlimited shadows, inner shadows, borders and border properties. Photoshop forces you to use Drop Shadow, Inner shadow, Gradient, etc once.

This took me about 15 mins to plan the design that’s going to be coded in CSS. There is zero image involved.

Design With Numbers

Sketch made me obsess over the numbers. And that’s a good thing. Having guidelines and making sure that the dimensions, ratios, positioning make sense is a crucial part of being a good designer. Don’t just drag things around and apply filters, then call it a day. Be obsessive with the numbers.

3 Applications In One

Previously, I used 3 tools for 3 different needs: Omnigraffle for wireframing, Photoshop for user interface design and Illustrator for vector, logos and print. All those 3 can be fulfilled in a less cluttered way on Sketch. Using one application for all means less back and forth and less worrying about translating your design into a new form. Before, what was used on Omnigraffle or Illustrator couldn’t necessarily be used on Photoshop easily. A complicated flow of exporting/importing had to be done and more often than not, you had to start from scratch on Photoshop.

Grids

Nowadays, designers have to care about grids. The 960 grid is probably the most commonly used for Web and new grids are emerging for mobile. Sketch actually has a grid system that allows you to customize as you see fit and it’s extremely useful for respecting design standards for multiple devices.

Give It a Try!

Photoshop has a big legacy and I can sense the unwillingness to make a switch and say goodbye to years of building libraries. But if you can overcome that, not only will you improve your overall design process, but you will be ready for the future as all your new designs will be completely vector-based, flexible and resolution-independent. You will design faster.

The good news is that Sketch is very similar to Photoshop and has more or less the same features that you are familiar with including keyboard shortcuts, layer blending, styles, blur, noise, patterns, etc, except it won’t have all the filters and photo editing capabilities that you probably don’t need as a user interface designer. It’s not a watered down Photoshop, it’s a robust design tool that has completely adapted to today’s design standards. And it’s constantly updating itself every couple of months. The team behind Sketch is very open to feedback — I’ve had the pleasure to post 2 comments on their board and they quickly fixed my issues within the next month.

At the very least, I suggest that you at least give it a try. It’s totally free to try and it costs 49 bucks if you like it. It’s a steal!

http://www.bohemiancoding.com/sketch/