Chapter 1
An Introduction To Sketch
Sketch is a vector-based interface design tool, which means that everything built with it is infinitely scalable — a must with today’s vast array of devices. But it still has some essential bitmap editing chops, so you never need to leave its comfy environment. There’s just one caveat: Sketch is Mac-only — but you knew that already, right? Fortunately, there are a few options to make your developer friends on Windows happy, but more on that later.
You can download a trial version of Sketch at sketchapp.com. If you are ready to take the plunge (trust me, after a few pages into this book you will be) there’s currently an investment of US$99 to make, which includes one year of free updates. After that, you can either keep using Sketch as is or pay the same amount for another year of updates. Please note that this book is based on Sketch 41.
All the Features
Sketch offers a wealth of tools and features to make it the perfect application for today’s designer: It lets you design interfaces, websites and icons with ease. I have also used it with success to create logos and even print material. Some notable features of Sketch:
•Easy to learn: allows you to understand the basics rapidly, but still offers enough tweaks for the power user.
•Fast and lightweight: small file sizes, fast navigation and response.
•Clean, uncluttered UI: everything at a glance; no complicated sub menus or dialogs.
•Vector-based: resize elements without losing quality; everything remains sharp even if you zoom in.
•Pixel-perfection: get the perfect result with various pixel-based aids.
•Copy CSS attributes and SVG code: go from design to code in no time.
•Pages and artboards: organize your designs in a single file.
•Flexible Boolean operations: combine basic shapes to create complex forms that remain editable.
•Powerful export features: export different sizes with a single click.
•Symbols and shared styles: easily reuse elements and layer styles.
•Keyboard shortcuts: efficiency is key — almost everything can be achieved with a keypress.
•Built-in grids and layouts: set them up quickly to give your work some constraints.
•Group resizing: Adapt your designs to different sizes with ease.
•Sketch Mirror: Preview designs on any device.
About This Book
Before we start, a few words about how this book works. I actively invite you to follow me along and create your own version of the projects. This is essential to learn how to use Sketch, as it shows you every aspect of it on the go. A centerpiece of the book is workflow efficiency: you will learn how to perform actions as quickly and correctly as possible, mainly with the help of keyboard shortcuts and the clever use of the available features. Every essential part is described in the necessary detail.
The first chapters of The Sketch Handbook are targeted mainly at beginners — both to design apps and design in general. If this is your first time using Sketch you should follow closely. As the book proceeds, the more advanced it gets: I provide fewer and fewer instructions and rely on things already mentioned; keyboard shortcuts covered earlier aren’t mentioned again and more advanced topics come to the fore. The last few chapters in particular are geared more towards intermediate users, but beginners will still get enough information that they can follow along. Lastly, if you are interested in a condensed overview of many different topics and techniques, I suggest you take a look at chapter 12, Mini Projects.
Between the instructions you’ll find regular info boxes that give you a deeper understanding of a certain related aspect of Sketch. If you are interested in a certain topic you can always read them immediately, but I advise you to save them up for later and digest them once you are done with the basics of Sketch. In addition, there are also numerous quick tips, small portions of information at the right time, that you should memorize for an immediate productivity boost.
For updates about this book visit sketch-handbook.com, where you can also subscribe to the newsletter.
Info Box: Bitmaps vs. Vectors
Before we go in-depth with Sketch let’s revisit the basics a little bit. Photo-editing apps like Photoshop or Pixelmator are based on bitmaps, which means that everything is made up of a static grid of tiny, multicolored pixels. If you scale these raster images, the software either needs to fill in the gaps, which results in a blurry image, or enlarge the pixels, so that you start to notice them after a certain point and get a grainy image. On the other hand, vector-based apps like Sketch, Illustrator or Affinity Designer use collections of points connected to one another with lines: vectors. Since these points are mathematically described they can be resized infinitely and everything remains sharp.
Fig. 1.1: Left: Raster image. Right: Vector image.
The Interface
The main differentiator of Sketch is its uncluttered, simple interface and ease of use, with the canvas taking up the most space of the app on screen. It is infinite in nature, meaning you can place as many elements on it as you want. But you are still able to organize the canvas with “Artboards”, which give your designs defined boundaries and let you iterate quickly, or “Pages”, which enable you to put all your different screens into one file.
Quick tip: You can have as many artboards on the canvas as you like, but try to separate them into pages as much as possible for performance reasons. Read more about pages in chapter 4.
Fig. 1.2: Artboards let you iterate quickly. Here you see all the versions that led to the final app design.
All elements you put on the canvas also appear on the left in the layers list, where you can reorder, rename and group them. This way, you’ll always have an overview of what’s going on with your elements on the canvas. The higher up in the hierarchy the layer is, the higher it is stacked in the drawing area. Layer properties can be changed in the inspector on the right, where there are controls for size, position, colors and effects, like shadows and blurs.
Fig. 1.3: The layout of Sketch.
The most important functions of Sketch can be found in the customizable toolbar at the top, in the form of icons; but the true power of the program lies in its keyboard shortcuts. Almost everything you can do in Sketch is accessible with a keystroke, and the things that aren’t can easily be customized. You’ll not only work faster this way, but also be more efficient — and efficiency is the key feature of Sketch.
When you hover with the mouse over a layer it gets a blue border: this helps you to identify which entry in the layers list belongs to which layer on the canvas and vice versa. It also indicates the selected layer to click on. The moment you start to organize layers into groups — and you will do that a lot — the importance of the Cmd key becomes apparent: holding it while you click on a layer on the canvas allows to select it even when it’s nested in a group. It wouldn’t be selectable on the canvas otherwise. Another key you should familiarize yourself with right from the start is Alt: it lets you measure distances from the selected layer to other elements, rulers or the grid.
What can’t be accessed using the UI elements mentioned so far is hidden away in the menu bar, but with a cleverly customized toolbar and by learning essential keyboard shortcuts you won’t linger here often.