O'Reilly logo
live online training icon Live Online training

Beginner’s guide to creating prototypes in Sketch

How to plan, build, and share prototypes for your products

Andy Anderson

Designers can choose from a wide selection of tools to create prototypes: Photoshop, Illustrator, InDesign, just to name a few. With prototyping, the goal is to create a nonworking, visual representation of a project—such as a website or smartphone app—without the burden of performing any coding. Sketch was designed specifically to create prototypes, and no knowledge of HTML or other coding language is required to use it, which is why it’s a favorite tool of product designers.

In this course, you’ll gain hands-on experience in how to use Sketch to create your own finished prototype. Through a combination of lectures, demonstrations, step-by-step exercises, discussion, and Q&A, you’ll learn you how to organize your design project, use Sketch’s tools to create your own prototype, and then export and share your prototype with your team.

What you'll learn-and how you can apply it

By the end of this live, online course, you’ll understand:

  • How the Sketch application is used to create prototypes
  • How Sketch works as a dedicated prototyping application
  • The role of color in designing a successful prototype
  • How the planning of a project helps to understand the resources required to complete the project

And you’ll be able to...

  • Work with and format text and images
  • Use Sketch’s placement and alignment tools to create a well-balanced prototype
  • Export, share, and work with the prototype you’ve created

This training course is for you because...

  • You’re new to Sketch and you want to create prototypes for projects ranging from smartphone apps to Web sites.
  • You're an experienced designer accustomed to working in other applications, and you want to streamline the prototyping process.
  • You already use Sketch but you haven’t had any formal training and you want to delve deeper into the application’s possibilities and capabilities.
  • You’ve got minimal coding experience and you want to develop an efficient prototyping workflow from conception to completion.

Prerequisites

Preparation

  • Beginning UX Design (Learning Path video segments)

  • What Does A UX Designer Do? 00:04:15

  • What Does A UX Designer Make? 00:04:00

  • Design for Mobile (Learning Path video segments)

  • Navigation Elements 00:20:56

  • Mobile Form Structures 00:11:37

Download and Install:

Required materials:

  • A notepad and pencil
  • Image and text files will be provided for the completion of the prototype project.
  • A desktop, laptop, or other connected device
  • A smartphone, including the cable needed to plug it into your computer.

Follow-up learning resources:

About your instructor

  • Professor Andy Anderson is the author of over a dozen best-selling books on graphics and design. His company, One-of-a-Kind Productions, Inc, has worked with and trained thousands of people in the areas of photography, animation, graphics, and Web design. In addition, he has worked with major Fortune 500 companies to increase efficiency in product development using enhanced workflow and communication techniques. Starting out his career designing with pen and ink, he now creates his product designs and graphics using a variety of computer applications.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Section A: Creating a project: Project planning (20 minutes)

  • Basics of prototype planning; introduction to critical aspects of creative planning, Q&A, introduction to the course exercise

The Sketch application (20 minutes)

  • Introduction to the Sketch interface; the basics of saving a project file;
  • Exercise: Create and save the project file for the course exercise

Q&A (10 minutes)

Break (10 minutes)

Section B: Developing the project. Working with artboards (10 minutes)

  • Hands-on introduction to the creation of the project artboards; demonstration of the use of grids and guidest; explanation of the “comping” process and how it’s used in project workflow
  • Exercise: Create two artboards and colorize them.

Working with vector objects (10 minutes)

  • Discussion and exercise: Importing existing vector artwork into Sketch
  • Discussion and exercise: Creating unique artwork using Sketch’s built-in drawing tools; creating freeform shapes with the Pen tool; combining shapes using Pathfinder tools

Adding images (10 minutes)

  • Lecture, demo, and exercises: The various formats of graphic images; how to import images into Sketch; how to control multiple images and graphics with layers; guided practice resizing and manipulating images.

Adding text (10 minutes)

  • Lecture, demo, and exercises: Methods for importing and formatting text

Q&A (10 minutes)

Break (10 minutes)

Section C: Exporting a project: Exporting options (15 minutes)

  • Lecture, demo, and exercise: methods for saving a Sketch project; various ways to export a Sketch project (along with pros and cons of each method); practice

Previewing options (15 minutes)

  • Demonstration, discussion, and exercise: The Mirror function and other methods of previewing a Sketch project

Sharing options (10 minutes)

  • Demonstration: How to use the Sketch cloud to share projects with other designers
  • Discussion: How sharing can help improve prototypes

Bringing the prototype to life (10 minutes)

  • Demonstration of the Framer application

  • Wrap up and final Q&A (10 minutes)