1 00:00:00,000 --> 00:00:02,000 [?music?] 2 00:00:02,000 --> 00:00:05,000 [Design] 3 00:00:05,000 --> 00:00:08,000 [Nick Pettit] The best way to start any design 4 00:00:08,000 --> 00:00:12,000 is by figuring out what the problem is that you're trying to address. 5 00:00:12,000 --> 00:00:15,000 In this case, we have a pretty common problem, 6 00:00:15,000 --> 00:00:21,000 which is we just want to create a photo gallery to display some photos. 7 00:00:21,000 --> 00:00:25,000 So sometimes, I'll start with pen and paper and sort of rough things out, 8 00:00:25,000 --> 00:00:28,000 but very quickly I'll usually go into a mockup tool-- 9 00:00:28,000 --> 00:00:31,000 like Balsamiq Mockups in this case-- 10 00:00:31,000 --> 00:00:34,000 but really, you can use whatever mockup tool that you want 11 00:00:34,000 --> 00:00:36,000 or whatever workflow you want. 12 00:00:36,000 --> 00:00:38,000 It all comes down to personal preference 13 00:00:38,000 --> 00:00:40,000 and it's really up to you. 14 00:00:40,000 --> 00:00:42,000 So let's go ahead and get started. 15 00:00:42,000 --> 00:00:47,000 The first thing I like to do when I get into a mockup tool like Balsamiq Mockups 16 00:00:47,000 --> 00:00:51,000 is I like to design from the inside out, 17 00:00:51,000 --> 00:00:54,000 and the main thing that we're going to have in our design is photos, 18 00:00:54,000 --> 00:00:56,000 so let's start there. 19 00:00:56,000 --> 00:01:00,000 So we'll go ahead and go to say, Layout, 20 00:01:00,000 --> 00:01:04,000 and we know that we're going to want to have something to contain our photos-- 21 00:01:04,000 --> 00:01:07,000 actually, let's go to Containers-- 22 00:01:07,000 --> 00:01:10,000 and we'll just make a rectangle canvas. 23 00:01:10,000 --> 00:01:12,000 IIt doesn't really matter what size-- 24 00:01:12,000 --> 00:01:14,000 that looks good-- 25 00:01:14,000 --> 00:01:21,000 and let's go over to Media and we'll go ahead and drop in an image, 26 00:01:21,000 --> 00:01:23,000 just like that. 27 00:01:23,000 --> 00:01:27,000 And we don't need to actually include a placeholder image. 28 00:01:27,000 --> 00:01:30,000 We can just have an X; that's fine. 29 00:01:30,000 --> 00:01:33,000 We're going to have eight photos in our gallery, 30 00:01:33,000 --> 00:01:35,000 so we'll drop in a few more of those-- 31 00:01:35,000 --> 00:01:40,000 actually, let's just duplicate these. 32 00:01:40,000 --> 00:01:42,000 So we have two there, 33 00:01:42,000 --> 00:01:45,000 and now we have four, 34 00:01:45,000 --> 00:01:50,000 and there's our eight photos. 35 00:01:50,000 --> 00:01:53,000 Now, of course, I've already designed this project 36 00:01:53,000 --> 00:01:59,000 and we've seen the finished product, but let's go ahead and head down one path 37 00:01:59,000 --> 00:02:01,000 that I started out with. 38 00:02:01,000 --> 00:02:06,000 We want to be able to click on our photos and have one of them become larger 39 00:02:06,000 --> 00:02:11,000 and one way we could do that is by having our eight photos here 40 00:02:11,000 --> 00:02:14,000 and then enlarging one of these photos 41 00:02:14,000 --> 00:02:17,000 and then having all the others reflow around it, 42 00:02:17,000 --> 00:02:20,000 so let's go ahead and sort of mock that up quickly. 43 00:02:20,000 --> 00:02:22,000 So i'll move these down here real quick, 44 00:02:22,000 --> 00:02:25,000 and we'll realign them in just a second, 45 00:02:25,000 --> 00:02:33,000 and we need to make our container larger, of course. 46 00:02:33,000 --> 00:02:41,000 This would still use CSS3. 47 00:02:41,000 --> 00:02:44,000 And we'd go ahead and just enlarge our one photo 48 00:02:44,000 --> 00:02:49,000 and we would have a really nice transition as the photo scaled up 49 00:02:49,000 --> 00:02:52,000 and all of the other photos reflowed around it. 50 00:02:52,000 --> 00:02:55,000 However, as you can see, this isn't really practical. 51 00:02:55,000 --> 00:03:00,000 I was even having a hard time just moving around those photos, 52 00:03:00,000 --> 00:03:04,000 so a much better approach would be to just keep that large photo on top 53 00:03:04,000 --> 00:03:07,000 instead of having all of the other photos reflow in the gallery 54 00:03:07,000 --> 00:03:10,000 because that increases the height of the page 55 00:03:10,000 --> 00:03:13,000 and just makes it really awkward to interact with. 56 00:03:13,000 --> 00:03:15,000 So let's go ahead and just delete that 57 00:03:15,000 --> 00:03:24,000 and we'll go ahead and put all these back, 58 00:03:24,000 --> 00:03:31,000 and let's actually just delete these and we'll go ahead and duplicate this row, 59 00:03:31,000 --> 00:03:37,000 and we'll move it down there, and then we can just make our container smaller again. 60 00:03:37,000 --> 00:03:41,000 So instead of heading down that route, let's go ahead and just take one of these photos 61 00:03:41,000 --> 00:03:47,000 and we'll duplicate it and just go ahead and enlarge it 62 00:03:47,000 --> 00:03:52,000 and we'll leave it on top of all the other photos that we already have. 63 00:03:52,000 --> 00:03:55,000 And when we enlarge photos like that, 64 00:03:55,000 --> 00:04:01,000 the original photo will be removed, of course, because it will now be the large photo. 65 00:04:01,000 --> 00:04:06,000 When you're designing, it's important to go ahead and try out a couple of different things, 66 00:04:06,000 --> 00:04:08,000 and then when you find something you like, 67 00:04:08,000 --> 00:04:11,000 take that design and iterate on it. 68 00:04:11,000 --> 00:04:14,000 So now that we have our nice little photo gallery here, 69 00:04:14,000 --> 00:04:18,000 let's go ahead and create the rest of this site. 70 00:04:18,000 --> 00:04:22,000 So I'm actually going to get rid of this large photo 71 00:04:22,000 --> 00:04:26,000 and we'll just put our smaller photo back--just like that-- 72 00:04:26,000 --> 00:04:30,000 and we're just going to need a little bit of text, 73 00:04:30,000 --> 00:04:35,000 so we want kind of a larger header here--there we go-- 74 00:04:35,000 --> 00:04:40,000 and we're going to call this gallery My Photos. 75 00:04:40,000 --> 00:04:43,000 And we'll center it on the page there, 76 00:04:43,000 --> 00:04:46,000 and actually, I think I'd like that to be a little bit larger-- 77 00:04:46,000 --> 00:04:49,000 that's pretty good. 78 00:04:49,000 --> 00:04:54,000 We'll center it, and then we need to move the rest of our content down. 79 00:04:54,000 --> 00:04:57,000 There we go. 80 00:04:57,000 --> 00:05:04,000 It would also be nice to include some information about this gallery, 81 00:05:04,000 --> 00:05:07,000 so a good place to put that would be right below it. 82 00:05:07,000 --> 00:05:10,000 So we'll go ahead and grab some paragraph text here, 83 00:05:10,000 --> 00:05:13,000 and we'll also grab another subtitle. 84 00:05:13,000 --> 00:05:20,000 We'll say About this Gallery for our subtitle 85 00:05:20,000 --> 00:05:24,000 and we'll put it down below here. 86 00:05:24,000 --> 00:05:29,000 Then we'll put some paragraph text here. 87 00:05:29,000 --> 00:05:33,000 We can just go ahead and copy and paste this text. 88 00:05:33,000 --> 00:05:35,000 We probably don't need this hyperlink here 89 00:05:35,000 --> 00:05:40,000 or any special kind of markup, 90 00:05:40,000 --> 00:05:42,000 so we'll go ahead and delete that. 91 00:05:42,000 --> 00:05:50,000 And then, we can just copy and paste this to go ahead and generate some texture there. 92 00:05:50,000 --> 00:05:53,000 We'll have one column of text on the left 93 00:05:53,000 --> 00:05:57,000 and another column of text on the right, 94 00:05:57,000 --> 00:06:01,000 so we need to make these a little bit smaller. 95 00:06:01,000 --> 00:06:07,000 We'll have some nice space in between them; 96 00:06:07,000 --> 00:06:10,000 I just want to increase that a little bit 97 00:06:10,000 --> 00:06:13,000 and that looks pretty good. 98 00:06:13,000 --> 00:06:17,000 Normally, you'd want to use the actual text that you're going to use, 99 00:06:17,000 --> 00:06:21,000 but when you're mocking up things in a low-fi fashion like this, 100 00:06:21,000 --> 00:06:26,000 it's okay to just use placeholder or lorem ipsum text like we have here. 101 00:06:26,000 --> 00:06:30,000 The reason you want to try and always use the real text that you're going to use 102 00:06:30,000 --> 00:06:36,000 is because it can give you a better idea of how much space it's going to take up on the page. 103 00:06:36,000 --> 00:06:38,000 So if we scroll up here, 104 00:06:38,000 --> 00:06:43,000 it looks like we have a header, a gallery, some text about the gallery, 105 00:06:43,000 --> 00:06:45,000 and that's pretty much it. 106 00:06:45,000 --> 00:06:46,000 It's a very simple design.