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.
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.
- This course has no specific prerequisites, although a general familiarity with prototyping techniques and other vector applications will be useful.
- Sketch 3 is a Mac-only application. The latest version of Sketch requires OSX 10.9 or later.
- If you do not have a registered copy of Sketch you may download a 30 day free trial from the Bohemian website.
- An account on Invision will be necessary to follow along with the "Adding Interactivity With Invision" chapter. A free version of this service is available here.