Making the switch to Sketch

Ollie's Photo by Ollie Jackson


As a designer and front-end developer, I would always advocate using the tools, software and services that work for you, irrespective of what the design community is encouraging you to adopt. 

Ever since Sketch (the Mac-only design tool from Bohemian Coding) arrived on the design scene, the Sketch vs Photoshop debate has long raged. Prior to Sketch’s arrival, Adobe Photoshop was widely used for all things design, from user interfaces to iconography - despite its original purpose of facilitating photo editing. 

Sketch has successfully challenged Photoshop with it’s intuitive interface, easy exporting and extensive plugin library. The likes of Apple and Facebook now provide Sketch-compatible UI design resources. 

From here-on-in, I’ll dive into the features within Sketch that I appreciate the most when I’m designing static comps or building the components of an interface.

Symbols

Symbols allow you to group elements (layers?) together and drop them anywhere within your document. Any changes you make to a symbol, will be replicated across your document - saving you time and ensuring your designs remain consistent throughout. 

Symbols are ideal for compartmentalising your design and create structure to your work. They make Sketch an ideal tool for UI design. Sketch takes any Symbols you create and places them into their own Page - which in effect, builds out a components library, ready for export. 

Artboards and Pages

Designs evolve. And as you work though concepts and revisions, keeping a handle on everything you’ve designed can be tricky. 

In practise, I tend to use Pages to group designs by feedback rounds. That way you can keep all your Artboards (from each round) in one document, but without having to see them all on the same screen as you work. 

Styleguides and Symbols are contained within their own pages too.

Text styles 

Text styles are a dream. By defining your typefaces, sizes and line heights with text styles, you can apply said styles across all of the copy contained within your documents. 

Text styles are particularly useful when you want to see how your designs would look with different font pairings - without the arduous task of combing through all of your designs, updating each piece of text individually. Much. Time. Saved.

Sketch Mirror

Sketch Mirror allows you to preview your designs in the browser or via an iOS device. The iOS app is an ideal companion to mobile design - because you can work on your design whilst viewing (and interacting) with them in situ on your device.

It is however worth noting that Sketch Mirror isn’t as reliable as it ought to be. So be prepared have to reload the app once in a while!

Sketch Cloud

At present we use InVision to upload and share concepts with clients during the design phase. Sketch Cloud is currently in beta and provides similar functionality. You can share your Sketch documents via a unique link (with the option of password protection) and gather feedback by letting your client comment on individual designs.

I’ll be interested to use Sketch Cloud when it is out of beta.

Grid Layout

Irrespective of how free-form or abstract your design may be, you’ll still need a grid in place for creating proportion. 

A word on licensing…

A Sketch license can be purchased for $99, is valid for a year and contains 12 months of free updates - after which time you will need to renew your license. You can use Sketch across multiple devices or share your license by adding more seats, at an additional cost. 

You can also use Sketch on a trial basis to see if it works for you and your workflow. 

Happy Sketching!
   


Ready to get started on that new web project?
Let's get to work! →