Site layout with grids

- [Rik] Aria sent logo of design, and because we've set this up as components, if she did have any revisions, it'd be relatively easy to do this all in one place, but luckily, she has approved this. So we're gonna move the logo design into, completed. So the next thing that we're gonna do is obviously work on the web layout, we're gonna move this into, in progress. Now what I've just quickly done is I've set up a new page, in our project called sites, and I've added all of my photos of my wireframes.

So what we're gonna do is we're gonna work on these wireframes, and actually turn them using the styles that we've done in the components that we've made, into something a little bit more real. So the first thing we're gonna do is we're gonna work on the homepage, and we're gonna basically make this header, a component. And the reason for that is we wanna have this header on every site. If we change the header on one page, it changes everywhere, pretty useful.

So, I'm just gonna move over here for now, I'm just gonna leave this here, and I'm gonna make a new frame. So, frame and I'm gonna make fairly big area here. Now firstly, how wide do we go? It's a big question. Now generally, I like to go somewhere around 1400, so 1400-ish. Now this is generally a good size of our page just based on that kind of like web layout in general. So this is the kind of way that I'm gonna think about this page.

The next thing I want to do is actually add some kind of layout to this. Now, obviously, most websites are sensitive in the middle of the page, if my browser was quite big, and you know, it makes a lot of sense to just kind of contain things in the middle. So, on this frame, I'm gonna give it a name, of course of home. This is the kind of homepage, and what I'm gonna do is add a layout grid.

So I'm gonna add this here. Now by default, this is gonna add a grid layout of 10 pixels, and you can kind of see if we zoom in, it's given us this kind of like notebook style thing. Now we don't want it to be a layout grid across and down, we want it to be a normal column layout. Now the reason for wanting a normal column layout, is we want everything to align on our site. So for instance, if we go back, we want our header to align with this section, which aligns with this section, which aligns with this and this and this.

And it makes sense to kind of align things in a certain way, because this is just good practice. Now, I've worked with designers in the past, sometimes where they haven't used a grid, and it's been a nightmare. This will actually help you with your web layout as well when we turn it into code. So we're gonna just change this grid. And to change this grid, I'm gonna click this pixel icon, and I want it to change from a default grid, into a column grid.

Now here, what we can do is pick how many we want. Now I'm gonna pick a 12 column grid. Why 12, why not 13, why not 10? Now luckily, 12 is a good number 'cause it's divisible in lots of ways. It divides into six, halfway across, halfway across, divides into four, divides into three, divides into two, and then into one. So, it's a nice round number. So we can basically attach as many columns, and to kind of lay our sites in lots of different ways.

Now what I'm gonna do is just change this from not being stretched to being in the center. And you can see here, this is kind of like a very thin layer. So what do I wanna put my width and my gutters. So my width is the red lines going down the page, and my gutter is the gap between them. So, I like to do this on a kind of a pixel way, so rather than it being 20, it's either 16 or 24, personal preference. So I'm gonna do this as 24.

That's a bit of a gap, and my width, again, I like to do this in the same kind of way, maybe something like 80-ish, maybe that's a little bit too wide. Maybe I wanna do something like 64 for instance, a little bit thinner, maybe somewhere like 72. So, that for me feels pretty good. So what I've got on this page is something to align to. This won't actually show in the final designs, I can turn it off, to turn off, I just presses I and it disappears.

But this is something I wanna kind of add to every single page on my site. So what I'm gonna do first of all is, what color do I want this page? Do I want this in on the white background? Do I want it on the black background? It's kind of up to me. Well what I can do is say, well, maybe I want this on a black background. So I can just quickly go to fill, and I fill in with a black background.

Now, that does make it harder to see with my column grid, so I can just go and change it. So I'm gonna go back, change the color to something else, maybe it's too red, maybe I wanna make it darker or lighter, maybe I wanna kind of change the opacity so it's a little bit more filled in. So I can play around with some of these colors, and add this stuff in. But this is kind of where the layout is gonna sit and live on my website.

Now the first thing I want to add to this site is of course, the logo. Now, the moment my logo, if I go back to assets is in two parts, it's in logo and logo type. Now this I want to stay consistent as like a site logo. So, I'm gonna quickly just go back to my layers. I'm gonna go back to my brand, and I've got this logo here. So I'm gonna select both things together, and I'm gonna right click, and create a new component.

And this component is gonna be called, the site-logo. So now in assets, I've got my logo, logo mark and logo type, and I can just add this to my page as I need. So now I'm gonna switch back to layers, and go back to my site. And in my assets, I can actually just drag this into my page, I just put it wherever I want it to. Now, of course, by default, it's a little bit big, so I'm just gonna make it a little bit smaller, maybe take up something like four columns, for instance, and put it in the right place.

Now with this header, I do wanna kind of give it some space from the top. What I can do is select this, and press Alt on a mark, and see how far this is from the top, 68. Maybe I wanna make it something like 80, I can change the numbers up here as well. Maybe I wanna move it down, something like 80 might feel quite good. Now again, if I go and see maybe I'd want to turn this layer, lay it off and see how it looks.

Looks pretty good to me, turn it back on again just to lay things out. And what I want to put in here is some kind of navigation. So this is just some text, I'm gonna add some text to the site, what color do I want it to be in? Well, if I write the word work for now, that's fine, I can just see it there. This is currently heading one, that seems cool to me. Maybe I wanna change its color to pink.

I need to select it all first though, select it into pink. There we go, looks pretty good. So I'm gonna put in Work, I'm gonna put in the About page, and I'm gonna put in the Contact page. So I'm just gonna start to fill this out, to see how it looks. There we go. Now again, if I select all three of these, I can actually align it in the center, by clicking this, align vertical centers, so they're all in the middle.

And I'm just gonna quickly zoom in, and actually start to play around with this. So again, I want this Contact to be on this edge here, and then About to be a little bit further over, again, if I press Alt, and then look between them, 31, maybe 32, I like round numbers, 32, eight pixel grid. So again, I'm just gonna move this over, and that's on 32 between them, 32 between those. Now, of course, what I might wanna do is, say one of these is selected, and the other one isn't.

So again, I'm just gonna turn off this grid, just to see how it looks. Looks pretty good. Work maybe is gonna be selected, so I'm gonna select these two, and turn them into white. So this is highlighted, and these two aren't. Now what I might wanna do is on the other side, on the other pages is have this the other way around, so Work goes from pink into white, and About is highlighted instead.

But this is gonna be how my header is gonna look generally. So, because this is more general, I'm gonna select all of this header, there we go. And right click, and I'm gonna create a new component. And this component is gonna be the site header. Now what that means is I can copy and paste this home frame, paste it over here, and call this one, About. And same thing, over here with Contact.

And now what I can do is if I change any of my original site header, which is over here, maybe I send it to Aria, and just like, maybe can we call it like Portfolio instead? Now watch the other things as I type in, Portfolio. And I can just twitch this over, make it 32 between again, 31, 32 and there we go, it's updated across the site. Now there is other issues, maybe I wanna kind of go in and change these once I'm happy.

And once I'm happy, then I can actually go into these, I'd like to right click, and I can detach instance. And what this will do is it will basically add this in as a frame, I can change all of these internals, so white goes to pink, and that goes to white. So this is just once I'm happy, I like to keep this as consistent as possible until the very, very end.

So this is generally the last thing that I would do. So for now I'm gonna keep it as a component, but if you want to change these, on these pages, for now, you can do. So what I've got is a basic setup for my website. Next thing what I want to do is start filling in these piece by piece.