Design

Interface design: 10 good reasons to switch to Sketch

Update: Today our teams use and advise the tool Figma. From mockups to the design system, it's the most comprehensive tool we've tested so far. If you want to know more about how we use Figma, especially for creating a design system, we recommend this article: Create a design system adapted to each client when you are an agency.

You are a seasoned UX/UI designer. Photoshop and Illustrator are your weapons, and you master them to perfection. You produce screens, icons, wireframes... in no time, and you are wondering: why change? Why sacrifice my efficiency and my well-established workflows in favor of a new tool, which will have to be learned and tamed, to finally produce the same things?

 

I said the same thing to myself when I first heard about Sketch. Photoshop and Illustrator met all my needs, and while I wasn't against the idea of adding a tool to my portfolio, the praise I received wasn't convincing enough to make me take the plunge.

 

That all changed two weeks ago when BAM got us a Sketch license. Within a few days of use, I was won over. Why, you ask? Here are (my) 10 good reasons to switch to Sketch

 

Reason #1: All vectorial and non-destructive

 

Sketch is primarily a vector tool, which means that an element can take any size without losing quality. In the digital age and multiple screen resolutions, it is a real advantage to be able to make models without having to worry about the final dimensions.

 

But vectorial is absolutely nothing new, and Illustrator already does it very well., you will tell me. True, but with Sketch, I can change all the properties of a shape (up to the radius of curvature of a corner and the blur effects applied) on the fly, directly in the inspector, something that neither Photoshop nor Illustrator allows. No need to destroy the shape and then recreate it, a real time-saver!

 

Bam tech design ux ui sketch

 

Reason #2: Infinite canvas, infinite number of screens

 

Sketch's canvas is endless, and can contain an infinity of artboards, which means that it's easy to centralize all your screen mockups in a single file, even on very ambitious projects. In comparison, the Illustrator canvas has a pre-defined size and cannot contain more than fifteen artboards without seeing its performance suffer a major blow. Photoshop incorporated an infinite canvas in 2015, but Sketch goes a step further by also offering pages, each containing its own infinite canvas and its own artboards, for greater organizational flexibility.

 

Reason #3: The export function, so simple, so effective

 

It's one of Sketch's most magical features. Thanks to it, I can export the same asset in different dimensions in just a few clicks! And that's whether it's an entire screen or just a given selection - icon, button, header...: just click on “make exportable” at the bottom of the inspector, choose the resolution and the export format, and that's it!

 

Bam tech design ux ui sketch

 

Reason #4: Quick and easy preview with Mirror

 

Sketch provides Mirror, a quick preview tool, free of charge. Install the application on your iPhone, and immediately check the rendering of your screens directly on your device. Perfect to put them in a situation as quickly as possible! Mirror also works in your browser if you are on the same local network.

 

Reason #5: Symbols to stay consistent

 

Remaining visually consistent to offer a better user experience: that's every UX/UI designer's fight. And it's extremely easy with symbols. Any element (icon, menu, header, or complete screen) can thus become a symbol, infinitely reproducible, and whose manipulation of the master immediately affects all other instances of the same symbol. The icing on the cake: the easily replaceable text fields and the possibility to prioritize the symbols by simply adding a '/' in their name.

 

 

Reason #6: Smart Boolean Operations

 

When I discovered Boolean Operations in Illustrator, I think I cried (well I'm exaggerating, but it changed my life!). But I have always been frustrated by their irreversibility: once a Boolean operation is done, it is impossible to go back to it in a simple way. With Sketch, no more worries: the shape resulting from the operation keeps the original shapes, which can then be changed, moved etc.? to change the final shape. You can even change the Boolean operation applied, or even delete it!

 

Bam tech design ux ui sketch

 

Reason #7: Mathematical precision

 

Shape position and dimension fields on Sketch include simple math operations: + - */, and even the percentage. You can thus place an element precisely, or simply put it at the right size. A small plus: grouped shapes will take the overall size of the group (not of the screen) as the basis for calculating a percentage. Making an icon whose height is 50% of the button in which it is placed, which itself is 60% of the width of the screen, is now possible!

 

Reason #8: Direct access to colors

 

On Sketch, the pipette allows us to retrieve an exact color to the pixel, anywhere on the screen, even outside of the software. What more can I say?

 

Bam tech design ux ui sketch

 

Reason #9: Simple Gaussian blurs like hello

 

With the arrival of iOS 7, the new fashion is to apply a Gaussian blur to a portion of the background. An effect that I find most beautiful, and the most tedious to achieve in Photoshop. You have to duplicate the background image, make a shape, make a clipping mask, and add a filter that takes forever to apply and that slows down the whole software. Sketch does all of this as a simple option in the Inspector, without too much impact on performance - as long as you don't use it all the time!

 

Bam tech design ux ui sketch

 

Reason #10: Easy integration for developers

 

At Bohemian Coding (the creators of Sketch), they understood thata designer works very often with developers, and they thought of them. Sketch thus offers the possibility to simply export the CSS of an element or even an entire screen. Sketch also has a whole ecosystem of plug-ins and additional tools that simplify the onboarding workflow for developers, such as Zeplin, which allows them to simply read the dimensions and colors of elements.

 

Bonus round if you are still not convinced:

 

Bonus Reason #1: The Price

 

The Sketch license only costs $99. If you stop there, you will have Sketch for life but without its updates, otherwise, count $99 per year to take advantage of the latest versions of Sketch.

 

In comparison, a Creative Cloud subscription for Adobe Suite software is worth around $287? the year, and it is mandatory otherwise the software is blocked. If you want to save money, the choice is quick.

 

Bonus Reason #2: Lightness

 

Sketch is much lighter than Adobe software: the application takes 47.5 MB of disk memory while Photoshop takes 2.11 GB. Likewise, it is much more efficient in RAM: by having both applications open with an empty artboard, Sketch takes 98 MB compared to 661 for Photoshop.

 

 

Bonus Reason #3: The ease of handling

 

I opened Sketch for the first time two weeks ago. In less than a day I had found my bearings, in less than two, I was as productive as on Photoshop or Illustrator. The Sketch interface is extremely intuitive, especially thanks to the inspector that brings together all the modifiable properties of an element, which allows a very short learning time, despite the quite different operating logic of the software in the Adobe suite (especially in terms of shortcuts)

 

Not everything is rosy in the best of all worlds

 

Like any tool, Sketch has its limits. Already, it's only available on Mac, which is a shame. And it is a tool that is really and resolutely designed for interface design - which is both its strength and its weakness. It will thus never replace Photoshop in image processing, or Illustrator in certain vector applications (I find in particular its pen tool - here called vector - a bit less efficient, even if it is perhaps only a matter of habit). And finally, it seems that Sketch is still suffering from some bugs and stability issues, even if the Bohemian Coding team is very attentive and responsive when it comes to fixing them.

 

 

Sketch is, in my opinion, a combination of the best of Photoshop, Illustrator and even Keynote, designed and designed for interface design, which makes it a very effective - even indispensable - tool for any designer. Hopefully, the reasons I've mentioned today will at least get you to download the trial version so you can make up your own mind about it - but I'm sure you'll find your own X good reasons to switch to Sketch soon enough!

 

 

Did you like this article?

Come and discuss Sketch and UX design with us!

Designer UX/UI ?

Rejoins nos équipes