Laying out our pages

- [Rik] So now that I've got my general setup, what I'm gonna do just very quickly is I'm gonna actually add the content in. So at the moment, I've got my assets folder here with some of the images, I've got some copy here, maybe there's one or two things missing but we're just gonna put this in. So quickly what I'm gonna do is just put this in, I'll skip forward this video, you can kind of see where I'm going with it so it's not too quick, but I'm gonna be basing this off these wire frames.

So I'm just gonna do this right now and you can follow along. So this bit was filmed at 5x speed, I didn't want to kind of do it all out loud just cause it's pretty boring to watch me do it all in one place. So here what I'm doing is just quickly laying things out using the text and just dragging the images in from our assets. Some of the text I didn't have, so I was using a tool called lorem ipsum, which is just kind of like a print tool to add some fake content in there.

I went to lipsum.com to add that in. And again, I'm just trying to play around with some of this. We're using this mid aligned one, I was just trying to center these in the right place as well for now. Again, roughly in the right place, that was kind of four by eight columns, so four and then eight across. So here what I'm doing is just adding rectangles to actually vertically align those to the middle. Just because I didn't want to just do it optically, using my eye and then just gonna tighten this up using the option key on the Mac to actually kind of size things up and place them in the right place.

Here I'm just grouping those two things together and then adding that rectangle back in to align them in the middle so the text's aligned in the center, changing some of that as well. Kind of looks pretty good. And again, playing around with some of this layout. I started out with six and six on the columns here and when I started to play around with it, I was like, hm doesn't feel too good. Feels a bit wide, so maybe I'll tweak this a little bit, maybe I'll make that a little bit bigger to try and make this a bit thinner.

No, that didn't really work. So again, some of it is playing around, that felt a bit more natural so this was seven and five instead. So here I'm just making a contact page, I'm just adding some text in which feels a bit more friendlier than contact me (laughs) and saying I'll get back to you in one business day. Again, this isn't copy that's given to me, it's just something that I've designed in there I suppose and here what I'm doing is I'm just adding a default form in here.

I've just added in the color as our salmon color and then just adding it as a stroke, rather than as a fill just so it's in there and the same thing here. I'm just moving it into the middle, vertically in both directions and it looks pretty good. Just making sure those sizes look pretty good as well. So total, this took me around about 12 minutes in total. So relatively quick, changing some of the order here just to kind of play around with it. That felt a little bit more natural to have this kind of pattern in place.

And again I kept messing up the browser (laughs) cause I pressed the wrong shortcut keys a few times. But eventually it started to look pretty good once I stopped messing up so much. So here I'm just making the footer and the spacing a little bit bigger, making it 120, trying to use that eight pixel grid so 120 is eight 15s, I'm using the eight quite a lot as well just to kind of keep some kind of pattern and yeah. I just kind of felt like it looked pretty good, just making sure it aligns to all the grid and yeah, it looks pretty good.

Okay, so I'm pretty happy with this now, I've added some of the content from here. I've removed a lot of the grids for instance, I've given you a bit of a commentary on what I've been doing and hopefully you can see that it's been fairly straightforward to put this stuff together and if I want to change anything pretty quickly then I can. So let's say, I'm not feeling the blue in the logo, maybe I want to make this actually pink instead, it's very, very easy to change all of this stuff.

Maybe the text is too small, I wanna make it look bigger, I can change it just in one place and it'll be great. So if I just want to change this text for instance from this color to pink, it changes here, here, here all in my components and also across the website too. So by just doing these very, very small things that we setup previously in this kind of lesson, we made this really, really easy to setup. So I'm gonna send this over to Aria, see what she thinks.

If she likes it, then we can start coding it up.