FREELessons: 19Length: 2.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Sketch Pages and Artboards

There are lots of ways you can organize your Sketch files, pages and artboards being two of the best examples. Let’s learn more about Sketch files, Sketch pages, and Sketch artboards.

2.3 Sketch Pages and Artboards

There are lots of ways you can organize your sketch files and pages, and artboards are two of the best ones. So let's learn more about these. Let's begin with artboards. An artboard is a collection of elements within Your Infinite Canvas. So, instead of designing your web page by simply creating elements in the Infinite Canvas, what you can do is, grab the artboard tool, or A on the keyboard, and I can click and drag an artboard of the desired size. And you can see, this also has a special icon in the Layers panel. Now, when you put elements inside that artboard, they are contained within. So the artboard acts like a parent to these children elements. I'm just gonna create two random elements, and as you can see in the Layers panel, those are contained within the artboard. So if I delete the artboard, those elements will be deleted as well. And when I move the artboard, my elements move with it, so that's very, very good. Now, when creating artboards, you have the option to either drag an artboard at the size you want. And as you can see on the right bottom side of my cursor, Sketch shows me a preview of my final dimensions in pixels, or, if you want a little bit more control, you can choose from Presets. Now, these presets are divided in these categories, so we have Apple devices, and you have artboards for all the latest iPhone, and iPad, and Apple Watch sizes. Or we have access to some common Android phone sizes. We can choose Responsive Web, and we'll get some presets for Mobile, Tablet, Desktop, and Desktop HD, and on the right side of each, you'll find the dimension in pixels. We also have some paper size, starting from A0 all the way to A6, and letter size. If we choose Responsive Web, and we click Tablet, that will automatically create an artboard at that particular size, and it's gonna name it Tablet. If we want to rename this, simply double-click here, and enter whatever name you want for that artboard. Now, when you have an art board selected, you can always change its dimension, either by using these handles that you'll find in every corner and on every middle on each side. So top, right, left, bottom, and so on. Or, you can hover with your mouse cursor here, and just go left or right after you click. Or, and Sketch is actually pretty smart about this, you can do numerical operations within these boxes, so If you want to add, maybe 120 pixels, you can just say +120, and Sketch will automatically calculate that. It also works with subtraction, so let's say, -50, and you can even do multiplication and division, it works just as well. You can change the orientation by basically swapping the width with the height by clicking this button, so it goes from portrait to landscape. And if at any point you want to go back to a preset, simply select that from this drop box here. On any artboard you can change the background color, by default it's white, but you can check this box, and you can add whatever background color you want. And you also have the option to include it in Exports. So if you export the entire artboard, do you want to include this background color? Well, if so, make sure this box is checked, otherwise it won't be included. Now, there is no limit to how many artboards you can have on your canvas. You can create as many as you want, with any size that you want. And this is actually very helpful for a number of use cases. For example, when you're creating a website, you can have an artboard for the homepage, an artboard for the about page, one for the blog page, and so on. Or, maybe you have a page here that's called homepage, and you wanna have different iterations for that homepage, so version one, version two, three, and four, and so on. When you're designing a mobile app, you can have the initial screen here, screen two, screen three, screen four, and so on. So it really depends on what you're doing. But the art boards is a very, very useful feature. One other use, when creating icons you can have an artboard for each icon. And you can have a whole grid of artboards, and each artboard will contain a single icon, very useful for creating the icon sets, so we can do a lot with artboards. Now, what about Pages? Well, Pages adds a whole different layer of organization to your Sketch document. Now, at some point, when you're working with large documents, you'll find that keeping all of your artboards in a single page can be inefficient, so you might wanna create different pages. And different pages have different artboards. At any time you can grab a couple of artboards from one page, and put them in another. Just like that, simply cut and paste. And this is very good for organization, as I mentioned previously. Maybe have the homepage on page one. Maybe page two is the above page or the contact page of a website. And here you can have multiple artboards for different versions, or even different elements, it's really up to you how you want to organize your work. Now, at any point, you can right-click one of the pages, and you can duplicate or delete it, and add a new page, simply click on this button, and rename your new page. If you wanna hide this, for example, if you're just working within a single page, you can simply collapse this list, and is gonna transform into a drop down. All right, so, you can use pages and artboards to organize the content in your Sketch document. But how do you organize the contents within a page or an artboard? For that you can use Layers and Groups, and we'll learn more about those in the next lesson.

Back to the top