The first chapter gives you a compact overview of the most important features of the design app, as well as an introduction to the interface of Sketch. Mainly, you will get a short peek into its best features: Sketch is easy to learn, fast and lightweight, it has a clean, uncluttered UI, grids are built right in, it provides powerful export options, lets you easily adapt your design to different sizes, and most of all: Sketch is vector based. Everything you build is indefinitely scalable: a must with today’s vast array of devices.

The first screen we tackle is the details page. Everything starts here with the artboards which give your design a defined space. After you have added the first elements and text layers, you can read how to style them and change their properties. This includes an overview of the available shapes and fill types, as well as the usage of images. With the first layers appearing in the layers list, it’s also important to learn the best way to organize them. Lastly, you will employ an 8-px-grid, that gives the design some structure and avoids random placement of the elements.

A design is never finished, so we will use artboards to evolve its elements and try out different ideas. You will learn about symbols and shared styles that allow you to reuse elements and keep them in sync. This chapter also comes with some advanced techniques, such as masks, shadows, gradients, and boolean operations. The latter are especially important, as they let you combine basic shapes to form complex objects. This is also the first touch point with plugins to enhance Sketch. To round things up, we will have a look at how easy it is to recreate an icon in the design app.

In this chapter, you will not only learn how to create a logo but also how to generate ideas surrounding it. The logo creation process involves a great deal of vector manipulation. You’ll get an overview of the different point types and their specialties. Most of the time you don’t even need to create a vector from scratch, but you can manipulate a basic shape instead. Once the logo is done, we’ll also finish the details’ page.

Now that we have a detail page and an overview page, let’s introduce a new options bar that contains a couple of different icons. We’ll create those icons all by ourselves, as this is the perfect way to apply all the skills you have already learned, such as nested symbols and the usage of rotation. Furthermore, you will also learn how to create the list of places to visit a card view.

This chapter is all about one of the strongest features of Sketch: exporting assets. When doing the setup right, all you need to do to export all your different assets is to press a button. We’ll walk you through a set of iOS and Android assets and you’ll learn how to preview your designs on real devices and how to make your design workflow more developer-friendly.

We’ll focus on how to work with grids and layouts, and how to lay out the content in an ordered manner. While dealing with lots of text and images, we’ll also look at how to sync paragraph and character styles.

In this chapter, we look at a few different screen widths to figure out how any possible adaptation might look. Sketch will help us define how those elements react when they are being resized. With a little preparation, you just need to adapt the parent container and everything changes accordingly. Finally, this chapter will provide some important tips and tricks on how to best adapt the font sizes from one breakpoint to another.

After we’ve finished the first two breakpoints, we’ll look at how the available information can be arranged on a widescreen display. Therefore, we’ll adjust the grid and adapt most of the article elements to this new grid.

We’ll create four different icons to reuse them as often as possible and to combine them into complex shapes with boolean operations. We’ll use keyboard shortcuts whenever possible. Also, we’ll learn how to use these icons with a grid.

The category icons are finished, but the work isn’t done yet. This chapter focuses on their optimization. These optimizations include adapting to borders wherever possible to keep the file size down when exporting these assets.

In this course we will recap some of the topics we already have touched, but in a less formal way. Consider these as “design snacks” of sorts: fun projects that let you play around in Sketch. You will learn how to create a realistic clock, five different versions of pie charts, textured type, a round progress bar, and some logos. If you are already an intermediate user of Sketch, this is the chapter for you.