Sketch 3

June 15, 2014

Sketch Icon

A number of years back I came across a hybrid vector/bitmap drawing app for Mac OS X called DrawIt. It combined non-destructive vector drawing tools and powerful bitmap filters. This seemed a perfect combination for icon, user interface (UI) and app designs in the early world of iOS. DrawIt however suffered from a number of issues which prevented it from becoming more than just another promising drawing app.

DrawIt App

Fast forward about four years and the developers of DrawIt, Bohemian Coding, have released the the third version of the spiritual succesor of DrawIt, Sketch. It is a great app for design in general but really shines for user interface and screen based design.

For years Photoshop has been the tool of choice for most UI designers. Photoshop is a fantastic all round tool but it is not geared specifically towards UI design and this is where Sketch fits in perfectly.

At its core Sketch is purely vector based, you could argue that it is actually closer to Illustrator than Photohop in this respect, and this is one of Sketch’s biggest strengths.

The first thing that you notice about Sketch is the interface. It is simple and focussed on the task at hand. There is no clutter with unnecessary options or tools, but don’t let that fool you. Behind the simplicity lies a powerful and sophisticated graphics application.

Precision

Sketch and resloution independence

In a world of increasingly different screen resolutions, designers have had to change their way of thinking and working. Gone are the days of creating a design which works at the standard 72 dots per inch.

In the case of app design this can mean creating multiple different versions of the same image. Resolution independent artwork has become ever more important, therefore creating non-destructive vector artwork allows us as designers to easily resize images for different devices.

Whilst Sketch’s vector tools may not be as powerful and sophisticated as those found in Illustrator they are perfectly suited for the task at hand. Non-destructive Boolean operations allow for the creation of sophisticated shapes from common primitives. Precise control of shapes can be achieved through Sketch’s contextual left panel. This allows you to ‘design by numbers’ which allows for pixel perect control. This is particularly important for lower resolution screens/artwork.

Artboards

Sketch’s artboard system is perfect for mobile app design. You can setup multiple artboards of any size, a feature which has been possible in more recent versions of Illustrator. Artboards can be divided across multiple pages. This is useful to organize and visually create structure in a project.

Sketch Mirror

With purchase of the additional iOS app Sketch Mirror you can easily view your artboards on iOS devices as you work. The latest version of the mirror app works flawlessly, removing some of the frustrating bugs from earlier versions.

Exporting your Sketch designs

The export features in Sketch are a delight to work with. They remain one of its biggest selling points for me.

Anyone who has been involved with designing apps for iOS or Android will tell you what a chore creating the images for these can be. Often you will need to create multiple versions of the same image at different resolutions. Sketch makes this task easy through powerful export controls.

You can define anything you want to export from artboards in their entirety through to objects, groups of objects and custom defined areas. Add to this the ability to easily output each item at multiple resolutions and you start to get an idea of just how powerful this feature is.

Simply select what you want to export and then define resolutions you want and Sketch handles the rest. This even includes appending whatever identifier you want to the files (@2x etc.). Since Sketch is vector based this means you end up with the highest quality imagery at each size. It is huge timesaver especilally if for example you are dealing with Android and its various resolutions (ldpi, mdpi, hdpi, xhdpi, xxhdpi).

These are just a few of my favourite features of Sketch. There are numerous other cool features I could go into detail on, such as the built in templates for the likes of the iOS UI and Icons, CSS attribute creation, the super useful reusable symbols and more.

I really like Sketch and have been increasingly using it in favour of Photoshop. Recently, I have started transitioning as much work as possible over to Sketch. In fact I have re-created artwork for some ongoing projects in Sketch as I see it saving a lot of time in the future. Sketch isn’t a replacement to Adobe’s tools but is great app to complement them in the right circumstance.