Stepping up to Sketch

It wasn’t so long ago that most web designers would use one of two programs; Adobe Photoshop or Fireworks, but with the 2013 announcement that Adobe Fireworks would be phased out, web designers started to look elsewhere.

Cue Sketch!

Sketch has been gaining ground since it’s 2010 release and is the ApplinSkinner choice application for all our digital prototyping and mock-ups. When I joined ApplinSkinner in October last year, I had only used Sketch as a free trial to see what it could do. I had been using Adobe Photoshop since around 1996(!) and dipped into designing with Fireworks on occasion. It turned out to be a bit of a challenge to start at a new agency and learn a new design program all in one go, but it was a challenge that I was keen to take on, as I was already aware of the benefits of using Sketch for large multi-page, cross-platform designs.

Sketch has been designed specifically for digital designers with a streamlined interface and intuitive keyboard shortcuts. It has a layering system like Photoshop, sizing and border controls similar to Fireworks and the Artboards of Adobe Illustrator. It’s full capabilities go on from there with features that can truly streamline the design process.

Artboards

Artboards are simply your blank canvas for design, Sketch allows you to have multiple Artboards within one page. If you need to design for the latest iPhone for example, you can choose the correct size Artboard from a list of iOS devices. These are built in and can be created in a couple of clicks at a range of standard sizes. You can also mix and match to your hearts desire, it’s always nice to see your design for desktop, next to your design for tablet and mobile and this helps to ensure that your responsive designs use the same elements across the board.

Templates

When showing how a design uses the standard iPhone keyboard, you can open a template and grab the relevant designs. There is no need to reinvent the wheel and create your own or search the web for the latest version, templates are just a couple of clicks away. You can also create your own templates, we’ve used this feature to set up standard banner sizes for our marketing campaigns.

Symbols

If you have lots of elements in your sketch file that are the same you will benefit from using symbols. You can create a symbol out of any element, text, icons or images. These are stored on a symbols page which contains all your master elements in one place. Instances of the symbol are then what you see in your design work. When you edit the master symbol, this will change across all instances of the symbol.

As an example of how this can be used with great effect is the process of going between wireframes and design. Early on in the design process, at wireframing stage, we use standard icons as placeholders, whereas we like to create our own bespoke icons for our design work to make sure the whole design is on brand for our clients. So before we produce a final design, all the icons will need updating. If you imagine an icon used on 20 different Artboards in 3 different places on each that will need updating, being able to just change the master symbol to change them all is a major advantage.

Symbols don’t have to just be one element, we use symbols for many areas of a design, headers and footers or any panels which need to be shown across multiple pages or in multiple places.

Symbol overrides

If you use text or images within a symbol you can override each of these elements in every instance of the symbol if you wish. Change the original symbol and the overrides will still be in place but the design will change. We think this is perfect for lists. We have recently used this feature for product listings on a tool hire app and for holiday listings on a responsive website design.

Nested symbols

Symbols within symbols; override options where symbols have been used lets you swap out the symbols or turn them on and off in each instance. This is a fairly new feature and it literally blew our minds! We will be using this a lot.

Export options

Fantastic for build, Sketch can export whole pages or elements of a page in layers or groups. By default everything will be exported at 1x or 100%. When designing for mobile or retina displays you can export at 2x. You can also export to a specific size by typing into the 1x / 2x box a specific width or height; 100w would export an element in proportion to 100 pixels wide.

Craft plugin

Craft plugin doesn’t ship with sketch but is made by the lovely people who created InVision. This enables you to supersize your sketch so you can do the following;

Data

If you need fast prototyping with realistic content you can use the Data section of Craft to create your content. Select your images on a page and at the click of a button import photos from a range of sources (this works with text too!).

Library

By clicking ‘Create Styles’ this will collate all your document colours and fonts used into a style page. Navigate to this page and use it as you would do the symbols page and this will change colours and fonts globally across your document. We find that this is also a great feature to hand to our developers with all the colour and font information they need when they start build.

Sync

We use Invision to share our design work with each other and our clients. Invision allows us to collaborate on our design work, make comments and link screens together to give an impression early on how screens will flow and look on a variety of devices. Sync allows you to sign into InVision through Sketch/Craft and enables you to sync the designs to Invision. Make changes and sync again, this will update the designs on Invision with a new version in an instant.

Pages and versioning

Last but not least; Pages and Artboards and version history too – a whole responsive design in one document – amazing!

I could go on further, but perhaps I should save that for another post!



After only a few months of using Sketch I can say that I am glad that I stuck with it through the sharp learning curve of the first few weeks. Photoshop still has it’s place as a brilliant image editor but Sketch with all its symbols and plugins truly make it, in my opinion, the leading application for digital design.