Unit time: 3 hours

Intro to Sketch

Sketch is quickly becoming a go-to tool for UI design, replacing Photoshop and Illustrator in many a designer's workflow. In this unit, you'll learn why!

First, get started by downloading Sketch, if you haven't already. Go to this link to download a free trial. You can purchase Sketch for half off as a Designlab student — just click this link when logged in to access your Sketch perk.

Unlike other units in this course, you won't share any of the exercises you work on with your mentor. They're intended as solo practice exercises to help you get acquainted with the software. By the end of the unit, you will be familiar enough with Sketch to complete all the projects in Design 101.

Learning Goals

  • Set up artboards and pages using Sketch
  • Know how to style shapes & text
  • Use the grid and alignment tools to create ordered layouts
  • Manipulate basic shapes
  • Create and use symbols for re-usable elements in a design
  • Use simple shortcuts to simplify the Sketch workflow

Intro

Let's get started with an intro to Sketch and why it’s useful, and then get acquainted with the basics.

Intro to Sketch 3

Go to video

Getting around Sketch 3

Go to video

Workflow

Now, we'll focus on setting up your environment and learning the basic features of a Sketch designer's workflow.

Understanding Artboards

Go to video

Pages

Go to video

Layout

Crucial for any web or mobile design, let's look at layout, alignment, and distribution tools.

Grids & Layouts (7 min)

Go to video

Alignment & Distribution (5 min)

Go to video

Workflow & Layout: Exercise

Go to this tutorial. Follow the tutorial and create your first artboard, along with the grid that's mentioned. You can save this for use later on in the course.


Shapes & Styles

Let's learn about the inspector and how to create & style different shapes and text on the canvas.

Styling Shapes (8 min)

Go to video

Text Styles (6 min)

Go to video

Shapes (8 min)

Go to video

Shapes & Styles: Exercise

Create a new Sketch document, and set up an artboard (iPhone size: 640x960). Recreate this simple login screen using what you've learned about text, shape, and alignment.


Extra Tricks

Here are some intermediate tricks and shortcuts that might be good to know.

5 tips and shortcuts (8 min)

Go to video

Symbols (8 min)

Go to video

Unit Mini-Project

  • Create a 960x1100 artboard in Sketch.
  • Recreate this webpage mockup in Sketch using the techniques you’ve learned about in this module. You can find placeholder images for the background on Unsplash.

Get the syllabus & take a tour