Beginning the Web Page Design Project
Lesson 2 from: Intro to Sketch for Screen DesignChris Converse
Beginning the Web Page Design Project
Lesson 2 from: Intro to Sketch for Screen DesignChris Converse
Lessons
Introduction to Sketch
05:23 2Beginning the Web Page Design Project
05:10 3Designing the Header Section
24:57 4Designing the Main Section
12:16 5How to Replicate Layouts to Other Art Boards
12:24 6Creating the World Map Section
06:06 7How to Draw with Sketch
28:37 8Exporting Assets
12:31Lesson Info
Beginning the Web Page Design Project
When you first launch Sketch, you'll get this splash screen here. You can toggle between the Templates or the Recents tab. The Templates tab, we'll also see this in the artboards when we get into Sketch, and basically, this is just a whole group of different common sizes for things you might design inside of Sketch. The Recents tab here will have any project that you have recently worked on. And so I'm just gonna come down here and double click on New Document, and that's gonna launch us right inside of Sketch. So as I mentioned before, Sketch will look a lot like tools like Keynote, Numbers and Pages, from Apple. We have a toolbar across the top. Right-clicking on the toolbar and coming down to Customize will give you the ability to change the number of tools, and there are a ton of tools down here. You can just add and change and move these around and basically build your own custom workflow for the toolbar across the top. All of these items are also available in the menus as well. W...
e'll be taking a look at some of that. On the left-hand side is the Pages panel. So, in the Pages panel, we have a little icon here that will toggle open, and in addition to pages, this will show us artboards and layers. So it'll be a little bit different at first using this sort of metaphor for the left-hand side. All of the artwork we create will show up in layers. Layers can then be grouped into artboards, and artboards can be grouped into pages. So let's just take a look at how that would look real quick. So when I toggle this little button here open and closed, this will show me information that's on this particular page. So I'm looking at Page 1. Up here under Pages, this is where I can rename this, so I'm gonna come in here and name this Design. Press Return. Down here, I see the page, and then if I had artboards or layers, they'll show up down here. If I want to create a second page, I can click the plus sign here and I will see Page 2 showing up here. I'll just rename that. So when I click between the pages, that's in the top area here on this left-hand panel. When one of these is selected, I will see the artwork that relates below. So to demonstrate this, on the Design panel, let's come up to the Insert menu. We're gonna come down and choose Artboard. We're gonna be using this Insert panel a lot. So when I select Artboard, over on the right-hand side, I now have all of my artboards broken into different groups, and you'll notice these groups match the groups we saw on the splash screen when we went to Templates. So if I come to Devices, for example, we can see common devices from Apple. Material Design, Responsive, Paper, and of course, we can create our own custom sizes. So to begin, I'm gonna come down here and choose Responsive Web, and the one I want to choose is Desktop HD. So I simply select that, and now my artboard's been created. I'm recording on a slightly smaller screen here, about 720p, so in order to see this artboard, I'm gonna come up to the toolbar and click on the negative sign next to Zoom, and zoom out. So now here we can see the artboard. So this is 1440 pixels by 1024, and we're zoomed out, and we can see the zoom set here to 25%. So now we can see over in the Pages panel, under the Design page, we now have one Desktop artboard. If I were to come in here real quick and let's say just simply draw a rectangle, I have my first layer, so now we can see the total hierarchy of how this panel works. We have our pages listing here. When one page is selected, we have that selection down here, and then we can see an artboard and then a layer, so this will become really important as we work inside of Sketch. As we get more and more items into our layout, this is gonna become more and more important for helping us select items and be able to group and manipulate and even copy this to other artboards, so just understanding the hierarchy will help out a lot. Now, we're not gonna use multiple pages here, because I'd rather use artboards, so I'm gonna delete Page by right-clicking and just saying Delete Page. Okay, so I'm gonna delete that rectangle that we have. I'm gonna hold the space bar, click and drag to move around. If you're used to the Adobe interface, that is picked up from Adobe, so I can hit the space bar and move around and get the move tool. Let's add another artboard. So let's come down to Insert, choose Artboard, and we're gonna come down to Material Design and we'll choose a 9-inch tablet portrait. So I simply click that and this will pop on the stage. So these are the two that I'm gonna work with for now. Now I'm gonna switch back to the Project Files, and what I like to do is create a file of all the colors I want to use for my document, so now I'm gonna grab the colors png file and I'm gonna drag and drop it right inside of Sketch. If I drop it over the top of an artboard, it's going to be assigned to that artboard, so now in the Layers panel, I can see that the colors artwork, and this is the icon for image, is now inside of my Desktop HD. If I were to grab this and drop it into Tablet, that layer's now assigned to Tablet. But now what I like to do is, I like to move this outside of all the artboards, so I'll just drag this over to the left, in a sense, making my own artboard for just this particular block here, so now this is sitting outside of that area.
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
Anastasia Rozhkova
Liked it very much! I am completely new to Scetch and UX design - and it was a really good and not to long intro. Thank you very much
Hannah Pearce
I thoroughly enjoyed this Intro course to Sketch by Chris. He broke things down and explained things clearly, and it was great to see the layout come together. I picked up so many tips and tricks, which I hadn't come across before from youtube tutorials. I would definitely recommend this Intro course.
Linda
Chris is really clear on explaining how things work on sketch. He makes it fun and easy to follow along as we go.