A Beginner’s Guide to Sketch

It’s an exciting time for the design industry. More and more high-quality tools and software are making their way to market and competing with the large industry names like Adobe Creative Cloud. One of these tools is Sketch by Bohemian, a professional digital design package for Mac.

Since its inception in 2008 it has grown considerably, both in terms of users and as a product. It’s won an Apple Design Award, been rated 4.5 stars by DigitalArts, and been named App of the Year at the .net awards. It was even featured in Apple’s most recent keynote presentation.

As Sketch continues to disrupt the conventional design software industry, it’s important to consider it as a potential option for your primary or secondary design tool. In this article we are going to outline the following:

This beginner’s guide should help you obtain an understanding of whether Sketch is the right tool for you and give you some pointers for getting started with it.

First of all, Sketch is entirely vector. This means that if you design an app or website, you can easily scale it up or down in resolution without losing any quality. This differs from Photoshop, a predominantly raster-based program which is more focused on set artboard dimensions.

Complementary to the vector aspect is the ability to enable resizing. Take a responsive website, for example. By anchoring the logo to the left, and the navigation to the right, you are then able to resize the artboard and see exactly how it would work as a completed responsive website. It’s important to discuss the vector aspect as it is a significant benefit over more traditional softwares, especially in today’s environment which relies heavily on designs scaling and adapting to different resolutions and devices.

Another significant feature of Sketch is something called Symbols. These are groups of elements. You can change an aspect of one of the groups, and rest of the groups will also change simultaneously.

An example would be designing a website with 30 different pages. The client has contacted you and asked to change the logo to a different color. By using a Symbol for the logo you only have to change the color of one. The other 29 will update simultaneously. It’s incredibly useful when used throughout your designs and can save a considerable amount of time throughout the design process.

Styles act in a similar way to Symbols. You can define styles for elements such as buttons. Then when you create a new button this style can then be applied to it in just one click. Want to change the border color of every button in your design? Style have you covered and allow you to do so in a matter of seconds. It’s extremely helpful in maintaining consistency throughout your designs.

The final feature I want to outline is export settings. Often a tedious process, exporting your designs and assets is simple and easy with Sketch. You can export multiple slices and artboards at once, each with different scales (e.g. @2x) and file types. To see just how simple it is, watch the video below:

This outlines just some of the main features that Sketch offers. There are a wide range of other great features outlined on their website – definitely worth a look if you are interested in learning more.

Given Sketch’s focus around vector and resizing functionality, it makes it a great choice for UI, UX, product, web, and mobile designers. The vector boolean operations (union, subtract, intersect, exclude) and export settings also make it a pleasure to use for icon design. In summary, it is a definite primary option for any designers working with web or mobile, and certainly also a viable option for icon designers too.

To give an idea of the type and scale of some top companies using Sketch, see the section below featured on their website.

Companies like Apple, Google, Dropbox, and Twitch are listed amongst other top brands.

Sketch would not be so appropriate for designers working with great amounts of photo editing, or illustrators who need more specific features such as live paint or custom strokes. Despite this, many designers find Sketch useful as a complimentary design tool. With its rise to prominence, there’s a great likelihood that you will someday be sent a .sketch file type and so having it in your suite of design tools may be worthwhile.

One of the primary pull factors of Sketch is its complementary market of resources. There are a vast quantity of high-quality plugins and design files, both free and premium. Sketch has a great collection of the top plugins listed here. For free design resources, Sketchappsources is an excellent site with thousands of files available for commercial use. For more advanced, premium resources, Envato Elements has an excellent library of high quality templates available for download.

As well as this, Sketch’s vector functionality handles SVG icons brilliantly. Apps such as The Noun Project integrate with Sketch to provide your designs with icons and vectors quickly and easily.

Below are a selection of hand-picked Sketch resources to get you started.

These Google Pixel Mockups are perfect for presenting your Android designs in a portfolio or on sites such as Dribbble. The well organised layers and groups make it perfect for a Sketch beginner. If you find yourself confused with the Sketch version you can simply switch back and to between this and the included Photoshop version.

This stunning one page web template is great example for what can be achieved in Sketch. It uses a wide range of layer effects and styles, making it perfect to play around with if you are just beginning to learn how Sketch works.

For mobile designers, this app kit is a beautiful resource for basing your first app design upon in Sketch. It uses complex gradients and subtle layer effects to create a unique visual style.

There is a great community behind Sketch and lots of designers who have been kind enough to share their knowledge and expertise with others in the design industry. As a user of Sketch myself, I know how daunting the switch can be from a software like Photoshop. I’d used Photoshop for around seven years prior and so the courses and learning resources were invaluable when transitioning across.

I’ve split my favourite courses and learning resources into a few categories below. Give some of them a try and see how you get on. If you ever get stuck with Sketch, know that their support team is exemplary and they will help you as much as they possibly can.

Hopefully this guide has helped you understand a little more about Sketch and allowed you to determine whether it is a good fit for your area of design.

Browse Sketch-compatible templates in our library.