Low Fi Mockup

[?music?] 0:00 [Low Fidelity Mockup] 0:02 [Nick Pettit] Overall, this presents a very interesting design challenge 0:05 because we need pixel-accurate values to calculate our fluid grid. 0:09 This means we need to create a high fidelity mockup. 0:15 However, we should also spend some time creating a low-fi wireframe 0:18 for each responsive stage of our design. 0:23 We're now at the point where we're ready to go ahead and start mocking up 0:27 and designing our site. 0:31 Now, of course, we've already taken a look at the finished site, 0:33 but mocking up a website is an important step that you should take 0:36 whenever you start a new project, so let's go ahead and pretend 0:40 that we're not really sure how we're going to design this. 0:43 Now, another question to keep in mind is how exactly do you design a site 0:47 that's supposed to respond to all different resolutions? 0:51 Do you start with the smallest resolution and work your way up, 0:54 or do you start with the largest resolution and then cut it down? 0:58 Well, there's a lot of different approaches that you could take, 1:02 so we're going to go ahead and start with the largest resolution possible 1:06 and work our way down. 1:10 I'll go ahead and drag out an iPhone element here. 1:12 Now, this could, of course, be any mobile phone, 1:18 but we'll go ahead and put that there. 1:21 And then, we're going to drag out some text, and I want to use some big header text 1:25 for our title, and the name of our app is GeoNotation, 1:31 so I'll go ahead and type that in and hit Enter. 1:39 I'll put that there, and then we need a subtitle right under our large logo there, 1:43 and our subtitle will be Take Notes Anywhere, 1:50 because with this app, you can actually take a note 1:55 and it will mark it with GeoLocation information. 1:59 This subtitle is a little bit large, so I'm going to go ahead and cut it down-- 2:02 that looks pretty good. 2:08 I'll go ahead and line that up there. 2:09 And now, we need to add in some paragraph text, 2:11 so I'll go ahead and drag that out and place it here. 2:15 That looks pretty good. 2:22 And it doesn't really matter what text is in here, necessarily. 2:25 That will be more important when we get to Photoshop mockups, 2:30 but for now, we'll just go ahead and copy some text in there 2:34 just so it takes up some space and gives some texture to the overall look. 2:37 And then, we need to add in a button over on the right side here, 2:42 so we'll go ahead and go to our buttons and drag out a button, 2:49 and this button is going to be a call to actions 2:53 so that people can actually start using the application that we're advertising. 2:56 So we'll type in some text that says Start Taking Notes 3:01 and I want that to be a little bit larger, so we'll go ahead and drag that out. 3:07 And also, the text size should be a little bigger. 3:13 That's a little bit too much--down to 18, that looks pretty good. 3:17 And then, right below our button here, we want to have some testimonials 3:22 from people that have used this application and think it's really great. 3:27 So we'll go ahead and go back to our text 3:31 and we'll drag out some text here, 3:34 and Ryan Carson said, "Holy heck, it's awesome!" 3:36 And then, of course, we need to say who this quote is from, 3:44 so just below this, we'll go ahead and say - Ryan Carson. 3:48 That looks good. 3:54 And then finally, we'll go ahead and increase the font size of this quote 3:56 and drag it there--that looks pretty good. 4:02 And then, we need to make another one of these 4:05 from myself, and I'll say, This changes everything. 4:09 We went ahead and picked 18 on this other quote, so we'll do the same for this one. 4:16 Say 18 and line that up, and then we need to say who this is from 4:22 and I'll say it's from me - Nick Pettit 4:29 and I'll drag that there. 4:33 That looks pretty good. 4:36 Of course, we'll have some more stuff below here. 4:38 We want the overall impression of the app to be this nice large phone 4:41 and we want to have our logo and some quotes over here, 4:46 and a big call to action. 4:51 So that looks pretty good, I would say. 4:53 It takes up the page and that should look really nice at a very large size. 4:55 So we'll go ahead and save that out, 4:59 and now, we need to move on to our iPad or notebook-sized screen. 5:02 So we'll go ahead and clone this as a new mockup 5:08 and here, we're going to do a couple of things differently. 5:13 The first thing that we're going to do is get rid of these quotes, 5:17 because while they are nice to have, they're taking up space 5:21 that could be used for making the phone larger 5:24 and making this text a little bit more readable, and also, making our logo larger. 5:27 So we'll go ahead and get rid of these quotes 5:32 because they're not super important. 5:35 And then, the next thing we're going to do is move this phone over to the right, 5:38 and we will move our call to action down below. 5:44 So that's pretty close to what we're going to want. 5:48 We just need to increase the size of this logo a little bit 5:50 so it fills out the space, and we'll move our subtext there. 5:54 Then, we need to just resize this paragraph and let it expand to fill this area. 6:01 And then, we're going to actually expand out this button a little bit 6:09 and make it take up more space. 6:13 Now remember, we're going to be using a fluid grid layout, 6:15 so this will resize a little bit and essentially, we're moving from a three-column layout-- 6:19 where we have column one, the phone in the middle, and then the call to action on the right-- 6:25 down to a two-column layout where we have combined our call to action and the text 6:32 into a single column, and then we have our second column, 6:37 which is the actual demonstration of the application. 6:41 So that looks pretty good for the tablet and notebook size, 6:44 so we'll go ahead and save that out 6:48 and i'll call it notebook size. 6:51 And then, we're going to clone this as a new mockup yet again, 6:54 and now, we're ready to go ahead and design our mobile layout. 7:00 Now, of course, we have much less screen real estate to work with here, 7:04 so we're going to have to make some cuts. 7:08 Now, of course, we have much less screen real estate to work with here, 7:11 so we're going to have rearrange our layout a little bit. 7:14 The first thing I'm going to do is make this logo smaller again; 7:17 maybe down to 32 pixels--actually, it's going to have to be even smaller, 7:22 down to maybe 28--and we'll move that up to the top. 7:27 And we will move our tagline with it, and we'll make that smaller as well. 7:32 That looks pretty good. 7:40 And then we'll have our paragraph text 7:42 right below that area, so we'll go ahead and squeeze that in 7:45 and make it a little bit taller there. 7:50 We're going to decrease the font size on that as well. 7:54 That looks pretty good. 7:59 And then, we need to make our call to action much smaller, 8:01 and we're going to move that down here. 8:07 And then, we need to just stick this phone right in between, 8:09 because while we are at a small mobile size, 8:14 it's still nice to show at least a screen shot of the app-- 8:16 if not a video--to go ahead and show what this app is actually going to look like 8:20 should they choose to click on the Start Taking Notes button. 8:25 So let's go ahead and save this out 8:30 and I'll call this Mobile, and let's review these three layouts. 8:33 Here's our full-size layout, which will take up the entire screen 8:37 on a large 27" monitor or even a 24" monitor. 8:41 And then, we'll go to our notebook size or iPad size, 8:46 or just a smaller computer screen, and that's what that looks like. 8:51 And then we'll take a look at our mobile size, 8:54 and that will, of course, be squeezed down to a phone 8:58 where we can kind of scroll up and down and look at the design. 9:03 Now again, I want to mention that we will have other elements below here 9:07 highlighting various features of the app, but this is the overall impression 9:11 that we want to capture at all three sizes. 9:15 So again, there's the full size, the notebook size, 9:18 and the mobile size. 9:21 This low fidelity mockup will help serve as a guideline 9:23 when we move on to high-fidelity mockups next. 9:27