Diane Cronenwett, UX designer, highlights common tools and shortcuts in the design software, Sketch. This course includes a closer look at the toolbar, inspector, layers panel, shapes and how they are used for designing mobile interfaces.
- [Instructor] Sketch is a very powerful application for Mac, and has a lot of features to help you design the interfaces you want. Let's take a look around the Sketch interface. This top area is the toolbar. This can be customized on how you like to use the app. You can add anything from this menu that you think might help you speed up your workflow. The defaults work for me, so I won't change anything. At the top left there is a plus sign for the Insert menu. When you expand that, you can see some options that give you a sense of what kinds of things you can do with Sketch.
I'll point out some of the key tools that I commonly use for designing interfaces. The shapes I most often use are the ones that conveniently have an easy shortcut. For example, instead of clicking the Line button, I can simply use the shortcut key L. And you can see the shortcut key on the right of the shapes in these uppercase letters. We will be using the Text tool and the Artboard shortly. I do, however, wanna point out the Symbols and the Styled Text options. Symbols and Styled Text options are reusable, and if you have components for a style guide that you're working from for your app, such as button styles, headers, or common layouts, this might be a good use for converting those into a symbol.
And those would then show up in this menu. In the left panel is the layers panel, where the pages and layers are located. So for example, if I put a rectangle in this page, using the keyboard shortcut R, you'll see that it creates a shape on page one, which is then treated like a layer. I can then edit the layer label directly to give it a new name. Layers are associated with the pages they are on. Once you switch pages, you are working with a new set of layers for that page only.
You can also hide the visibility of the layer by selecting this eye icon to the right of it. You can create a new page when clicking on this plus button on the top right of the layers panel. Over to the right side of the application is the inspector. You'll be using a lot of the options in the inspector as we create our app together. The first section at the top covers positioning of elements, including transforming elements, and flipping them horizontally or vertically.
The next section is for text styles. Using the keyboard shortcut of T, we'll add some text in here. If you have a text style that you'll be using over and over again, such as a title or subtitle, this might be a good use for creating a text style. This section below covers all the text-related options with sizing, line height, and character spacing. The last sections cover Blending, Fills, Borders, Shadows, and Blurs. We will be using some of these today, but definitely experiment with these options.
This is a basic overview of the main elements of Sketch that we'll be working in. Let's dive into Artboards next.
- Integrating InVision and plugins with Sketch
- Using symbols
- Setting up a grid and layouts
- Adding tabs
- Creating prototypes with InVision
- Exporting assets for iOS and Android development