How to Use Sketch for UI Design

If you’re a UI designer, and you still haven’t hopped aboard the Sketch express, you are truly missing out on an app that has taken the design world by storm in the past few years, and deservedly so.

Read on, to find out why it has become my app of choice, improving my skills as a designer in the process, and why you should really look at implementing Sketch into your UI design arsenal.

Hands up. Who’s still using Photoshop for UI design? Fireworks? Illustrator perhaps? The guy in the corner who said “MacPaint”, very amusing, but not in this dojo I’m afraid.

I’m going on a hunch here, and saying that Photoshop had the most hands raised? Of course it did. Adobe’s flagship product has dominated the industry for a considerable amount of time. And as most of us know, it wasn’t originally built for designing user interfaces, but solely for one reason (there’s a clue, I think somewhere in the product name).

But, over time, it became the ‘go to‘ tool for designing interfaces for websites, and applications. My hand used to be raised, like yours, as a devoted user of Photoshop for over ten years, designing for more web projects than I care to count.

But the abundance of interface clutter, with menus, panels, and countless extraneous options, became an unwanted distraction, when all you want to do is just design, for the web. And so it came to pass, I needed to look for something more relevant to the digital designer of today, and the folks over at Bohemian Coding kindly stepped up to the mark with Sketch.

Now I first played around with Sketch, which was up to version 2 at the time, back in November 2013. And as much as it was great to see a new kid on the block, ready to take on the behemoth that is Adobe, it was still a product lacking in many areas, and due a visit from pest control, with the amount of bugs present.

Then, Sketch 3 came around, and this changed everything, for the better.

Simplicity. That is probably the one word that I feel, best describes Sketch. It strips back the aforementioned interface clutter of those applications that I mentioned before. It’s role is specific, and concentrated, and it gets you back into designer ‘Zen’ mode, which is more than welcome on a daily basis.

In the past, working in Photoshop, on a large scale web project would mean countless large files for the various screens you were designing for. Weighing in at 100’s of MB for each of those files, and jumping between separate files on the many revisions a project may take, was a truly time-consuming task, and hard-drive busting dilemma.

But with Sketch, and it’s truly awesome ‘infinite canvas’, you can quite happily have all your various screen designs, or Artboards, as they’re labelled in Sketch, all in one single file.

Now to give you a quick insight on how this can reduce file sizes, my most recent Sketch project, with over 60 Artboards, weighs in at just a few 100MB (with some large, uncompressed photos, laying claim to a large chunk of that). Reproduce that in Photoshop, and you’re on the lookout for some external storage.

Ok. So let me share some more information on how I used Sketch on my latest project, and some of the truly great features this application brings to the party.

When you open up Sketch for the first time, you are presented with a pleasantly clean, uncluttered interface. You are not daunted by an array of unnecessary options, and tools. Sketch cuts out all the fluff, and lets you focus purely on design, without any distractions.

Everything that you create in Sketch can be easily reproduced with CSS. That includes, borders, shadows, gradients (all their CSS properties ready to roll at the click of ‘Copy CSS Attributes‘). Bevel & Emboss, and it’s ilk, have promptly been shown the door. The use of CSS logic throughout the app is truly refreshing.

If you are working alongside a developer, it’s great to know you are both on the same page, and there are no hidden surprises for them, once they begin to code up your designs.

There a few companion applications for Sketch that I have come across in recent months that can aid even further when going from design to code.

The first one is Avocode, which states that it is ‘The bridge between designers & developers’, and the other is the Zeplin ‘Collaboration app for UI designers & frontend developers.’

I’ve had a short play with both apps, and they’ve suitably impressed on many fronts. Both are fully supportive of Sketch, and seem to offer some great features when taking your completed designs to the build stage.

Designer & Developer in sweet harmony can only be a good thing right?

With Sketch, it’s vector all day, every day. Each, and every element you produce inside of Sketch is a vector, which for a UI designer is a given.

With a varying amount of screen sizes to design for, and swift changes that need to be made in the design process, having each element resizable, without loss of quality, is an absolute must.

And remember, if you’re working on either icon, or illustration design you can easily switch from vector to pixel view to refine if needed.

I recently worked on a 60+ Artboard project, with many design variants for each page that would be used in the coded site. Using Sketch, I was able to, quite easily jump between the various artboards, and pages in my design, all from the one file, in one window.

Absolutely no need to open up multiple design files while working on the project. This enabled me, at all times, to have a top-down perspective on my whole project, and move much more swiftly through it because of that.

Now I’m a stickler for a good grid system, both in the design, and development of my projects. And have used the fantastic, and lightweight Gridiculo.us in the past when coding my design up.

With Sketch, I can open up ‘Layout Settings’, quickly enter the number of columns (it’s 12 in Gridiculous’ case) I’m using for that specific design, pop in my gutter, and column widths, and I’m on point with my grid, from design all the way through to build. A quick Ctrl-L to bring up your Grid guides when needed. Simple.

I’m a numbers guy too. I don’t like to look at a design, and go “yeah the space between element X and Y looks good enough”. In the design process, I like to know that this H1 is specifically x amount of px away from H2. With Sketch, and the use of Smart Guides, this is super simple.

Click on my first element, hold down the Option key, and I can see a numbered guide showing me exactly what the measurement is between the two elements. It’s shades of obsessiveness in my work admittedly, but it allows me a much tighter rein on my final design. See past the drag, drop, and hope for the best, attitude. You’ll be a much better designer for it.

Symbols. Symbols simply rock.

They allow you to group a number of elements together, which you can then easily reuse throughout your whole project. Make a change on one of them and this will be instantly replicated to all of the other copies of that symbol.

I use this a lot for repeatable elements such as, Buttons, Navigation, Headers, Footers and such. A great timesaver all day, every day.

No more dirty, half pixels. No more blurred shapes. With Sketch you can easily align a shape, or layer, pixel perfect to your grid. It’s these kind of small, but useful additions that will improve your designs greatly.

Setting up a keyboard shortcut for this option comes in extremely handy too.

Like Symbols, the Styled Text option is a fantastic timesaver on a project. I like to set up my most used text styles (H1, H2, H3, H4, Paragraph, Blockquote etc…) in one artboard for reference. Then I can go ahead and use those elements throughout my project.

Handy when the client comes back to you and says “Drop the Proxima Nova, we want Open Sans all the way, and ramp up the font size while you’re at it”.

Change the font style in one place, and like symbols, it is reflected in all other instances within your design.

If you’re a Photoshop user, then you’ll understand how painful a process, slicing, and exporting your design assets can be. I’ve been there, I hear you.

With Sketch, your export woes are now a mere memory. Choose an element on your artboard, click to Export, from there you can then easily choose to export as an SVG or PNG (amongst others).

Saving to PNG format, will also offer you upto @2x for those pretty Retina devices. You’re more than covered for displaying your assets on various devices.

Hopefully you’ve come to realise through reading this article that Sketch is a pretty awesome application, out of the box. But where would we be without an equally awesome community of folks producing plugins for Sketch to extend it’s capabilities some more?

Let me give you a short rundown of some of my favourite ‘just can’t live without ’em’ Sketch plugins…

Before you go searching for Sketch plugins (of which there are many) I highly recommend grabbing a copy of – Sketch Toolbox.

This great, little Mac app lets you browse the most popular plugins available for Sketch. From there you can easily download and install your chosen plugins with a single click. A highly recommended tool!

Here are a few of my favorites:

Ok, I may have knocked Photoshop a bit throughout this article. It did, and still does serve a skewed purpose for many designing for the web. But it’s now long in the tooth for the modern UI designer, and really not fit for purpose anymore in my opinion. Sketch is.

Sketch still has a way to go. There is room for improvement in various aspects, not unlike any fledging product to the market. But the great team at Bohemian Coding, seem to react to bugs, issues, and new features on a regular basis, with updates coming thick and fast. They’re a small, but resourceful team, who have produced a killer product.

Sketch has got my vote. It’s improved my workflow considerably, and given me some of my ‘design mojo’ back in the process.

Have you tried Sketch yet? Be sure to check out our collection of web templates that come with Sketch assets from Envato Elements!