Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:14Length:1.8 hours

Next lesson playing in 5 seconds


Free Preview: Practical UI Design With Sketch


  • Overview
  • Transcript

Sketch is a really flexible and powerful application for UI design. In this course you'll learn how to use its tools to create a neat admin user interface. From shapes to artboards and symbols, buttons, colors and typography, we’ll explore a simple and efficient way of building many interface elements. We’ll cover design skills, document management and ultimately exporting your assets for a workflow you can rely on time and again. Let's get started!

Sketch is an amazing application for digital design, learn everything you need to get started in our course Up and Running With Sketch. Up to speed with Sketch? Learn how to use Craft, a plugin for Sketch, and accelerate your workflow by creating rapidly with real-world content in our course Craft: Designing With Real-World Data.

1. Introduction

1.1 Introduction

Have you ever used Sketch? If you haven't, you're seriously missing out on a very well built product. It's a graphic design application and you can use it to create user interfaces, icons, mobile pages and so much more. It's fast, powerful, and really flexible. In this course, you'll learn how to work with Sketch and it's not hard at all. I've been an avid Photoshop user for many years now but learning Sketch was a breeze. It has a very simple interface and really awesome tools. In the first chapter you'll learn about the interface and the tools you can use as well as some of the awesome features of Sketch. Then you'll learn how to build a simple admin UI for a fictional blog management system. You'll build a dashboard, a page that lists all posts, and a page that allows you to create a new post. Now, there won't be any coding involved and you don't have to be familiar with Sketch. Instead, just pay attention and practice what you see in these lessons. So, without further ado, let's get started. I'm Adi Purdila. Welcome to Practical UI Design with Sketch.

2. The Basics of Sketch

2.1 What is Sketch?

Hi, welcome to the first lesson. In this chapter, you'll learn the basics of Sketch. And a good place to start is a quick tour, that shows you where to download it and how the app looks like. So let's get started. You can download Sketch by going to its website, bohemiancoding.com/sketch. Now, this is a Mac only application. So if you have Windows, you won't be able to use it. And being a Mac application, you can buy it from the App Store. You can also download a free trial. To move on, go ahead and download the free trial or buy it straight away if you want. But, probably, the best thing you can do is download the free trial first. So, once you do that go ahead and install it, just by dragging it into the application folder and then open it and this is what you'll see. So, right from the start, you can see that it looks like a native Mac OS application, from the toolbar on top to the sidebar to the fields. Everything looks really nice. Now there are a couple things that I wanna show you here. First of all, it's the toolbar. The nice thing about the toolbar is that it's customizable. You can choose a display mode. And you can choose what icons you want and where you want them. So for example, if you don't want this mask icon for example you can simply drag it away. If you want a new tool, let's say you use the rectangle very often, well you simply click and drag this and you'll always have it there at your disposal. If for some reason you want the default sidebar, you can simply drag this one, and all of the changes that you made will be deleted, and the toolbar will be replaced with the default one. So, right there, you have big potential for customization, which is always a nice thing. On the left side we have a side bar. Now this side bar will host the layers. And we'll talk about those in lesson number four. Also, in lesson number four we'll be talking about pages, which can be controlled with this drop down here. You can rename pages, you can add new ones, and so on. Down at the bottom we have a filter field, which will be used to search for specific layers. On the right side we have another sidebar, which is used to display and change properties for selected objects. So for example if I draw a rectangle here, you can see I have options for the position, I can change it from here. For size, again I can change the size, I can even perform math operations here. For transformation, if I wanted to rotate it. For radius, opacity, fills, borders, and a few cool effects like shadows, inner shadows and blurs. Now, the cool thing about shadows and inner shadows, and actually all of these effects, is that they are easily reproduced in CSS. So Sketch is designed in such a way that whatever you make here can be reproduced in CSS later on. Whatever effect, you can either add multiple shadows here. Yeah, so both of these shadows can be easily made with CSS. So this is great news for UI design. Also on the bottom here you have a button that says Make Exportable. Now if you click it, it's gonna give you some options and basically you can export that image directly from the application. We'll talk more about that towards the end of the course. Also, if I have two objects selected, I can use the alignment tools. For example, align horizontally, vertically, to the top, to the right and so on. These work just like you'd expect from a graphic design application. Now, there is one last thing I would like to talk about in this lesson and that is the infinite canvas. Now with a typical graphic application, you would have a predefined canvas, with a certain height and a certain width. Well, not with Sketch. Right here you have an infinite canvas. So, watch as I zoom out, at just how big this canvas is. There's virtually no limit to it. You can resize your objects. Right here, as you can see, I have a rectangle that's almost 6,000 by 4,000 pixels. In Sketch, you have the option to show a couple of helper tools. For example, you can show the rulers if you want. And notice what I was talking about, the infinite canvas. You can go anywhere you want with your elements. Or you can show a grid, and you can alter the grid settings, like the block sizes, the thickness of lines. And also you can show a vertical grid. Right, and you can control the number of columns, the total width, the offsets, and also the gutters. So let's say for example you're building an application with Twitter Bootstrap. Well Bootstrap has certain dimensions for its grid, like certain widths, certain gutters, and so on. Well, we can easily change those using the layout settings. Or let's say you're using the 960GS grid system. This is actually, I think it's based on the 960 grid system, but you can virtually use any kind of grid system, because you have access to all of its settings right here, and that is very cool. Okay, well that's about it for a quick tour of the application. Next time on Practical UI Design with Sketch, you'll learn about the available Sketch tools, from rectangles, lines and ovals to freehand paths. So, I'll see you there.