Why Sketch is currently my favourite software for UI/UX Design

 

When my fellow designers first approached me about Sketch, I reacted with the same uncertainty you might be feeling right now. Throughout my entire career as a web developer, there was only one software that everyone depended on to execute their creative vision: Adobe Creative Suite. 

Adobe Photoshop is an all-encompassing software that is used across many different industries, serving marketers, photographers, and UX/UI designers. For years, it dominated the market because no other product was worthy of entrance.

There’s also the saying, “If it isn’t broken, don’t fix it.” Despite the minor hiccups in Adobe’s software, it has a proven track record, which makes it hard for people to consider leaving it behind. 

User-Experience-Design-37.jpg

That was until a couple of years ago, when Sketch was introduced to level the playing field. It took several years to garner attention from its release date in 2010, but it has finally developed a measurable amount of brand awareness. Fast-forward to 2017, and UX/UI designers are becoming confident enough to make the switch.

Can Sketch Replace Photoshop?

It depends. In my case, I believe Sketch can meet most of my needs because I work primarily as a UX/UI designer. There is one significant difference between the two products. While Photoshop can be used by web developers, it certainly wasn’t made for them. Sketch was created exclusively for UX/UI designers and its visual appearance makes that clear. 

When I create a new Artboard in Sketch, my right panel immediately gives me premade canvasses for or iOS Devices and Responsive Web Design (Desktops). I can even work on multiple artboards in tandem if I want to see how a website might compare to a mobile version. All of these features can be replicated in Photoshop (yet) – I can certainly adjust my Canvas to accommodate each project – but why take the time? 

Even Adobe came out with a new product called Lightroom that was tailored to photographers. The company wasn’t in any way trying to draw attention off of Photoshop, it was just trying to better understand people’s needs. Most people realize that one is not an alternative for the other. But, the reality is that Adobe Photoshop is a massive program with equally massive files sizes. Some users even have trouble running the program if their PC or laptop isn’t equipped to handle it.    

Sure, photographers and web developers aren’t exactly comparable in this situation. Web developers do have the technology needed to run complicated software and manage multiple products. The overall point remains the same – each profession needs something a little bit different.

User-Experience-Design-27.jpg

That is why Sketch has become the perfect design tool for developing user interfaces. Let’s take a look at a few more of its added bonuses. 

What Should I Expect?

Right off the bat, I can tell you that Sketch will enhance your workflow by saving you time. It is also cheaper than Photoshop if you’re sick of following a subscription model. Instead of paying month-to-month, you pay $99 one time to use the program.

When you work in the designer world, you don’t really have a choice – you have to bite the bullet and pay your monthly subscription just to do your job. Not anymore. 

Before you read any more about the wonders of Sketch, I should clear the air: it is only available for Mac users. If you’re thinking of making the switch but you are running Windows, you are out of luck for now.

Whenever I am editing an image in Photoshop, I am working with pixels in a bitmap. That means if I zoom too far in on my image it will probably start to blur. Illustrator includes some combination of pixel-based bitmap and vector images, giving me a little more flexibility.

Sketch, on the other hand, is completely vector-based. I can stretch out whatever I am working on as much as I want without having to worry about the quality of my design. If you’re just starting with sketch and you want to see the difference, the program actually allows you to switch from vector to pixel mode. 

I can also resize my images without having to pull out my smartphone calculator – the program will do all my calculations for me. Let’s say I’ve been hired to make a design compatible with the iPhone 6. The artboard is 375x667 points, and I want to make a header one-fourth the size across the top.

User-Experience-Design-23.jpg

I instruct Sketch to divide the dimensions into four (375/4 and 667/4) and voila! The new rectangle is perfectly aligned with the background, and I didn’t even have to do basic math. This is extremely handy when you are a UI/UX designer and one of your main goals is to make sure everything lines up perfectly. 

A Directory of Fun, Free Plugins  

Finally, I want to speak to some of the great plugins that Sketch has to offer. These are extensions of the program that will make simple but time-consuming tasks almost automatic. Everyone has their preference, but I find myself using Craft, Rename It, and Segmented Circles the most. 

Craft is actually a suite of plugins by InVision that works with Sketch seamlessly.  I can immediately place any content or image I want without having to copy and paste or use an outside application.

I can even pull photos right off the web without having to leave the program. These plugins allow me to create perfectly-sized textboxes and icons, with just the right amount of space from each border.

That’s right – I can see the exact distance between two objects, or one object’s proximity to each side, at any given time. This comes in handy later when I am in the coding phase and need my margins to 100% accurate. 

I am not suggesting that Sketch will replace Adobe Photoshop, but it is a very viable substitute. It was made to spare web developers from performing tedious but important steps in the design process.

At the end of the day, it is going to come down to the specific needs you have and how open you are to change. 

 
pierluigi giglio