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.
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.
- This course has no specific prerequisites, although a general familiarity with prototyping techniques and other vector applications will be useful.
- 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.