LearnUX.io Awwwards Honorable Mention

Sketch App Course

  1. Welcome to Sketch 03:28

    Welcome to Sketch

    Let me introduce Sketch App

  2. Navigation through document 08:05

    Navigation through document

    See how to work and navigate on the canvas

  3. Making selections 06:00

    Making selections

    Explore options for selecting elements inside Sketch

  4. Pages and artboards 07:02

    Pages and artboards

    Check out when to use pages and artboards

  5. Layer organization 04:06

    Layer organization

    Don't get lost in your project - see how to orgnize your layers

  6. Boolean operations 07:10

    Boolean operations

    See how to easily modify your shapes using boolean operations

  7. Working with shapes 09:54

    Working with shapes

    Let's create some shapes and icons inside Sketch

  8. Vector tools 10:21

    Vector tools

    Chcek the options of vector tools and create your own vector shapes

  9. Transforming Shapes 08:34

    Transforming Shapes

    Scale, rotate and change your shapes inside of Sketch

  10. Advanced transformations 07:27

    Advanced transformations

    Work even faster and more efficiend with your design elements

  11. Aligning elements 11:30

    Aligning elements

    Align objects using simple yet powerful aligning options

  12. Resizing options in Sketch 09:58

    Resizing options in Sketch

    Prepare your assets to be scaled to different resolutions

  13. Using Masks 09:22

    Using Masks

    Working with masks in Sketch will let you crop any layer or group

  14. Exporting Assets 11:30

    Exporting Assets

    Check the tips for saving and optimizing images from Sketch

  15. Mathmatical Operations 05:59

    Mathmatical Operations

    Use some math in the input fields inside of Sketch

  16. Pixel Grid 05:08

    Pixel Grid

    How to optimally set the grid and aligning options

  17. Working with Symbols 15:23

    Working with Symbols

    One of the most powerfull strategy for re-usable elements

  18. Style Overrides 08:24

    Style Overrides

    Work with more advanced text and style overrides for Symbols

  19. Sketch Libraries 10:50

    Sketch Libraries

    Digging even deeper in organizing assets into design libraries

  20. Data in Sketch 09:01

    Data in Sketch

    Use dummy data sets or load real data from JSON with Craft!

  21. Working in 1x Scale 09:12

    Working in 1x Scale

    See why working in 1x scale is crucial for your UI

  22. Grid Layout 07:52

    Grid Layout

    Grid is the fundament of any well designed UI

  23. Drafts and Mockups 07:04

    Drafts and Mockups

    Start with simple doodles and then refine ideas

  24. Choosing Colors 14:16

    Choosing Colors

    List of tools that will help you choose right colors for your project

  25. Colors and Symbols 07:56

    Colors and Symbols

    Apply color settings to your style guide in Sketch

  26. Typography 07:30

    Typography

    Working with fonts inside of Sketch and using the Type Tool

  27. Creating Type Ramp 08:19

    Creating Type Ramp

    Define font sizes and rhythm for sizes for your project

  28. Designing Top 11:31

    Designing Top

    Creating our firs design asset for the app

  29. Home add-ons 11:30

    Home add-ons

    Creating assets for the home screen

  30. Organizing Assets 12:06

    Organizing Assets

    Keeping the layer and group structure well organized really pays of

  31. Different Home Screens 10:34

    Different Home Screens

    Some alternative versions for the home screen

  32. Button Variants 07:25

    Button Variants

    Working on some different buttons versions

  33. iOS Preview 02:59

    iOS Preview

    Check out your project on a real device

  34. Login Screen 12:06

    Login Screen

    Creating next screen of our Home App in Sketch

  35. Home Screen 09:32

    Home Screen

    Working with the home screen of our app

  36. Main Screen 09:17

    Main Screen

    Check out some cool techniques while working on the next screen

  37. Settings Screen 12:25

    Settings Screen

    Design of the Settings screen for the Home App

  38. Devices Screen 14:06

    Devices Screen

    Tips and tricks while working on the next page

  39. Actions Screen 10:48

    Actions Screen

    This is the page with predefined actions for our smart home

  40. Action Detail Screen 05:27

    Action Detail Screen

    Select between watching TV, playing games and more

  41. Bottom Menu 07:49

    Bottom Menu

    Designing next asset for our app in Sketch

  42. Alarm Screen 11:49

    Alarm Screen

    Discover great technique for calculating space and creating parts of shapes

  43. Senses and Blinds Screen 11:27

    Senses and Blinds Screen

    Some other cool tips on using Sketch and the next screen

  44. Lamp Screen 14:14

    Lamp Screen

    Let's create next screen with some extensive use of symbols and readymade assets

  45. Temperature Settings 06:13

    Temperature Settings

    Next screen we will create in Sketch is the Temperature Settings screen

  46. Cameras Screens 10:27

    Cameras Screens

    Using masks and images will let us create next screen

  47. Porting to Different Screens 12:51

    Porting to Different Screens

    Some considerations on porting your design to different screens

  48. Intro to Marvel 07:58

    Intro to Marvel

    Take a look at how to create rapid prototypes in Marvel

  49. Defining Hotspots and Transitions 13:32

    Defining Hotspots and Transitions

    Use Marvel for seamless animations between pages

  50. Readymade Prototype 05:39

    Readymade Prototype

    Preview the prototype in the browser or send it out for feedback

  51. Using Sketch Cloud 06:04

    Using Sketch Cloud

    Utilize Sketch Cloud to access your design files anywhere

  52. Prototyping in Sketch 11:35

    Prototyping in Sketch

    See how you can create interactive prototypes inside your Sketch files

  53. Thats all for now 00:49

    Thats all for now

    Thank you for your attention

Sketch App Course

Duration: 08:01:34 Last update: 4 years ago
  • Key Points
  • Author
  • Source Files
  • Who is this course for?

Sketch is an application which has already won the hearts of UI and UX designers around the world, even though just about anybody can learn how to use it. Among all the advantages, too numerous to list here, Sketch has a big disadvantage – it is only available for Mac OS. If you are one of the lucky owners of a Mac, though – it would be a waste not to make use of the potential of Sketch. Let me assure you that designing interfaces has never been so fast, and most of all – pleasant!

  • Techniques and shortcuts
  • Tips & Tricks
  • Exporting graphics
  • Vector Tools and Symbols
  • Colors, Icons, and Typography
  • Practical UI Projects

Greg Rog - “My work is all about design, coding and education. For over 10 years I’ve been a professional designer, design lead and UX consultant for companies such as Microsoft or Google. I work closely with Adobe as Community Professional. I also run a software house and a training facility, speak on design conferences and more. I’m curious, passionate and I love sharing knowledge.”

Sorry, you don’t have access to the project files.

Why don’t you subscribe and get full access throughout the site?

Sketch is a tool which can (and should;) be learned by all Mac users. It is a simple application you can use to work with vector graphics, or edit bitmaps. More experienced users may ask why they should learn how to work with such a simple tool. As it turns out, the potential of this fantastic app is immense! Every technique you discover makes you exclaim: “So it can be done!” The materials collected here will satisfy beginners, and experienced designers, and even those of you who already use Sketch!

Reviews (2)

Get the most out of Sketch

Why Sketch?

Because this app was created for one thing only – efficient vector graphics design for the purpose of User Interface. Sketch has already gained a distinct advantage over less efficient applications overloaded with various functions, such as Photoshop and Illustrator, simply by its amazing performance. Just like a surgeon who uses a Swiss knife with a confusing assortment of tools instead of a single and precise scalpel – best tool at his disposal. Faster operations, smaller files, better efficiency, dedicated UI tools and hundreds of useful, community created plug-ins will make you entirely depend on Sketch!

Get the most out of Sketch

The course has been designed to show you full functionality of Sketch, to teach you how to best make use of its potential. Some of the topics are best presented over the course of a few, theoretical lessons, for example exporting graphics. Others, such as preparation of resources for a new project are better explained in practice. That is why I decided to divide the course into two parts. The first one is a greatly compressed compendium of hundreds of important techniques, key shortcuts, tips and tricks. Because of how vast the knowledge condensed in the video is, it was recorded with an extremely fast narration, so if you need to… don’t hesitate to stop the video and go back to any of the lessons, even the basic ones. The other half of the course is entirely practical. We focus on the use of learned techniques to design a few screens of an intelligent home app. Studying both parts of the course will teach you all the necessary theoretical concepts and equip you with practical skills needed in your everyday work on projects.

Compressed Theory

The theoretical part serves as a compendium of almost all tools, shortcuts, tips and tricks for Sketch. Just like the blue pill in Matrix, it will fill your head with creative ideas and make you become familiar with all functions of Sketch. Come back here often, because all of the techniques presented in the lessons, and some shared in secret, will serve you well in your future projects. It might be theory, but it is far from boring!

Get the most out of Sketch
Compressed Sketch Theory

Sketch Interface & Tools

You will learn how to efficiently move around the interface, organize your files in Pages or Artboards, how to maximize layer, group, and symbol organization functionality. You will also learn about the tools discussed further in the course.

Exporting graphics

You are going to learn various means of exporting graphics, whether in the form of ready files suitable for modern devices, or a pure SVG/CSS code. You will see how to prepare components for exporting properly, so the file size and required format gets exported automatically.

Vector tools

Working with Sketch is based on vectors. Creating icons and working with shapes are simple, fast, and pleasant. One of the most noticeable advantages of such a solution is the possibility to export a project to any device or scale. You will learn good habits for working with vectors, and the most essential techniques and shortcuts.

Exporting graphics and vector tools
Sketch Symbols and Libraries

Colors, Icons, Typography

You will see how to create a Style Guide with colors and typography, in practice. You will also learn how to make icons reusable in the project, so it stays consistent. This is very important for professional interface design.

Working with Symbols plus Libraries

Symbols in Sketch consist of reusable components, which can be used to form complex, coherent applications in extremely fast. This is one of the most powerful functions of the new versions of Sketch. Nested Symbols and their advanced settings, such as Overrides, will be used in our practical project. Because of Symbols, making use of Atomic Design – namely creating atoms, molecules, and organisms – becomes viable and incredibly convenient. Exporting the files to CSS or SVG is no longer out of reach, as well.

Practical UI Project

The second half of the course is focused on designing a complete project in Mobile First scheme. It will serve as a testing ground for particular combinations of techniques you must learn and use in the real projects. First, we configure the Grid and Artboard settings, then we move on to designing the icons and Symbols, and finally we create final application boards. Testing all the functions of Sketch you have learned about in theory, will showcase their practical usage and teach you good designing habits.

Working prototype

In the end, thanks to a simple method (so–called Rapid Prototyping) and a free Marvel App, we are going to design a working prototype, which can be sent, e.g. via a text message, to a phone and launched. We are going to plan board transitions and animations, and do it all in record time!

Project in Sketch