Sketch: Why We Converted

 

Sketch has been around long enough to be considered the older, but still prepubescent, child in the relatively new world of UI/UX design tools. After its release in 2010 it got designers talking and fast became the shiny bandwagon with the FOMO licence plate everyone wanted to hop on. In fact, the bandwagon analogy needs reworking because Sketch was not a new tool serving an old purpose in a slightly improved fashion but rather a new tool making a flashy appearance in the young and energetic digital product world. Considering ourselves the hip yet still mildly reserved members of that world we observed from afar, reading reviews and blog posts generally titled with a variation of ‘Why I switched to Sketch’. It didn’t take long, however, for us to cave in and give it a try. We’re glad we did and it’s been an integral part of our UI/UX design process ever since. In this post, we will be going over what exactly Sketch is, the pros and cons of using it, and what lays ahead for tools in the same playing field.

Sketch is a vector based design tool that was built with the intention of making UI and UX design as easy, and as stress free as possible. Released only for the Mac OS platform, it placed itself snugly in a niche that was clearly long overdue a tool designed specifically to its needs. To expand, that niche was designers who found Photoshop too generic and too bloated to quickly mockup interfaces for mobile and web. When launched, Sketch greets you with a blank canvas flanked on both sides with an impressively minimalistic set of tools. But the minimalism is deceptive since there is a lot more lying under the hood - something you discover time and time again as you continue using it. Sketch is performant (since it is native), intuitive, and has behind it the support of a team that goes by the name of Bohemian Coding - a team that has thus far been agile in response to its users, and laser focused in its mission.

To understand what makes Sketch alluring enough to jump ship, we asked our designers and read other prominent designers’ reviews and came up with the following list:

Artboards:



Artboards in Sketch are very versatile and easy to work with. Having a bird’s eye view of the entire project and being able to quickly insert simple features wherever and whenever needed is crucial in UI design. Artboards can also be used for many different purposes such as testing out variants, iterations, and even states of a screen. On top of all this, Sketch is very lightweight and filesizes, no matter the number of artboards you put in them, do not bloat to gigabytes like they tend to do in Photoshop.

Built-In Templates:



As we mentioned earlier, Sketch was built from the ground up for UI design; more specifically for mobile and web UI design. This is clearly seen in the templates that come within the app. Templates pre-built for iPhone, and Android, and web screens are big timesavers when starting a new project.

Color Picker:



The color picker in Sketch is very handy (being accessible with just ctrl+c) and also very accurate. The zoom pop-up that appears gives you pixel precision with RGB values displayed live. Additionally you can pick colors that are not part of the application as well. Aside from that, the color panel is always on the side panel giving you quick access which is crucial when it comes to color.

Resizing Complex Shapes:

Resizing objects that are composed of many shapes gives funky, distorted results in Photoshop. Not so in Sketch. By simply selecting the group you can resize it to your heart’s desire and end up with exactly what you were expecting. Drilling down into a shape within a group is as easy as selecting and tabbing.

Symbols:



Reuseability is important in software UI design and Sketch has clearly taken that into consideration and given us symbols. Any UI element such as labels, icons, and modules can be saved as a symbol and stored in a library that can easily be organized into folders. These symbols can then be easily accessed from the Symbol button at the top panel.

Exporting:



Sketch, once again, lead the way in this category. Exporting in Sketch is simple and powerful, a duality hard to achieve. There are multiple resolution options (all perfectly suited for mobile and web) and a variety of supported formats, including SVG. It is as easy as setting the requirements and dragging out onto your desktop.

Sketch Mirror:

Sketch Mirror is an application that every mobile application designer should have in their toolkit. Previewing and swiping live between screens and artboards speeds up your workflow and doesn’t leave anything to guesswork.

This list is nowhere near comprehensive and we could go on but these are what stood out and drove us to start using Sketch. Once involved, we realized the community was fantastic and plugins of every kind were being developed and released constantly, always improving our workflow in ways we did not think possible. We still revert to the industry standard Photoshop for more detailed work and believe making use of multiple tools is the way to go.

It was difficult choosing which design application we should integrate first into Pixelworm but after putting much thought into it we’ve come to realize we share the same philosophy with Sketch, and chose, at least initially, to start with it. If you haven’t given it a try, we highly recommend going for the free trial. You won’t look back