• Elephants' Knowledge Base

Why Sketch is great for UI design

tools for designers

Developed by Bohemian Coding, Sketch is a tool centered around vector design. It’s new on the market and it’s getting plenty of credits from UI designers because it’s an awesome alternative to Adobe’s Creative Suite. While Photoshop was created for photo editing and complex graphic designs, Sketch focuses strictly on user interface design. It is not a bitmap editing tool. It does feature a pixel preview, but it is built to help you design interfaces for web and mobile, and icons.

Reviews show that many designers made the switch to Sketch after years of Photoshop. Dan, one of our designers, did the same thing. Here’s how he motivates his choice:

In a nutshell, the tool is easy to use. If you spend a couple of hours playing with the interface, you’ll get accustomed to its main features:

Easy Grids

  • you can set, add and modify grids on the fly;
  • you can ensure correct spacing and padding between elements by using built in guides. It also helps you measure shapes and space as you flesh out the UI.
Sketch1

Pixel Perfection

  • it helps you get pixels perfectly positioned within design.

Let’s take this scenario: you have a layer which contains pixel fractions in width or height, or isn’t positioned very well. In Sketch , you are able to click on Edit > Round to nearest pixels edge (or create a custom shortcut for it) and the whole layer will be cleaned up.

Multiple art boards

Instead of working on separate files, you can now explore different versions of your UI in the same screen; duplicating the content of an existing art board is a quick and painless process. This comes in handy when you’re creating assets or mockups for different screen resolutions.

Sketch-2

Symbols

Just as the Smart Objects in Photoshop, Sketch uses a system of grouped elements named Symbols that you can duplicate and modify simultaneously. However, the biggest difference is that a multitude of shapes can be grouped in a single object that can be edited separately, each with its own style.

Sketch-3

Text

Typography is one of the most important aspects of any interface or website.
A great feature comes from the fact that you’re able to add a certain style to a paragraph.

Multiple layer styles & CSS

Working with Layer Styles in Photoshop is great, but it’s a bit unsatisfactory if you need to apply multiple effects of the same style to a single object. With Sketch you can add an infinity of borders, shadows etc.
It’s important to highlight that objects are modified in a convenient panel filled with intuitive inputs that are reminiscent of the CSS style syntax. For example, being able to modify border radius of a rectangle on the spot can be a good way to save time.
By clicking right on the shape, and then on Copy CSS Attributes, you will get a correct CSS code which you can easily use in your project. There will be no need to write things from scratch.

Sketch-4

Item libraries

Sketch comes with a built-in library of elements that can be used for editing.

Exporting

You can easily export single objects, groups or art boards.

Sketch-5

Mirror

Things get even better as you can download the Mirror iOS app. This is directly linked to Sketch, so you can preview your layouts on a mobile device while you’re working on them in real time!

Conclusion:

Given that Sketch is very similar to Photoshop, designers should be familiar with the majority of features: keyboard shortcuts, layer blending, styles, blur, noise, patterns etc. The big difference between them comes from the fact that Sketch doesn’t have all the filters and photo editing capabilities. This is good news for UI designers who don’t always need them.

Although the app still has some bugs, the developing company does provide updates. There are many useful features, extensions and workflows available for Sketch. We covered just a small part of the tips and tricks list. Find out what best fits your needs and start enhancing your workflow by downloading the free trial version.