Demystifying the Design Process with Sketch

For non-designers, there is often a level of mysticism around the way we work. In your job, it may well be your responsibility to brief a designer, but as for what happens in between that stage and finally seeing the fruits of their labour – well, this may be rather alien. While it’s not necessarily important to know the ins and outs of this (in a similar way that I can’t claim much knowledge for what our developers do code-side), this post aims to demystify the process and shed light on one of my favourite design programs at the moment, and equip you with good reason to convince any digital or web designer you work with to pick it up if they don’t use it already. Not to mention that having a top-level overview of design software makes it a whole lot easier to communicate with those that do use it.

If the above doesn’t quite apply to you, don’t click off just yet; there is still value to be had if you are:

1. A designer – learn how this program and accompanying tools can improve the way you work.

2. A jack-of-all-trades – discover how you can improve the design aspect of your role

3. A manager – as if by magic  find out how to streamline your team and processes

Still here? Great, let’s begin.

Disclaimer: This is not an advertorial.

While it would be nice to have been sponsored to write this post, it’s worth clarifying first of all that any hints of sales chatter that may ensue should just be read as pure enthusiasm for the product.

So, to cut to the chase, my most-recommended piece of design software at the moment is Sketch. It’s my partner in design if you will. I started using it around two years ago and haven’t looked back since. Before getting on to the ‘why?’  and ‘how?’ though, let’s briefly touch upon what it actually is (and isn’t)  for those in the dark.

Sketch? What’s that?

On paper Sketch is a ‘proprietary vector graphics editor’. From a user perspective though, it’s essentially a blank canvas in which you can design and create anything from a macro website right down to the nitty-gritty aspects of a user-interface.

Rather than just rattle through more points about what Sketch is and what it’s capable of, I want to throw in a quick lowdown as to what it isn’t:

• It isn’t anything to do with SketchUp (which happens to be a 3D graphics modelling programme) so best not to get them confused.

• It isn’t an illustration, photomanipulation or text-setting tool – these are best left to Adobe Illustrator, Photoshop and InDesign, respectively.

• It isn’t going to work in Windows/Linux etc. – sorry! It’s an Apple macOS-only program; though the benefit of this being that it’s incredibly well-designed and intuitive for Mac users.

• It isn’t going to break the bank! Sure, it was the free trial that roped me in to give it a go, but it was the very reasonable price tag that converted me to a paying user.

Life before Sketch

Before Sketch came along, my go-to design programme had always been Adobe Illustrator. Illustrator and I go way back, to my teen years, before I ever thought of myself as a designer. Over the years I’ve built up a bank of knowledge and can convincingly say that I now have a pretty good understanding of its features, and am more than happy to sing its praises over the likes of Photoshop. Similarly, when I joined Distilled, the other designers here were also keen advocates of Illustrator, and so it never occurred to me to question the process. Until one day I was chatting with a designer from another company, and on finding out our process, looked at me with incredulity and asked: “You use Illustrator for web build design?!” To be fair to us, there are plenty of designers who did, and still, do this. But importantly, this set the wheels in motion for me to look beyond our tried and tested tools. After some research it seemed a lot of people in the design community were raving about Sketch – this relative ‘new kid on the block’; so I set myself the task of using it for the next project I was assigned to.

I was immediately sold; and here are three reasons why you should be too.

1. Designed for digital, with a kickass online community to match

Unlike Illustrator, Sketch is designed for digital-first use cases in mind. With that comes an understanding that us digital folk want things done fast, we want them now. The time it took for me to go from deciding to try it out, to downloading, installing and opening the app, was less than five minutes. Anyone who has ever tried to get Illustrator on their machine before can relate to how amazed I was at the speed. That’s not a surprise, considering the app itself comes in only at 45.2mb, in comparison to Illustrator CS6 at 259.8mb.

Sketch’s UI is laid out in a clean, modular fashion, with no potential for toolbars to become unwieldy and disparate  (which I’m definitely guilty of in Illustrator), and this ease of use if further reflected in the way the programme operates:

No matter how intuitive a tool is, questions are bound to crop up when you start doing more complex things. Luckily I quickly learnt what a great online community Sketch has fostered. My favourite forum is sketchtalk.io where you can generally expect pretty fast response rates.

Not only is this community great in sharing knowledge on a case-by-case basis, there are also those who eagerly contribute by writing plugins (often open source and free to use) which enhance the capabilities of Sketch. For example, just the other day I came across AnimateMate, allowing users to create simple animations. This is just one example amongst many. Usually, if I know something I specifically want to do that isn’t natively built into Sketch, I’ll consult Google – ‘[blank]  plugin for Sketch’. Or, I might occasionally browse directories like this and this to discover new goodies.

All in all, the payback far outweighs the minimal learning curve of familiarising yourself with slightly different keyboard shortcuts.

2. Save time (and money) by streamlining the route from design to development

Prior to Sketch, my process from taking a design into development typically looked like this:

1. Create layouts in Illustrator.

2. Write up a detailed spec document for the developer, including aspects such as font weights and sizing, and hex code colours to name but a few.

3. Export a series of flat image or PDF from Illustrator for the dev and manually save any assets they might need, e.g. icons, images or logos.

4. Dev then goes away and uses the above to code and build by eye to match the design.

5. Expect a few feedback rounds on getting sizings, padding etc spot on.

Instead, my process is cut pretty much in half and now consists of just three steps:

1. Create layouts in Sketch.

2. Export layouts into Zeplin (third party plugin) project.

3. Invite developer to the Zeplin project (which literally just takes seconds).

Zeplin is my second most favoured tool when it comes to design. Its saved me hours by eliminating the need to do a write up a spec, manually export assets and cuts down the back and forth with developers by a mile. In fact, it almost deserves another post all to itself, but in the meantime, they’ve got the ground covered in a couple of quick overviews as to how Zeplin is good for designers and also developers.

If I still haven’t convinced you yet, just know that a lot of these new time-saving tools only support Sketch and not Illustrator ;-)

3. Work with a tool that’s as agile and iterative as you

Sketch is an app that’s constantly improving and pushing out updates. There’s even a part of their site dedicated to showcasing the latest changes. From a user perspective, I love this – it shows that I’m getting a product that’s at the forefront of technologies. And of course, it’s not cumbersome to update, no machine restarts etc.  The majority of them are done in the time it takes to go make a brew. Given that there’s not a single day in which the digital landscape isn’t changing, it’s great to know that the tool you’re working with is also changing and improving with it.

In fact, as much as it is about delivering the best user offering, it is a market as competitive as any other. As well as die-hard Illustrator and Photoshop fans to try and lure away, there are others trying to steal market share, for example, Adobe XD and soon-to-be InVision Studio. The Sketch folk know they can’t rest on their laurels, and I’m looking forward to another year of great updates fuelled by a dose of healthy competition.

Closing thoughts

To summarise, Sketch has revolutionised the way I approach design, forcing me to think more about the power of automation and in turn benefiting from that with shortcuts that don’t compromise on quality. I urge anyone working with designers to get them to give it a go. And with a one-month free trial, there’s really no excuse.

Demystifying the Design Process with Sketch was originally posted by Video And Blog Marketing