1 00:00:00,780 --> 00:00:05,480 Lastly, before we're finished, we need to organize our layers. 2 00:00:05,480 --> 00:00:10,350 This is really important for us later if we're coming back opening the file, and 3 00:00:10,350 --> 00:00:14,630 also if we are sharing the file with other people, that there's not any guess work. 4 00:00:14,630 --> 00:00:18,070 They know exactly where things are located if they need to go in and 5 00:00:18,070 --> 00:00:19,460 change something quickly. 6 00:00:19,460 --> 00:00:21,180 It's much easier. 7 00:00:21,180 --> 00:00:26,580 I always recommend naming and organizing as much as possible. 8 00:00:26,580 --> 00:00:28,620 So let's take the time to do that. 9 00:00:28,620 --> 00:00:31,730 We're going to have two layers. 10 00:00:31,730 --> 00:00:38,580 One is gonna be our 480 artboard and the other will be our 1200 desktop artboard. 11 00:00:38,580 --> 00:00:41,000 With the selection tool marquee over. 12 00:00:42,610 --> 00:00:43,730 Our mobile artboard. 13 00:00:43,730 --> 00:00:49,650 And then you go to Edit > Cut or Cmd+X. 14 00:00:52,190 --> 00:00:55,230 Going to create a new layer in our Layers panel. 15 00:00:55,230 --> 00:00:57,040 Right to the left of this trashcan. 16 00:00:57,040 --> 00:00:57,690 Click on that. 17 00:00:59,110 --> 00:01:00,260 It costs 480. 18 00:01:00,260 --> 00:01:02,185 So that's the width of our artboard. 19 00:01:03,390 --> 00:01:05,480 Select that layer by clicking this circle. 20 00:01:05,480 --> 00:01:12,007 And then we're going to Edit > Paste in Place, or Shift + Cmd + V. 21 00:01:14,245 --> 00:01:15,846 Great. 22 00:01:17,265 --> 00:01:19,506 We'll do the same thing for this side. 23 00:01:22,066 --> 00:01:23,485 So I marquee over. 24 00:01:23,485 --> 00:01:26,330 Cmd+X. 25 00:01:26,330 --> 00:01:27,970 Rename this 1200. 26 00:01:27,970 --> 00:01:32,528 Make sure it's selected, and then I want to paste in place. 27 00:01:32,528 --> 00:01:35,175 Shift+Cmd+V. 28 00:01:35,175 --> 00:01:37,270 Or edit > Paste in lace. 29 00:01:39,160 --> 00:01:43,051 And now what I wanna do is create sub headings. 30 00:01:43,051 --> 00:01:50,360 So we'll have header, nav, our content, and our footer for each one. 31 00:01:50,360 --> 00:01:54,340 And this will help later when we're creating the page mockup to 32 00:01:54,340 --> 00:01:55,840 really just know right where to go. 33 00:01:57,820 --> 00:02:00,710 So we're gonna do a lot more of the same kinds of things. 34 00:02:00,710 --> 00:02:04,762 So Cmd+X, to cut. 35 00:02:04,762 --> 00:02:11,563 And we know we'll have one, two, three, four, four categories. 36 00:02:11,563 --> 00:02:15,922 We could go ahead and 37 00:02:15,922 --> 00:02:20,538 name these header nav 38 00:02:20,538 --> 00:02:25,160 content and footer. 39 00:02:27,560 --> 00:02:30,240 So, this is our header in our clipboard. 40 00:02:30,240 --> 00:02:33,020 And I wanna Edit > Paste in Place again. 41 00:02:33,020 --> 00:02:35,350 So Edit > Paste in Place. 42 00:02:36,830 --> 00:02:37,330 There. 43 00:02:37,330 --> 00:02:42,870 For nav, Cmd + X, to cut. 44 00:02:42,870 --> 00:02:47,050 And then in the nav, I'm going to paste in place, 45 00:02:49,860 --> 00:02:54,520 cut, select my content layer. 46 00:02:54,520 --> 00:02:55,360 Paste in place. 47 00:02:57,340 --> 00:02:58,480 Marquee over the footer. 48 00:02:59,670 --> 00:03:00,870 Cut. 49 00:03:00,870 --> 00:03:04,300 Select the footer and then paste in place again. 50 00:03:06,560 --> 00:03:08,470 Now I want to drag all of these. 51 00:03:08,470 --> 00:03:12,150 My head, nav, content, and footer, into this 480. 52 00:03:12,150 --> 00:03:15,130 So I'm going to click and hold. 53 00:03:15,130 --> 00:03:16,690 Which, by the way, I held down Shift. 54 00:03:16,690 --> 00:03:22,181 And then click and drag into 480. 55 00:03:22,181 --> 00:03:24,050 Great, so now it's all in there. 56 00:03:25,840 --> 00:03:29,460 We're going to do the same thing for this side. 57 00:03:31,000 --> 00:03:34,240 So one more time, one, two, three, four. 58 00:03:36,359 --> 00:03:38,100 Header. 59 00:03:41,980 --> 00:03:43,520 Nav. 60 00:03:47,300 --> 00:03:49,060 Content. 61 00:03:52,980 --> 00:03:54,760 There we go. 62 00:03:55,820 --> 00:03:57,580 And Footer. 63 00:04:01,739 --> 00:04:03,790 Let's do it backwards for fun. 64 00:04:03,790 --> 00:04:06,180 So, I'm gonna marquee over this. 65 00:04:07,930 --> 00:04:09,080 Select it. 66 00:04:09,080 --> 00:04:10,610 Paste in place. 67 00:04:10,610 --> 00:04:13,310 I'm gonna select all of this because this is all of our content, 68 00:04:13,310 --> 00:04:18,340 and paste that in place. 69 00:04:19,820 --> 00:04:22,730 Our logo and our header, excluding our nav. 70 00:04:22,730 --> 00:04:26,920 Gonna cut that, and place that in place. 71 00:04:28,850 --> 00:04:30,040 There we go. And 72 00:04:30,040 --> 00:04:34,680 you'll notice that our header is on top of our nav at this point. 73 00:04:36,000 --> 00:04:39,000 And we can drag that under. 74 00:04:39,000 --> 00:04:42,990 We don't have anything there yet, but I I wanna put out in front, so 75 00:04:42,990 --> 00:04:44,690 I'm gonna hide this for a second. 76 00:04:44,690 --> 00:04:50,753 Go ahead and just grab that nav layer, cut it And 77 00:04:50,753 --> 00:04:56,629 paste it in my nav layer, turn my header back on. 78 00:04:56,629 --> 00:04:59,040 Let's select this. 79 00:04:59,040 --> 00:05:04,740 So we'll select Nav, Header, Content, Footer, and drag into 1200, desktop. 80 00:05:07,240 --> 00:05:08,470 And there we go. 81 00:05:08,470 --> 00:05:10,840 I will do the same thing for the desktop versions, so 82 00:05:10,840 --> 00:05:15,140 the files will be organized and ready for designing the mockup later. 83 00:05:15,140 --> 00:05:19,710 Now that the wire frame is completed, you can show this wire frame to a client, 84 00:05:19,710 --> 00:05:24,420 developer, or your boss, to explain how users will interact with the site. 85 00:05:25,730 --> 00:05:30,850 Next, or once the client approves it, we will begin bringing life into the wire 86 00:05:30,850 --> 00:05:36,040 frame by adding colors, making more design decisions, and creating a new logo.