Layout for Desktop

Now it's time for the desktop Wireframe. 0:00 This one is a bit easier because we've already created some elements to use. 0:03 We're also gonna be creating a couple more UI elements. 0:07 So first, let's just drag our header over here. 0:11 So I'm going to click on the header, of my selection, 0:19 tool hold down option click and drag. 0:23 And then expand this out to the full width. 0:26 Instead of 135, I'm going to bump it up and going 150 and 0:29 then I want to make sure that is aligning to the top, very good. 0:35 Of course we need our logo. 0:41 And what's nice is I'm like, okay, I want my logo to be on the left hand side. 0:44 And I can just pop it right in line with this hundred pixel padding, 0:50 which is great. 0:55 For the navigation because we have more room in our header, 0:59 I am going to put it inside of our header here. 1:04 I think that will be nicer. 1:13 Now click once. 1:16 Hold down option and drag down. 1:18 So, now that is our footer. 1:21 You can see as I am drawing these things, these smart guides are so fabulous. 1:25 They sort of tell me where things intersect and what's going on. 1:29 That's great. 1:33 Instead of having the events just sort of feed down, because we´re in 1:34 a bigger space we can have more of a hero image, like a call out on top. 1:39 Which is what I wanna go for just to sort of make the design more interesting. 1:44 So option click drag over. 1:49 It does´t need to line up to the top. 1:51 In fact, I don't want it to line up to the side now that I'm thinking about it. 1:57 I'm gonna line it up with my 50 pixel side here. 1:59 So there is a little room. 2:04 And then I will drag out until we hit the other side. 2:05 So I know I have 50 pixels of padding on either side. 2:12 For my navigation, I just realized, 2:17 it's lined up with the 100 marker, I want to move that over so it's lined up here. 2:19 And by using these, you can see, it really does help to organize the content so 2:27 it's more pleasing to look at. 2:32 I'm gonna move this over too. 2:36 You know, all of this needs to be kinda lined up. 2:41 Let's see. Yep, that's what I want. 2:44 So it's definitely lined up in the center, so I went to, I selected both, 2:50 and then I selected this back one. 2:55 This is going to be our target, so I'll click on it one more time. 2:58 Then align, and I went to vertical distribute center. 3:02