Why Sketch is the Perfect Tool for Interface Design

Sketch is a lightweight vector tool that was made for designing interfaces. As a professionals we’re constantly trying to save time by reducing redundant and unnecessary work. Sketch is equipped with powerful features and specific tools that make designing web and mobile interfaces a pleasant process.

Price is another huge benefit of Sketch. It’s priced at a one time cost of $99. Comparing it to Adobe’s single application plan which is $40/month makes it a no-brainer. It’s not a surprise that Sketch quickly became designers’ best friend.

What I liked the most when I opened Sketch for the first time was how simple and clean the interface is. The toolbar is completely customizable so you can easily add the tools that you use the most or remove the ones you don’t.

Sketch is super lightweight (~38MB) compared to the Photoshop (~2GB). It is 100% vector which’ll make your life a lot easier when it comes to the non-destructive tweaking. You’ll also not have to worry about all the different web, iOS and Android sizes.

Vector graphics produces smaller files which improve performance altogether. If you’re not using a lot of big images you will hardly get a file that is larger than 50MB.

Inspector

The inspector on the right (see figure 1) is intuitive and is divided into a couple of sections. Here you can adjust the settings for the current layer such as position, size, fill, border and more.

Figure 1: Inspector

One of the best things in inspector in my opinion is the use of math and suffixes. This way you can quickly change the position, size and any other attribute without using brain power to do math. The suffixes lets you select the anchor point from where the size will be adjusted.

Artboards and Templates

Artboards are a fixed frames that you can place on Sketch’s infinite canvas. There are a lot of various pre-defined Artboard sizes for you to choose from (see figure 2), such as iOS devices, responsive web design and more. This will kickstart your project right from the Inspector.

Figure 2: Artboard Presets

What’s truly handy are the different templates that comes with Sketch. From iOS and Material Design components to app icons and web design Artboards.

Symbols and Shared Styles

If you’re an interface designer you probably know how many times we have to deal with identical elements. Duplicating these elements is simple, the real problem occurs when you need to revise them.

This is where Sketch’s symbols feature comes in. Symbols are special reusable groups that are connected to each other. Changing various attributes to layers in symbols will update it everywhere. Symbols are local and can’t be shared between documents.

Shared text styles are very similar to symbols. They’ll help you organize your document so you’ll never have to worry about the text consistency throughout the document again.

Layout Grid

Sketch comes fully integrated with a powerful tool called Layout Grid (see figure 3) which is handy when designing consistent and pixel perfect interfaces. The column and gutter width are easily adjustable and can be changed on the fly.

Figure 3: Layout Grid

Preview on a Device

As interface designers it’s important to view the designs on the native devices. A lot of times something looks great on a large monitor but doesn’t seem right when looking it on a smaller devices such as iPhone 4.

You can easily do that on the go with a Mirror feature. All you need to do is to download an iOS app “Sketch Mirror” from the App Store and open it on the device. Just make sure your mobile device and computer are connected to the same wireless network. If you would like to work offline you’ll need to connect your device with your computer via cable.

Exporting

Exporting is one of many well-thought-out features in Sketch. If you migrated from Photoshop you know how this tool can save you a ton of time and painful headaches. Exporting assets is really simple — you just need to make exportable layers and that’s it (see figure 4). Another thing that’s useful are the slices. A lot of times we’re designing interface icons which needs special padding around them. Slice provides just that.

Figure 4: Exporting

Plugins and Community

Last but not least is the Sketch community. I haven’t seen such a powerful community anywhere else. Sketch community is awesome because of the people that are making Sketch better by either building useful plugins, Slack channels and helping each other by writing articles and providing delicious freebies.