Sketch is a new design application revolutionising the way digital designers work. Our senior designer Joe Parker made the switch to Sketch for our website design projects in place of the old industry-standard Adobe Photoshop. Here’s how he’s found the change…

If you’re anything like me, you’ll have bounced around design programs over the years on your trusty Mac when approaching interface design projects. Adobe Illustrator has great vector capabilities, lighter file sizes and ease of producing SVGs, however it fell down on pixel perfection and file structure. Good old trusty Adobe Photoshop is useful for its layering, smart objects and typographic organisation, however this in turn brought it’s own flaws due to it primarily being an image editing tool; files soon become bulky and a nightmare for the development team to open. We made do but there has never really been a well designed, interface specific solution.

For a long time I yearned for a design program that would overcome these issues all within the same program and lo-and-behold, it finally arrived and it’s called Sketch and it’s glorious. It’s Mac only and it’s fast becoming a major player in the digital design world, rivalling creative software giants Adobe.

Sketch has been around for a while now and the more I read about it, the more I knew that we had to make the jump from Photoshop as our go-to design tool, which now seems clunky, cumbersome and ill-suited to the role of interface design.

Learning a completely new design tool is a nervous time for any designer but the change had to be made for the sake of efficiency and the transition was a surprisingly smooth due to the intuitive nature and well considered design of the program itself. I will list out some of the key benefits of Sketch below and try to convey how these have made life easier and more efficient for the whole team.

Benefits for the designer: 

Sketch is a vector based program, making everything infinitely scaleable, which makes it simple to export assets at twice the size for sharp retina displays, so no more blurry pixels, imagine that!

There is a fantastic support community around Sketch who are constantly working on neat little plugins to make life easier for the designer, whether it is style guide creation, content layout or even a simple and efficient way to consolidate the 11 shades of grey that have snuck their way into your design, Sketch has it covered. If you’re crafty with code, you can even build your own plugins relatively pain free, so it is incredibly flexible.

Sketch allows you to work on an infinite canvas and on infinite art boards within this, so you can quickly jump between mobile, tablet and desktop layouts, without waiting for clunky pixel based files to load – a big time saver.

One of the main ways Sketch differs from Photoshop is that it works very much like CSS with the ability to link styles for elements whether it be typography, form elements or button styles. The benefit of this is that if you need to suddenly make an update to a primary button style for example, it is only a couple of clicks away and it will change that element at every instance across your designs and, as many components on your style sheet will be dynamic, it won’t affect things like button content when you make that global change.

Shortcuts are heavily relied upon within sketch, so I would recommend putting the time in to learn the basics at least as this will save hours in the long run and, as the majority of these are customisable, soon enough you will be shortcutting your way to efficient design solutions in no time.

Another great feature of Sketch is the way it handles your typographic framework. By creating a typographic framework at the beginning of your design project, you can make global changes almost instantly by making a change to an H1 style on your framework styles sheet, for example, and then syncing it throughout your document, which will change every instance of this style globally across your project quicker than you can say “SVG!”

Sketch has a handy autosave feature which will help to give every designer closure on all the times that a Photoshop document has crashed and burned hours of delicate design work over the years (lost but not forgotten). This feature is really handy as Sketch can have it’s temperamental moments too but rest assured, it will all be there where you left off. One thing to be careful of is making sure that you make a copy of your master document as you don’t want to overwrite any core design files. However, Sketch archives every ⌘s on a project so you can roll back to it if needs be, so nothing can really get lost, phew!

Another time saver is that Wireframing and UI design can be consolidated under the one tool within Sketch. That’s good news both for your efficiency and the outgoings of your agency as our dedicated wireframing tool is now no longer needed for the basics, and you don’t need to open and close multiple programs anymore.

Benefits for the developer: 

As Sketch works very much like CSS it will be very familiar to your development team. A variety of plugins and tools allow clean CSS to be extracted straight from your designs, allowing your dev team to get precise effects, dimensions, sizes and colours. So no more opening of chunky ram eating PSD files and guessing. It will all be there ready and waiting.

Another thing that will make your development team love Sketch and your design team even more is the ease in which assets can be exported at a variety of different sizes and file types, including SVGs, at a click of a button. It will even pull through the name of the layer as the file name of the exported asset. So that’s two big time savers. Labelling is taken care of and no more countless hours spent by your dev team opening up huge PSDs and time-consumingly slicing out assets; it will all now be efficiently handled by your well oiled design team, allowing your developers to focus on the stuff they love.

Another handy little plugin is the ‘place linked bitmap’ plugin, this handy tool allows for the editing of bitmap files (JPG, PSD, PNG etc) once they have been placed into Sketch to then be easily updated in the master Sketch file and synced up. This means that on the occasion that elements of a design may be edited at client request by the dev team, this can then be pushed back through Sketch and synced to the original document, keeping everything up to date and relevant, removing the risk of old designs being worked on by mistake further down the line.

Benefits for the management team: 

On occasion there may be a last minute request to change a font or colour here and there which may hold up the design sign off. In the past, this was a real nightmare for a designer at the best of times as every instance of that font/colour would have to be accounted for, which would add countless hours to a design project in some cases. Sketch allows this to be as pain free as possible through linked assets and styles but don’t make a habit of it!

If you’re like us and you use Slack as one of your main communication tools, you will be pleased to hear that Sketch designs can be ‘drag and dropped’ straight into a Slack conversation, so whether it is an asset for a development team member or quick feedback from the team as a whole, Sketch makes it incredibly easy to do so.

Due to the fact that Sketch is designed to be familiar to the development team, it allows the design and development team to work more closely together as a result, which is great for the final product as more improved communication reduces the margin for error on a design project, reducing the points on the notorious UAT sheet.

As mentioned before, all these small time savings from both design and development teams result in many hours saved on projects, with sites being delivered within more agreeable timeframes.

One of the biggest differences to the Adobe model in recent years is that it has moved from a one off payment to a subscription based model and it’s not cheap, ranging from $10 – $20 dollars per a program, per month, whilst Sketch is a one off payment of $99 and essentially does the job of two Adobe programs in one for the purposes of interface design. However this would work out as a yearly charge if you require the updates and as it is likely that you will be using quite a few plugins then I would highly recommend this, plus it would still work out cheaper.

Conclusion:

From a personal perspective, I will conclude by saying that Sketch has been integral in the way in which our design process now works. It has helped the team work more collaboratively, resulting in a smoother handover, reducing the margin for error. It has sped up the sign off process and generally made the whole process more efficient and cheaper! The great news is that the hours saved can now be reinvested into the development of staff and growing the knowledge of the team, so it’s a win-win really.

As mentioned before, Sketch is a Mac program. We have a team who use both Mac and Windows machines however this has not held up the process in any way due to some great tools available for bridging this gap. I will go on to talk about in another post.

There will always be a special place in my heart for the old Adobe programs we used to use and I can’t see us getting rid of them for good but we are now using each program for it’s best suited purpose, Illustrator is still the go-to for icon and logo design, Photoshop for its image manipulation mastery and finally Sketch which will incorporate both of those file types for interface design.