Design

From Photoshop to Sketch

About one year ago I stopped using Photoshop and switched to Sketch, why? My biggest issue with Photoshop is that it’s not a focused tool; Adobe seem to be constantly adding features that aren’t related to web and mobile design. Most recently, Photoshop added 3D Printing. This makes the application slower and more complicated. Enter Sketch. Sketch is a lightweight, focused tool that is perfect for designers.

Sketch has dramatically impacted my workflow, the biggest change being that I now wireframe, mockup and final design all in one app. Meaning that I can build upon and evolve a single design file, instead of starting afresh as I switch between applications.

In this article I’m going to talk about five key features of Sketch. I hope you enjoy!

1. Artboards and Pages

Sketch has an infinite canvas, but within this canvas you can create a series of fixed frames called ‘artboards’. I use artboards to replicate screen sizes, so if I’m designing for iOS, I’ll set the size of each artboard to the screen size of an iPhone 5 (640 x 1136px). Pages are multiple infinite canvases inside one document.

When designing a mobile app, I use pages to define the different sections of the application. For example; one page for ‘settings’ and another page for ‘edit profile’. Then within each page, I lay out the design using artboards, so I can clearly see how each screen flows from one to another.

2. Sketch Mirror

Designing for mobile? Sketch Mirror for iOS allows you to instantly preview your artboards on an iPhone, iPod Touch or iPad. It updates auto-magically and you can even preview iPhone and iPad artboards at the same time!

Working with Android? You can use a plugin called Sketch Preview with Skala Preview.

3. Symbols

Symbols are reusable objects, but what makes this feature powerful is that when you update a symbol, it’s updated everywhere throughout your document! Too good to be true, right? For example, if I’m designing a website I’ll be reusing the navigation across multiple screens.

Previously, if I updated the navigation I’d have to update every screen. Not with symbols, as it updates all the navigation elements for you. Saving you precious time.

4. Exporting

If you’re a photoshop user you’re going to love this section. You’ll be relieved to know that exporting in Sketch is easy. You can either export whole artboards or individual layers. Adding a slice is as simple as selecting a layer and clicking ‘make exportable’.

If you design for iOS and Android, you’ll know that you need to export your assets for a range of resolutions. Sketch has your back. You can export layers as @2x, @0.5x and @3x with a single click! As Sketch is a vector tool, there are no scaling issues.

You can even drag layers to the desktop to export!

5. Plugins

Sketch has a great community behind it, and as a result, there are some great third party plugins available to supercharge your Sketch experience. There are many different plugins, and there isn’t time to talk about them all, but one that is definitely worth mentioning is Sketch Measure. Sketch Measure allows you to quickly add specifications to your design work; developers are going to love you! 🙂

If you have any questions about Sketch, just tweet me or send me an email. Thanks for reading!

Subscribe to our mailing list