O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Prototyping with Sketch

Video Description

Maybe you're the web designer looking for a tool with less overhead to create custom web sites? Or, perhaps, you're a programmers who wants to prototype interfaces quickly? Are you a UX/UI Designer whose trying to iterate through multiple produce interfaces? Maybe you're an experienced mobile app designer looking for a lightweight alternative to Photoshop. Maybe you just want to learn how to design prototypes the right way? Whatever your reason, this is the time to learn the Sketch digital design tool kit. Unlike other design software Sketch is designed to get out of your way and allow you to create great prototypes of web sites, mobile applications, software applications, tablet applications and much more. While other applications can weigh you down with unnecessary features you'll never use, Sketch is designed to be quick and light. Designed to get you doing design work quickly and with ease. It's about your creativity-- not your ability to learn dozens of software features. And, if you're ready to start working with Sketch there is no better way to learn than this course Prototyping with Sketch is a complete, comprehensive course on the Sketch tool. You'll become familiar with each of the tools you'll use to design user interfaces for web and mobile based applications. We anted this course to be about doing-- so you won't waste time in endless lectures. We've included a number of high quality laboratory exercises in the course to quickly get you doing the type of work professional designers do in Sketch every day. Each of the lab exercises is relevant to the work you'll be doing as a professional developer. Your instructor, Matt Cameron, made sure every detail of this course is efficient, interesting, and most importantly, relevant! Each minute, you'll learn more about the Sketch digital design tool and, add skills to your professional toolbox that will make you a consummate pro. It's time to stop thinking about working with a tool like Sketch-- It's time to learn the tool. With the informative lectures, engaging activities and numerous tips, you'll be working as a professional designer in web or mobile as soon as you finish this course.

Table of Contents

  1. Introduction to Sketch
    1. Introduction to Sketch 00:00:46
    2. Installing Sketch 00:02:09
    3. Sketch Interface 00:09:59
    4. Generic top level pages 00:08:58
    5. Plugins and their power 00:03:20
    6. Solidify your understanding of the Sketch interface 00:01:17
    7. Conclusion 00:00:29
  2. Sketch's Layer List
    1. The Layer List is how you organize your design file 00:00:44
    2. Understanding the Layer List's UI 00:04:57
    3. Understanding Pages 00:05:32
    4. What are artboards for? 00:02:48
    5. Layers - Selecting, Moving, Deleting, Locking, and Grouping. 00:05:49
    6. Using artboards, pages, and layers together 00:07:13
    7. Try It On Your Own 00:00:39
    8. Conclusion 00:00:29
  3. Sketch's Inspector Panel
    1. The power of the Inspector Panel 00:00:53
    2. Alignment Options 00:07:17
    3. Layer Properties + Resizing Constraints 00:02:58
    4. Text Fields, Mousekeys, and Math Equations 00:03:05
    5. Layer Styles 00:05:10
    6. Exporting 00:03:46
    7. Get to know your new toolbelt. 00:00:50
    8. Conclusion 00:00:21
  4. Creating Elements in Sketch
    1. How to Manage and Add Elements to your Design 00:00:37
    2. Adding & Editing Shapes 00:15:28
    3. Boolean Operations 00:06:47
    4. Typography 00:14:21
    5. Using Masking in Sketch 00:05:51
    6. Grouping Elements Together 00:02:11
    7. Lets Try It 00:07:29
    8. Conclusion 00:00:29
  5. Organization & Consistency
    1. Organization is Important, Consistency is Even More. 00:00:55
    2. Layer Styles 00:07:20
    3. Text Styles 00:09:01
    4. Symbols 00:07:47
    5. Naming Conventions 00:05:55
    6. Layout and Grid 00:10:19
    7. Using Layer Styles, Text Styles, and Symbols in your UI design 00:07:24
    8. Why don't you try it? 00:08:14
    9. Conclusion 00:00:22
  6. Exporting Assets from Sketch
    1. What Happens After You Create Your Design 00:00:48
    2. How to Export, and What Extensions Are Allowed 00:09:44
    3. Creating Exportable Layers 00:05:58
    4. Previewing Design on Sketch Mirror 00:04:11
    5. Test your Prototype with InVision 00:04:31
    6. Proper Naming Conventions and Optimizing your Assets 00:16:42
    7. Conclusion 00:00:15
  7. Building a Mobile Interface with Sketch
    1. Build a mobile UI with the core skills you have learned 00:00:40
    2. Creating an artboard and establishing layout 00:11:53
    3. Creating a wireframe + High fidelity wireframe 00:12:05
    4. Layer + text styling 00:04:38
    5. Designing multiple screens with similar components 00:11:46
    6. Exporting elements for your application + translate to a styleguide for developer 00:08:54
    7. Wrap-Up 00:12:41
    8. Conclusion 00:00:22
  8. Using InVision App's Craft Plugin in Sketch
    1. Using InVision App's plugin Craft saves time 00:00:47
    2. How to get Craft 00:03:55
    3. Craft Sync 00:07:18
    4. Craft Library 00:13:22
    5. Craft Data 00:04:58
    6. Craft Duplicate 00:11:19
    7. Craft Freehand & Stock 00:12:14
    8. GoodBye 00:00:14