Sketch 3 from A to Z: Become an App Designer
4.7 (1,581 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
7,119 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Sketch 3 from A to Z: Become an App Designer to your Wishlist.

Add to Wishlist

Sketch 3 from A to Z: Become an App Designer

Finally a comprehensive guide to using Sketch 3 for designing mobile applications. Learn to design an app from A to Z.
Bestselling
4.7 (1,581 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
7,119 students enrolled
Last updated 11/2016
English
English
Current price: $10 Original price: $75 Discount: 87% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Design the user interface of an app
  • Work using UI design best practices
  • Leverage tools to ensure pixel perfect design work
  • Package a finished design to be sent to developers to be built
View Curriculum
Requirements
  • Purchase Sketch 3 from the App Store or download the free trial
Description

Sketch 3 has revolutionized the world of mobile application design by providing the tools to transform yourself into a professional app designer with only a few hours of training. This course will teach you to use the Sketch 3 program to design dynamic, development-ready mobile app UIs that impress clients and engage users.

Learn to Design Beautiful, High-Quality Mobile Application UIs with Sketch 3’s Powerful Tools and Smooth Workflow

  • Master the essential principles and tools of Sketch 3.
  • Discover design techniques that will enhance your creative potential.
  • Learn and implementUI best practices to ensure quality and usability.
  • Journey from concept to completion by creating a sample mobile application.

Find Out Why Google, Apple, and Facebook Designers Use Sketch 3

Many of Silicon Valley’s most established and fastest growing companies swear by Sketch 3 when designing UIs for mobile applications because it’s fast and intuitive, and produces stunning final products.

One thing that sets Sketch 3 apart is its state-of-the-art vector Boolean operations, which allow you to create complex shapes and layer styles. This course will teach you the basics of Boolean operations, as well as many other advanced design techniques available within Sketch 3.

Contents and Overview

Whether you’re a beginner or a veteran designer with experience using Photoshop and Illustrator, you will find this course valuable in the way that it blends step-by-step instruction with hands-on, customizable exercises:

  • Mobile App Design from A to Z: With 42 lectures and 3.5 hours of content, this course covers everything from layers, shapes, and styling to text editing to exporting finished projects.
  • Test Your Knowledge: Periodic quizzes will review key concepts and ensure that you are mastering the content.
  • Interactive Design Project: Together with the instructor, you will build a sample UI for an iPhone music player app. Included Sketch documents allow you to pick up at any point in the project.

After completing this course, you will understand how to design high-quality mobile application UIs using Sketch 3 and you will be better prepared to meet the demands of your clients and developers.

Who is the target audience?
  • This course is perfect for web and print designers
  • This course is perfect for Photoshop or Illustrator users
  • This course requires practically no prior design experience
  • Some graphic design experience will be helpful
  • This course is not to learn to develop a functioning app
Students Who Viewed This Course Also Viewed
Curriculum For This Course
42 Lectures
03:18:35
+
Introduction
6 Lectures 14:58

Let's take a moment to get to know one another and talk about why we are here.

Preview 01:02

Where does Sketch fit into the world as a design application? Let's talk about what makes Sketch such a strong application for user interface design (UI design) and what makes it a better choice for this type of design work than Photoshop.

What is Sketch?
02:23

Let's discuss the difference between vector graphics in Sketch vs raster or pixel based graphics like images and photographs.

Vector vs Raster
04:00

Time to get familiar with Sketch by learning where our tools are. Here we cover the toolbar, layers list, inspector, and touch on the canvas.

Interface Tour
01:24

Every Sketch document is made up of simple parts. Pages, canvas, and artboards. Let's learn how the pieces come together.

Preview 03:04

Let's get into best practices for staying out of trouble with save, save as, and autosave. Autosave can be an extremely useful feature when it is properly understood and properly taken advantage of.

Save and Autosave
03:05

Let's make sure we are on the same page

Intro Quiz
3 questions
+
Layer Basics
5 Lectures 19:14

Let's get familiar with the design elements which will combine to form anything and everything you build in Sketch.

Types of Layers
02:21

Time to get hands on. Let's master making selections and positioning things on our canvas. We will be learning some shortcuts that make even simple navigation much faster and easier.

Interacting with Objects
05:04

Sketch gives us a number of tool to stay pixel perfect. Eyeballing things works for most artwork, but in software design there is a lot to be said for visual organization and precision.

Easy Precision and Math
04:42

Sometimes the best way to align things is to design on a grid. Using grids and guides, spacing and aligning objects can be effortless.

Guides and Grids
03:23

As your design becomes more complex, layers will begin to get in the way of other layers. Let's look at how keep things from getting in our way.

Hiding, Locking, and Grouping Layers
03:44

Are you a pro at navigating around Sketch documents?

Layer Basics Quiz
6 questions
+
Shapes
10 Lectures 48:32

Its about time we begin adding content to our canvas. Let's take a close look at the different vector shapes we have to choose from.

Adding Shapes
02:51

Now that we know how to add shapes to our canvas, let's begin assembling the basic shapes that will form our music player app.

Activity - Building the Outline
09:56

Basic shapes will only get you so far. Here we will learn how to edit basic shapes to turn them into something completely different.

Editing Shapes
04:44

Sketch wouldn't be a true vector drawing application without the ability to draw your own custom shapes.

Here we look at the two tools within Sketch to draw our own shapes from scratch.

Drawing Vector Shapes
03:14

Let's take a moment to practice drawing with the Vector Tool.

Activity - Drawing Vector Shapes
00:25

Boolean Operations are an incredible tool within Sketch which allow us to combine basic shapes to create more complex ones. You'll be impressed with how much you can accomplish with simple shapes and Boolean Operations.

Preview 09:24

Masking in Sketch 3 can be very, very easy and very, very useful. On the other hand, it can be a bit confusing to figure out on your own. In this lesson I show you how to keep making simple and get your masks under control.

Preview 07:31

In Sketch, it is easy and intuitive to grab the handles around an object and drag them to scale the object up or down. The problem with this becomes clear when borders or rounded corners are involved. Dragging the handles scales the path, but does not scale the effects in proportion. This lesson demonstrates how to scale an object or group of objects along with its effects.

Scaling vs Scaling
04:21

It's not unusual to need things to be lined up with one another and spaced even from one another. While it might be less common, you may want things lined up and spaced both vertically, as well as horizontally. In this tutorial I show you how easy it is in Sketch 3 to organize and align objects on such a grid. Also how to duplicate an object into rows and columns.

Make Grid
03:37

While Adobe Illustrator and Sketch are both vector drawing applications, they aren't exactly joined in holy matrimony. If you're a designer using Illustrator, these tips will make your life a lot easier when bringing artwork over.

Importing from Adobe Illustrator
02:29

Make sure you are not geometrically challenged in Sketch

Shapes Quiz
8 questions
+
Styling
10 Lectures 52:22

We are ready to beginning styling our app! Let's start with our different types of shape fills. Colors, gradients, and patterns; its all here.

Fills
08:44

Let's practice using fills and make some progress on getting our app put together.

Activity - Fills
03:06

Borders, known as strokes in many other design applications, are an integral part of modern design. Let's polish up a few of our objects by adding borders.

Borders
06:14

Blending Modes and opacity allow us to get one layer to have transparency or blending with layers below. Beautiful and complex effects can be created with little effort.

Blending Modes and Opacity
03:35

Shadows are a simple and elegant way to add depth and dimensionality to your design. Let's go over some tips for incorporating shadows.

The Magic of Shadows
03:23

We have some icons to add to our design to communicate functionality. Our icons will give users something to interact with in our app.

Activity - Adding the Icons
07:30

There are several different types of blur effects that can be applied in Sketch. Let's compare them and review one of the more misunderstood blur types: the Background Blur.

Blurs
06:21

As we style more and more objects in our design, the more we may find ourselves doing the same tasks over and over again. One of the recurring themes throughout this course is how to avoid doing repetitive tasks. Let's learn how to avoid repetitive styling.

Borrowing Style
01:49

Now that we know how to copy and paste style from one object to another, let's look at an amazing feature in Sketch that allows us to share styles between similar objects so that they always remain in sync with one another.

Shared Styles
02:41

Time to take what we've learned and apply it to some finishing touches to our design.

Finishing Touches
08:59

Style is subjective. Knowing your tools is not.

Styling Quiz
6 questions
+
Text
3 Lectures 21:59

Time to add text to our design and get familiar with the text tools available to us.

Basics of Text Editing
07:15

Area text allows us to insert paragraphs of text that remain within a bounding box. Let's look at the ins and outs of text boxes and styling the text within those boxes.

Area Text and Styling
12:20

Now that we know how to add text and shapes, let see how we can integrate the two and position text on a path.

Text on a Path and Outlines
02:24

Type is a beautiful group of letters, not a group of beautiful letters.

Text Quiz
3 questions
+
Images
2 Lectures 04:05

While image editing is certainly better suited to raster image editing applications like Photoshop, there are still a few tools within Sketch for making simple adjustments.

Image Adjustments
01:15

One of the lesser known features of Sketch that allows us to scale up raster graphics is called 9-Slice. Let's take a look at the advantage and limitations of this tool.

9-Slice Images
02:50

A brief validation of the few image editing tools

Images Quiz
2 questions
+
Symbols
1 Lecture 06:08

Symbols are a feature that truly set Sketch apart from other design applications. Using symbols, we can reuse design elements rapidly and keep the content of these design elements completely synchronized throughout our document. Making global design changes could not be easier thanks to Symbols.

Symbols
06:08

Make sure you understand one of Sketch's greatest tools

Symbols Quiz
2 questions
+
Workflow Pro Tips
3 Lectures 11:52

If you care how every individual pixel in your document looks then this mode is for you. What you see is the equivalent of exporting a PNG file.

Pixel Preview
03:16

When it's time to sit down with someone and show them your work, you may not need or even want them to see all the tools. This can be distracting. Using presentation mode, you can quickly display nothing but the content of your design while still being able to navigate around your document.

Presentation Mode
00:45

Designing an entire user interface or website requires us to put together a ton of objects and design elements. This makes for a crazy layers panel and a drop in productivity. This lecture shows my favorite shortcuts and tricks for selecting, managing, and organizing tons of layers in Sketch 3.

Managing Tons of Layers
07:51

Are you working like a pro? Are you really?

Workflow Pro Tips Quiz
3 questions
+
Exporting
2 Lectures 19:25

When you click the Export button in the toolbar, Sketch will pop down a sheet listing all exportable layers in the canvas; artboards, slices and regular layers. You can export some or all of these from there. Let's start by focusing on Artboards.

Exporting Artboards
07:54

Exporting a layer by itself means that no other elements on the canvas will be exported with it. If there's a layer on top or a background below it, neither of those will be included in the export. This is how we break our design apart into individual assets to export for developers to build our actual app.

Exporting Layers and Slices
11:31

Last and most definitely not least, will you be able to get your design turned into something functional?

Exporting Quiz
3 questions
About the Instructor
Joseph Angelo Todaro
4.7 Average rating
1,617 Reviews
8,870 Students
2 Courses
Art Director & Software Instructor

My entire life I have been aware of one very simple principle; sometimes information vibes with people, and sometimes it does not.

I have a passion for making information resonate.

It all starts with how people think. With how humans work. As humans we have learned how to read and write and while that is incredible, we are also already hard-wired to do some things a bit more "automatically". We are animals – designed to see things things as a whole. To start with a big picture and build understanding as we break it down. To learn from the visual. The spacial. The tangible.

Information can be all of these things. The difference is design.

I am a software instructor and designer who uses the art of design to nurture effective communication. Through 5,000+ hours of face-to-face teaching for the largest software company in the world and 10+ years of exploring the visual arts, I have learned to make information work for people.

"People ignore design that ignores people." - Frank Chimero