Class Project 07 - Colors & Columns

All right, class project time, we're going to combine two of them here, mainly because columns was boring, and I didn't want to set it as its own class project. So I've tied it in with colors, we're going to do both of these, the two Cs, the boring C, boring columns, and exciting colors. 

Columns is, I want you to create your-- you probably haven't yet, is we've got our Lo-Fi wireframes, create the two pages for our Hi-Fi for mobile and desktop, and in those I want you to add the columns. So remember, 12 for desktop, 6 for mobile, and each of those new pages needs to have four frames. 

So this is what I mean, we'll create, you've only got this page at the moment, and this page, create these two, name them, and make sure that there are, 'Shift 1', see everything on your page, there's these four frames, 1, 2, 3, 4, same with desktop, make sure there are columns. More exciting? Pick colors, don't be-- this can be a bit freaky, depending on how experienced you are as a designer. Don't worry about it, we can adjust these later on, they can be terrible, we will start sharing stuff with the group a little bit later on, and you'll be able to get advice from people, which would be great, like, I'm never a good color picker, like, I don't know, that looks all right. 

So pick your own colors, do the same sort of thing. So draw like a little grid, like this, pick out primary, secondary, and accent color, plus all the grays, and where do you get these colors from? You can get them from your Mood Board, you might find some colors in there that you like, you want to appropriate or steal, or you might go to one of those color inspiration sites that we looked at before, and kind of get your colors from there. 

Do the grid and then create styles, because what I want you to do when you're finished, is to hand up-- is to send me a screenshot, of all the named files here, or the named colors, just to show that you can do it, and you've done it. Don't worry about sending me a screenshot of the columns, boring old columns, I'll trust that you've done them, so that's the class project. 

One thing I want to show you while we're in here, is, I kind of made a mistake earlier in the course, well, not a mistake, just, I want to show you something. So the columns here, on my mobile, is, I didn't put any padding on the outside, I like having padding on the outside, you don't have to have it, but let's do this one first. 

So I'm going to say, let's have a little looky-look at the columns, and I'm going to click on them here, is we've done a gutter of 16 in between the columns, but I actually want a margin of 16 as well from either side, so that when I am drawing things like this, we're actually kind of like lining up, and there is, it depends on your design, if you don't want to go straight to the edges here, you cannot have this margin, but I need it, I like it. 

So I'm going to copy and paste it across all of them. Who remembers how, it's a weird thing, right? Click on the name, go over here, click in this random area, not there, not there, there, copy it, I'm going to say, you, I'm holding 'Shift', clicking you, and you are going to go and just paste, oh, now I've got two of them, didn't realize that happened. So now I've got two of them, on each of them, great, Dan. Which one do I delete? Is it the bottom one? It is, there you go. 

All right, we learned something, you can place more than one set of grids. I know that when I'm doing horizontal and vertical, later on, when you're a bit more advanced, you might start doing grids, columns, you can do, I want you to do rows, you can start doing rows as well as columns, gets a bit hardcore fancy, there. We've got our columns, so do that, columns on this, columns on desktop, make up some colors, we can change it later on, and because, remember, it's a style, your color style, we can adjust it easily later on. Make some tweaks based on client feedback, and maybe student feedback, when we start sharing it all together. 

All right, that is it, class project over, go do it, I will see you in the next video, in a minute.