Trends

A Beginner’s Guide to Sketch

Since its inception in 2008 it has grown considerably, both in terms of users and as a product.

Woman designer using computer by vadymvdrobot

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:

  • What is Sketch?
  • Who uses it?
  • Where can I find Sketch resources?
  • Where can I find Sketch courses and learning resources?

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.

What is Sketch?

‘Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package.’

First of all, Sketch is entirely vector. This meaning 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.

Who uses it?

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.

Where can I find Sketch resources?

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.

HERO Google Pixel Mockups

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.

Business One Page Web Template

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.

Boon – Gift Card Mobile App Kit

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.

Where can I find Sketch courses and learning resources?

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.

Getting started

Sketch Official Guide

Up and Running With Sketch Course from Envato Tuts+

Getting Started with Sketch from Megumi

Helpful Guide To Getting Started With Sketch on Medium

The Ultimate Guide to Getting Started In Sketch (With Free 99-Point Cheat Sheet) from TryDesignLab

App design

Designing an iOS App in Sketch from Speckyboy

Food App UI • Sketchapp Tutorial / Sketch 4 Tutorial on YouTube

Build a news reader app from Sketch to the App Store from DesignCode

 A Step-by-Step Guide for Starting a New App Design Project in Sketch on Medium

Designing an iOS Fitness Application with Apple Watch Compatibility from Envato Tuts+

Web design

Using Sketch to Design Beautiful WordPress Websites from wpmudev.org

How To Design A Web Template In Sketch App from PixelHint

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.

About the Author Ben Bate

I'm Ben, a Product Designer from the United Kingdom. You can visit my website or follow me on Dribbble.