If you’re just getting into UI design, or starting to create vector drawings, you might feel a bit lost. Adobe programs—while brilliant—are finicky and can take months to master. Even years. Sketch is a great alternative for Mac users to work with, since it’s easy to use, and integrates well with other apps and plugins. You don’t have to have years of Adobe Illustrator experience to understand it: you can learn the basics within a few hours.

One of the best ways to learn this program is with a Sketch app tutorial. Or, even better, diving into several of them. I’ve put together a list of some of the best Sketch tutorials out there for you to check out. Some are video walkthroughs, others are step-by-step guides, so you can choose which ones you’re most comfortable using.

Sketch designs are a great addition to your online design portfolio or online illustration portfolio—it’s an in-demand program these days, so mastering it is a smart way to attract potential clients.

Video Sketch Tutorials

1. Sketch App Tutorials

Okay, if you’re an absolute vector newbie, this is the Sketch app tutorial channel you should start with. There are 25 tutorials available, starting from the basics of how to work with your artboard and tools, and create grids and layouts. Once you’re comfortable doing that, you can graduate to shapes, symbols, and, eventually, animations. This comprehensive guide on how to use Sketch is also a great refresher if you’re coming back to the program after not using it for a while.

2. Sketch App Awesomeness

Polish UX supergenius Grzegorz Róg (Greg Rog) has drawn from his 15+ years of experience to create a series of video courses for you. If you want to learn how to use Sketch inside and out, he’s your guru. Start with this Sketch tutorial to get the basics, then move on to his other offerings when you’re ready to learn more.

3. Intro to Sketch: Beginners Guide to Sketch Basics

Enthusiastic and fun, Jesse Showalter’s Sketch app tutorial for beginners takes a different approach from the previous videos here. He delves into the basics of grid setup, setting text styles, and adding shapes, but with a different twist. This Sketch tutorial is geared towards web design, and focuses on solving typical problems. It’s a smart, practical way to learn new skills while tackling real issues you’re likely to face.

4. Intro to Sketch for Web Design

Former Photoshop devotee Charli Marie switched over to Sketch, and now shares her website design know-how in this fabulous “intro to Sketch” tutorial video. You’ll learn how Sketch approaches grid systems, page textures, and responsive layouts. If you’ve been struggling with Photoshop and want to learn how to use Sketch for web design instead, Charli Marie can help you get over your anxiety.

5. SketchCasts

You’ve learned to walk; now it’s time to try dancing a little bit. Sketch app tutorials abound on this YouTube channel, which covers all of Sketch’s features in practical, easy-to-follow lessons. You’ll discover a ton of new design techniques—and they even offer an iOS app mockup tutorial for you to play with.

6. Create a Web Design in Sketch App

If you’re comfortable with the basics and are eager to start designing a website, this video takes you to the next step. This Sketch app tutorial will guide you through designing and building a landing page, and even provides downloadable course files and a template to follow along with. You’ll use Boolean operations to create custom shapes, fine-tune colors in “blend” mode, set and save unique palettes, and add/edit text.

7. Sketch Basics: The Interface Pt. 2

Do you feel like you need a bit more practice with website design? No problem. Maex will guide you through a sample project in this Sketch tutorial. You’ll play with artboards and learn how to use them effectively, along with responsive web devices, and oodles of other fun tools. He has a number of different Sketch app tutorials to check out, so feel free to scan through his channel if you’re looking for something specific.

8. How to Design a Landing Page (Part 1/5)

Ready to dive even deeper? Then let designer Adam Rasheed lead you down the rabbit hole in this video tutorial series. He’ll teach you how to use Sketch’s tools to create navigation menus, thumbnail galleries, sign-up forms, and more. In his Sketch app tutorials—which average about 90 minutes each—he covers all of the app’s major aspects, and teaches you proper workflow procedures to create a web page mockup.

9. How to Use the Vector Tool in Sketch 3

This is another Sketch tutorial by Adam Rasheed; here, he focuses on mastering the vector tool. People who have worked extensively in Adobe Illustrator know how frustrating it can be to manipulate vector points. Rasheed walks you through how to use Sketch’s vector tool easily and effectively, so you can transform a hand-drawn illustration into a vector logo.

10. Share Your Work Lightning Fast

Time to go right to the source: the folks at LearnSketch.com have a ton of Sketch tutorials and freebies available—and this one is definitely worth checking out. If you’ve ever worked as part of a team, you know that sometimes you need to send progress shots over to people at the drop of a hat. Sketch is spectacular for allowing you to export and share your work quickly and easily, and this video will teach you exactly how to do that.

11. What’s Up With Sketch’s Scissors Tool?

So, now that Raheed’s Sketch tutorial has given us an in-depth look at what the vector tool, is there another we should get to know better? Yes, there is! Sketch’s scissors tool is one that confuses a lot of people, as it’s quite different from its Adobe cousin. This article by UX genius Peter Nowell is super-helpful for explaining all the minute details about exactly what this tool does, and how to use it.

12. Creating Patterns In Sketch

Now that you have a pretty solid idea of how to use Sketch’s various tools, you can put your new skills into practice. This Sketch tutorial will take you through a step-by-step process for creating geometric or repeating patterns. Best of all, you’ll also learn how to save disk space while you work, since patterns can be resource-heavy and frustrating. In no time flat, you’ll be using Sketch to create seamless fills in all your tetradecagons.

For designers, the creative process begins with a wireframe. It is always the first iteration of any new project, and the quality of your wireframe design will inform the final product. But a well-crafted wireframe is work of art unto itself. Don’t let all your preliminary efforts go to waste: wireframes are an in-demand skill, especially nowadays, and thus a great thing to feature on your online design portfolio or web design portfolio. What better way to attract new clientele for your freelance business—while also standing out from the masses—than by showcasing all of your past and future wireframe design work?

Not sure where to start with creating a wireframe? I’ll walk you through how to do it, as well as some wireframe tools you can use (including some free wireframe tools!). Let’s dive in.

Wireframes 101

If your design project were a building, the wireframe would be your blueprint: a rough outline of where, exactly, you intend on placing the content and the structure by which it will follow. Prototyping a new app? Wireframing constitutes the first step. Revamping your website? Again, the wireframe comes first.

As a concept, wireframes are nothing new. But while the world grows ever more connected and new websites and mobile apps continue springing up, designers—UX designers, namely—have realized the value of wireframing once again. And guess what? There is no shortage of free wireframe tools out there, most of which are quite slick and powerful. I’ll give you a rundown of some of our favorites below, as well as other paid wireframing apps that cater to those willing to drop a few extra bucks. But first, let’s start with a wireframing 101 crash course.

How to Create a Wireframe

Let’s take a brief moment to break down what, exactly, a wireframe is. In the context of UX design and prototyping, a wireframe is composed of these three key elements:

Structure Overall layout Actual content/information

It’s as simple as that. A wireframe is, essentially, a rudimentary skeleton of how you foresee a website or app coming together.

How Do Wireframes Fit Into the Design Process?

In the greater scheme of things, wireframes are found at the beginning of the process. Taking a step back, the sequence of events goes as follows:

Wireframe design Low quality prototype/mockup High quality prototype/mockup Development of product (via coding)

The main idea of a wireframe is to set your project up for success. Without the usual distractions of color, branding, or cool typography, wireframes offer a simple, clear view of the final product—namely, the structure and layout through which everyday users will interact with the design.

Getting Started

Don’t reach for your sketchbook quite yet, because even the pre-planning process could use a little planning itself.

At the outset of a new design project, it’s important to first consider the goals: what you’re building, who it’s for, and why you’re doing it. A new website for a small business? Your wireframe design should account for their needs, including which key information to display and what products or services to emphasize. Perhaps your wireframe should include a comment section or an online store. Maybe you’d like to include a live Instagram feed. Or a rotating gallery of images. The list goes on and on.

Your design—be it for a website or mobile app—is solving a problem. And the quality and care put into your initial wireframe will lay the foundation for the project moving forward. Do it well and you can rest assured knowing that everything will come together just the way you envisioned it.

Forget About Design (For Now)

Perfectionists, beware: wireframes should never, ever look all that good. Or pretty, anyway. A great wireframe design is minimal—literally just a series of lines, boxes, and words on the page. When creating a wireframe, you should only consider its structure, layout, and information design (i.e. how content is presented and where.) Anything more than that will take away from the main purpose of wireframing.

Must-Have Wireframe Features

You know what you’re building, why, and you’ve ditched any unecessary aesthetics. Great.

This is where a seasoned wireframe designer would make a list. This list should detail the components your design must contain. To use the small business example again, perhaps the owner is all about customer service and has asked for a live chat feature. Throw it on the list, along with everything else you’ve deemed critical to the success of the project. Maybe a search bar, a dropdown menu, or a place to subscribe to a newsletter—you get the idea.

Find a Point of Reference

There is no shame in looking to the work of others for inspiration—especially if you’ve been staring blankly at your computer screen for hours on end, unsure of what to do or where to start! We’ve all been there. Luckily, the Internet is brimming with great wireframe design examples. Unsure where to look? Start with the online portfolios of other UX designers for a little inspiration.

When I have time, I write articles about anything design. Whether it’s UX, identity, process, new software, you’ll find it here. Thanks for stopping by.

- Amelie