Sketch 3 The Hidden Diamond for UI/UX

Yes, I’m not the first person to talk about the benefits of Sketch 3. But I’ve been finding that a lot of UI/UX designers are somewhat hesitant to switch from the more commonly used tools such as Photoshop or Illustrator to the Bohemian Coding platform.

Let’s be honest, Photoshop is a great tool, the Swiss Army knife of design you could say. You can do almost everything with it, from photo editing (which was its main purpose) to any kind of design or even 3D printing! It’s the best for photo editing, that’s for sure, but in many other areas it can be somewhat frustrating.

Let’s look back a few years. The alternatives weren’t very attractive so Adobe managed to position itself firmly in the heart of every designer’s computer. Along with Photoshop and Illustrator, they also offered Fireworks (previously owned by Macromedia and later deprecated) as their own UI/UX centric tool combining both vectorial and bitmap graphics but honestly, I can’t remember anyone but developers using it. It was a product tailored for developers while it’s somewhat obvious that design tasks should be driven by designers. Open-source products such as Gimp were insufficient alternatives in the sense that they were made for a bigger audience than just designers and so they lacked a lot of functionality. In summary, it was better to just stick to good old Photoshop or Illustrator for your UI/UX purposes.

Switching to Sketch. A small effort with a lot of benefits.

The first time I installed the trial version of Sketch 3 on my laptop it was a nightmare. I couldn’t understand anything even though I was an advanced user of Photoshop with more than 3 years of UI/UX practice. I didn’t even know how to create a new file. My brain was accustomed to pop-ups asking me if I was going to work in millimeters, pixels or inches; in CMYK or RGB; in which density… but in Sketch nothing like that happened. After clicking “New” a new window came up with no pop-ups and no questions at all.

It was difficult to get used to the lack of questions and parameter configuration, but not because Sketch is badly done, but because I was used to working in the way Photoshop forces you to. If you are thinking in terms of UI/UX it’s obvious you are working for screen media, hence, you’re thinking in RGB color pallette and the pixels and density of your designs are variable. You only have to remember your lowest resolution and anything else from here on will look nice.

Back to Photoshop again. I was used to having one file per screen, one big canvas with all screens on it or a single file with the original size and a lot of folders within it, with one screen per folder. In the end, this translated into huge files (think about gigabytes) and that’s something that quickly affects your computer’s performance. I had to wait almost 10 seconds to duplicate a layer in a Photoshop file that had more than 3,000 layers, and if you start adding up 10 seconds for every single tiny change you do you’ll end up wasting a lot of time.

Sketch is quick, Sketch is fast, and everything is where it should be. You only have one window and lots of artboards on it, you can even build “flows” positioning your screens in a certain order for your own reference, but the best feature is that even if you have tons of screens and lots of layers it remains amazingly fast. And when wrapping up and saving, the file will be much smaller, making it easier to share and to store. Having a tool specifically made for UI/UX is better that having one for all purposes. Sketch is lighter and more efficient and it has everything you need to build wonderful interfaces. You think that’s good enough, right? Well, there’s more. Sketch uses OSX native interfaces for storing your work in the cloud and in your folder structure and it even supports a history. If the app crashes you don’t lose anything.

I could compare Sketch to Illustrator in terms of how fast the app moves, but the Bohemian Coding software even beats this offering from Adobe. As Swiss Style stated back in the 50’s, Less is more, and now that’s happening on interfaces as well.

Photoshop is still needed, and you’d like to keep it.

As I said before, we used to work with Photoshop for both UI/UX, bitmap editing or vector drawing. Sketch meets any UI/UX need with vectorial approaches fully covered, and it supports bitmap but unlike Photoshop, works in Vector base, so bitmap editing is quite limited here. Photoshop will give you better control of your bitmap files and the key point is to mix both of them to achieve the best design results.

Are you a developer? You might be interested in Sketch as well…

Developers until now have always received raw PSD or AI files to extract their assets from but the designers community is evolving and now you’ll have to deal with some .sketch files to remain up to date.

Sketch currently doesn’t offer any free option for developers but there are some alternatives you may want to check. Zeplin.io guys, for example, built a platform for sharing Sketch artboards between designers and developers. It’s currently in beta phase but their first release should arrive soon. Zeplin allows designers to quickly and easily share their artboards and define guidelines in colors and typography. It also enables developers to quickly check those guidelines as well as the CSS rules for each item of the artboard. It has a native OSX app and a more limited browser viewer. So far the beta phase has been free by invitation only, but once they release the v1.0 it will become as service with subscription (prices hasn’t been revealed yet).
Besides Zeplin.io the only way to open a .sketch file is by having the native app, that means a 99$ cost for a single user Sketch license. If you have some skills in UI you might be interested in purchasing it, otherwise its price may not sound quite affordable just for looking at some specs.

But hey! there’s another solution. Have your designer more involved and let him share with you the specs by using one of the scripts made for this purpose (just add filters and search for “Collaboration”). Be sure you share these resources with your sketch designer!

Creative Cloud recently made a free account which allows users to upload .psd files and use their Extract functionality which allows developers to also check the design guidelines and even export assets directly from a web browser (no Photoshop app needed). The cloud space included is limited for free accounts but enough for almost any full project, and you can always get more space by archiving your old files you won’t use anymore.

Is the change worth it?

Is pretty clear that under my point of view Sketch is something you should stick to if you’re going to design user experiences and interfaces. Don’t be afraid of changing, besides the small differences, you can get used to it within a day and you’ll find each day a new thing that will just add more love.