Layout for Mobile

It's time to start a wire frame. 0:00 A wire frame is a simple sketch. 0:02 It's about placement and arrangement of elements. 0:04 We're gonna start small with the mobile art board on the left. 0:07 So I'm gonna, kinda zoom in here so we can get closer. 0:11 Our website is going to be divided into four main sections or containers. 0:17 A header, navigation, content, and footer. 0:22 We will draw boxes to represent these areas first, 0:25 create some image placeholders, and start to build out the UI elements. 0:29 Working the wire frame phase, I prefer to work in grayscale. 0:35 And a nice way to work in grayscale is if you put a window and swatches. 0:39 You can see we have our grayscale palette right here. 0:51 And I like to just use this for reference while I'm laying out my wire frame. 0:55 And also, in general, using a grayscale is less distracting. 1:00 It's gonna allow for me and 1:05 the client to focus on arrangement first and not worry too much about color. 1:08 The first thing we'll draw is the header. 1:13 So I'm going to draw a rectangle, which we've already done before. 1:17 And instead of using green, I want to change this, of course, 1:21 to a different color. 1:24 Let's try a lighter gray, okay. 1:27 So if I click up at the top and drag. 1:32 And let's try that. 1:39 So that's about 135. 1:42 And now that we have our header really easy, 1:45 we're just gonna click and hold and drag down. 1:50 This'll be our footer, down here at the bottom. 1:52 One thing you'll notice, actually, is I'm drawing my wire frame but 1:57 it's on top of my guide, this green boxes. 2:01 The guides are staying on top but let's change our layer order so 2:06 that our guides are going to be on top and that what we are drawing is underneath. 2:10 To do that I'm going to unclick that lock I made earlier and just highlight it and 2:16 click and hold and drag so it's on top. 2:21 That's what I want. 2:23 I'll hit lock again. 2:25 Okay. 2:27 So our footer I think I'm going to make it just a little narrower than the header. 2:29 Next we're going to add the navigation bar. 2:36 And the navigation bar I want it to be a little darker. 2:39 So I think this one's darker. 2:45 And when you're designing for any touch device, you want to make sure that 2:48 the width or height is not any smaller than 50 pixels in any direction. 2:52 Because with touch devices, they need to be big enough for 2:58 the finger to sort of activate it and touch it. 3:01 If it's too small it's not worthwhile. 3:03 So just make sure of that when you're doing it. 3:06 I don't want it to be so much bigger than my header. 3:10 I'm gonna change this. 3:14 Let's make it 85, Okay. 3:17 And I'll go back to my selection tool by hitting v. 3:24 And I'm just gonna click and drag. 3:28 Okay. 3:33 So we have our header. 3:34 Our navigation space. 3:35 And this may change. 3:37 These are just, this is like placeholders for where these things are gonna be. 3:38 And then this area in here, this is our content window. 3:43 This is where the event feed is going to be happening. 3:48 So I'm gonna draw some lighter squares. 3:52 Three that will represent three events that will be loading. 3:56 Choose a lighter color. 4:02 Go back to my rectangle and draw. 4:03 I wanna have three so they need to all fit in this space. 4:09 See how big that is. 4:12 Let's make it 325. 4:16 I often like to make things divisible by 5, but it doesn't actually matter. 4:18 Sort of just, with order. 4:24 I wanna align this up to the top. 4:28 Okay. 4:30 And I'm gonna hold down Option and click and drag down until it aligns there. 4:32 Perfect. 4:39 And do it one more time. 4:40 I feel like this space is a little bigger than I want it to be. 4:47 So I'm gonna change this to 350. 4:50 Okay. 5:08 This is gonna be better. 5:08 So, I'm just sorta lining that up. 5:13 I don't want it. 5:16