Skip to main content

Aquent Disaster Relief Fund. We’ll Match Your Donation. Learn More

Introducing Sketch for UX and UI

Gym Short

Introducing Sketch for UX and UI will teach you how to use Sketch tools and features in order to build an interactive prototype for a mobile website.

About This Course

In this course, you will learn the basics of creating artwork in Bohemian Sketch, with an emphasis on building wireframes, mockups, and prototypes. We will focus specifically on how to take advantage of Sketch’s Artboard, Pages, and Styles features, in order to create a prototype for a mobile website. Along the way, you’ll discover useful tips and tricks such as Nested Symbols, Group Resizing and the Make Grid feature, just some of the many features that can help UX and UI designers make great prototypes.

The course will also introduce you to the Sketch plugin ecosystem and show you how Sketch makes exporting assets fun. Finally, we’ll demonstrate how to make static wireframes and mockups from Sketch interactive with the help of Invision, an online prototyping platform.

Course Outline

  • Chapter 1: Introduction to Sketch

    An overview of Bohemian Sketch, the digital design tool for OS X. You’ll learn specifically why Sketch is gaining popularity among UX and UI designers as a tool for creating mobile apps and websites.

  • Chapter 2: Workspace and Artboards

    Dive right in and learn the Sketch workspace. You’ll be using Sketch’s artboard feature in order to begin building a series of screens for a mobile website.

  • Chapter 3: Shared Styles and Text Styles

    Discover how Sketch’s Shared Styles and Text Styles allow you to control the appearance of your artwork and text from a central location and how this will improve your workflow.

  • Chapter 4: Using Symbols - The Basics

    Symbols allow you to synchronize specific elements within your project and learning how they work is critical. In this chapter you'll learn the basics of creating, applying and modifying Symbols.

  • Chapter 5: Nested Symbols

    Nested Symbols are a relatively new feature within Sketch and allow you more control than ever before. With greater control also comes greater complexity, so you'll want to follow along closely!

  • Chapter 6: Group & Symbol Resizing

    Continue your tour of symbols in Sketch with another relatively new feature: Group & Symbol Resizing. This powerful feature allows you to specify how multiple elements within a group or symbol react when resized. If you're creating prototypes for responsive websites, this chapter has your name on it!

  • Chapter 7: Using Templates

    Templates allow you to create new documents based off of a master document and are great for improving the consistency of your prototypes. You'll learn how to create your own templates as well as locate and use third-party templates.

  • Chapter 8: Working With Pages

    Pages in Sketch allow you to organize your prototypes into logical sections and make navigating your project a lot easier. You'll learn how to create, delete and organize your pages in an efficient manner.

  • Chapter 9: Sketch Plugins

    Plugins in Sketch extend the functionality of the application in useful ways and are a huge reason why the program is so popular for UX Designers. You'll learn how to locate and add plugins to Sketch and then take a deep dive into the Content Generator plugin which allows you to quickly generate fake data for your prototypes.

  • Chapter 10: Exporting

    Exporting assets is a task that few designers look forward to, but Sketch manages to make the process fun and rewarding. You’ll learn how to export wireframes/mockups to PDF, learn the difference between exporting layers vs. slices and discover other cool and useful exporting tips.

  • Chapter 11: Adding Interactivity With Invision

    Sketch has limited interactive features, but when paired with Invision, a web and mobile prototyping platform, you can turn your static pages into interactive ones. Discover how to organize your Sketch artboards, add hotspots to link your screens together, create basic animations for mobile interactions, and export your prototypes for collaborative purposes.

Prerequisites

  • This course has no specific prerequisites, although a general familiarity with prototyping techniques and other vector applications will be useful.

Software Requirements

This Course is For

  • UX designers
  • Web designers
  • Front-End Developers

Meet the Instructor

Jeremy Osborn: Designer, Educator and Writer

Jeremy Osborn

Jeremy Osborn is Academic Director for Aquent Gymnasium and has been active as a designer, educator, and writer in the creative technology industry for more than 20 years.

From building websites for Boston-area startups to developing the Graphic and Web Design certificate program at Boston University’s Center for Digital Imaging Arts and teaching in Fortune 500 corporations, Jeremy’s knowledge and experience ensure that students acquire real-world skills in each featured subject. His latest book, HTML5 Digital Classroom, is currently available on Amazon.com.

Enroll