Skip to main content

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, Symbols, and Styles features, in order to create a prototype for a mobile website. Along the way, you’ll discover useful tips and tricks using Nested Symbols, Group Resizing and the new Data feature.

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 within Sketch and export them to Sketch Cloud,a service which allows anyone to view, download, and comment on Sketch documents.

Course Outline

  • Chapter 1: Introduction

    An overview of Bohemian Sketch, the digital design tool for OS X. You’ll get set up with the lesson files for the course as well as receive a brief overview of the role of Sketch in User Experience (UX) and User Interface (UI) projects.

  • Chapter 2: Workspace and Artboards

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

  • Chapter 3: Layer Styles and Text Styles

    Discover how Sketch’s Layer 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

    Using Symbols allows you to synchronize multiple elements within your project. Understanding the role of Symbols is critical to mastering Sketch. In this chapter you'll learn the basics of creating, applying, and modifying Symbols.

  • Chapter 5: Nested Symbols

    Nested Symbols take the power of Symbols to the next level and allow you more control of your design elements. 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 Group & Symbol Resizing. This useful 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 & Libraries

    You'll learn how to create and use Templates in order to save time when starting a new project. In addition, you'll discover how to use Libraries in order to access (or share) commonly used Symbols across a project — an extremely useful feature for design and development teams.

  • Chapter 8: Working With Pages

    Pages allows 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: Designing with Data

    New as of Sketch 52, the Data feature allows you to populate your prototypes with realistic data values, including names, cities and images. You'll learn how to use Sketch's default data sources as well as how to create and generate custom data sources.

  • Chapter 10: Sketch Plugins

    Plugins extend the functionality of the Sketch application and are part of why the program is so popular for UX Designers. You'll learn how to locate and add Plugins to Sketch and how to take advantage of the rich ecosystem of Plugins that have been created by third-party developers.

  • Chapter 11: 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 12: Adding Interactivity With Sketch

    Sketch now allows you to turn your static Artboards into interactive ones. Discover how to organize your projects, add hotspots, create basic animations, 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

  • Sketch is a Mac-only application. The latest version of Sketch requires macOS High Sierra (10.13.4) or newer.
  • If you do not have a registered copy of Sketch you may download a 30 day free trial from the Bohemian website.

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