[#designtools] New kid on the block – Sketch!

10.09.2014 >Bild

Small design job coming up. Haven't done screendesign in more than a decade. Scary business. But when starting new, then why not go full monty: the new kid on the screendesign block, Sketch, gets raving reviews so let's give it a taste and a YARR (Yet Another Raving Review)!

Design

Sketch sells as a design tool. Their tag: "Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally you can focus on what you do best: Design." That means, we're pretty much competing with the Photoshops and Illustrators of this industry. Not the slightest contenders so their game better be good. And as you imagined by now: it is!

I'll list some of sketch' features that make the app shine!

First off, using the Sketch, you just very subjectively feel the application is made by people that design themselves. It's not meant for photo editing, video editing, writing texts, do layouts, animate, code, wireframe. It makes the application lightweight and focused and that's good!

Vectors

Sketch puts quite a bit of focus on vector assets. Bitmap content is definitely welcome, but vectors are at the heart of the workflow. The reason is clear; with more and more device resolutions it makes sense to have your visual assets rendered out at different resolutions. The resolution independent character of vectors is a perfect candidate for that.
There's a range of vector editing tools available inside of Sketch. Extended vectors are surely more at home in Illustrator (as image editing belongs to Photoshop) as in Sketch.

Pages and Artboards

Normally, one project is one document in Sketch. One document can be subdivided in 'pages'; one page for each page or screen. Every page can then be subdivided again in several 'Artboards'. The artboards can be used to e.g. host different resolutions (website mobile portrait, website mobile landscape, tablet, desktop, desktop HD, ...). Quite often artboards are also used to show different states (logged in, dropdown expanded, animation steps, ...). It's wonderfully convenient to have your whole project consolidated in one document. And since Sketch is highly focused on vector graphics, the filesize is very manageable!

Content management

The elements you put on the screen are supposed to be organised in groups and layers. That makes asset management pretty workable. There's a lot of double clicking around on different elements, since that makes you drill into the contents of a group. A group of item is an object itself on which you can apply visual effects. Typical example would be where you just apply one shadow on a group of several textfields and all containing textfields receive that shadow. Very quick indeed ;)

Re-use

Re-using elements and properties is at the core of using Sketch. Groups of items can be packed in 'symbols' and reused. Change the symbol once, it updates everywhere. You can also set common 'layer styles' and 'text styles'. If you e.g. intend to use a particular color and a particular dropshadow throughout your document, put it once in a layer style, then apply it everywhere. Same goes for text styles: you can define different styles and just apply them to textfields. Optionally, you can even name these styles cleverly with 'h1', 'h2' etc. If you've ever had to change the font of an almost-finished design in a 200 layer PSD, you'll appreciate these features massively!

The returning core properties for visual elements in Sketch are 'opacity', 'blending mode', 'fills', 'borders', 'shadows', 'blur' and 'reflections'. There's a 'blur' option called 'background blur' that simulates the iOS effect where the contents behind a translucent object are blurred. When the background content gets an update, the background blur effect updates in real time! Convenient!

Community

The community around Sketch seems very vibrant. There's loads of symbols, templates & plugins available, most for free! The PlugIns allow you to relatively easily script repetitive or annoying tasks.

For a few more $$$, you can buy an iOS app that collaborates with Sketch: your designs are being mirrored directly on the device you're designing for so you have an as-real-as-it-gets preview of what you're doing! Very powerful stuff!

Assets & Export

Now, Sketch's output module makes it extremely straightforward to export your assets. Every item (or group of items) can be labeled for export. Each item can therefor be exported in several versions (.svg, .png, .jpg, ...) and several sizes (0.5x, 1x, 2x...). Then you can easily export part of the project or everything at once. The asset settings (including the output path) are an integral part of your project. That makes updating your graphics in your workflow very convenient (when properly set up).

In addition to asset export, Sketch also produces PDFs, jpgs or pngs of the whole project as a reference! Since the methodology is quite different from Photoshop, you can't import PSD's though copy pasting from Photoshop and above all Illustrator works flawlessly. There might be a bit of a hiccup if you have to co-work with Photoshoppers, but that's just the reality of it.

You?

There's of course a bunch more features and details, but this should get you started for now! 

Above all, I'm very curious to hear what you've done with Sketch in the meanwhile, what your opinions are, little tips and tricks, hidden shortcuts and general feedback! So visit our Facebook Page for comments!