1 00:00:00,570 --> 00:00:05,050 Now we're going to begin the process of designing a simple website. 2 00:00:05,050 --> 00:00:09,450 We'll be designing our site for both desktop and mobile devices. 3 00:00:09,450 --> 00:00:11,620 So we'll have two art boards. 4 00:00:11,620 --> 00:00:15,340 The art boards will act as a canvas for building our designs. 5 00:00:16,520 --> 00:00:19,750 Let's get started, and create a new document. 6 00:00:19,750 --> 00:00:23,500 So, file New or Command N. 7 00:00:23,500 --> 00:00:26,920 You can always see the short cut keys to the right of it, so file new. 8 00:00:28,330 --> 00:00:30,850 The name of our document, 9 00:00:30,850 --> 00:00:34,010 I'm not going to reinvent the wheel [LAUGH] is going to be wire frame 01. 10 00:00:34,010 --> 00:00:37,170 You can name it whatever you like. 11 00:00:37,170 --> 00:00:40,950 For our profile because we're doing web design, 12 00:00:40,950 --> 00:00:43,690 the deliverable is going to be for web. 13 00:00:43,690 --> 00:00:46,500 We can go ahead and change the profile to web and 14 00:00:46,500 --> 00:00:51,660 that's going to make sure that our color mode is in RGB which is important. 15 00:00:51,660 --> 00:00:56,970 Staying in YK would be for print, to make sure you're in RGB mode. 16 00:00:56,970 --> 00:01:00,910 Our art boards, we're going to be creating two art boards, and 17 00:01:00,910 --> 00:01:04,190 this to the right of it is how those art boards are arranged. 18 00:01:04,190 --> 00:01:11,950 So we have Grid by Row, Grid by Column, Arrange by Row, Arrange by Column. 19 00:01:11,950 --> 00:01:17,440 The spacing is the spacing between the artboards and we can adjust this later. 20 00:01:17,440 --> 00:01:19,790 I'm going to leave it as 20 pixels for now. 21 00:01:21,150 --> 00:01:27,570 For width our developer gave us sizes and so that's the next thing is, 22 00:01:27,570 --> 00:01:33,220 talk to your developer and figure out what sizes you're gonna be designing at. 23 00:01:33,220 --> 00:01:39,930 With responsive web design, the idea is that you're not designing a fixed site for 24 00:01:39,930 --> 00:01:45,600 every single device but you're designing at sizes that are general. 25 00:01:45,600 --> 00:01:50,260 That most people will be able to see the content of the web site. 26 00:01:50,260 --> 00:01:54,610 That's the most important thing, and that your layout is going to adjust 27 00:01:54,610 --> 00:01:58,400 accordingly so that the content is always going to be at the top, 28 00:01:58,400 --> 00:02:01,790 and the most important things need to be seen will be seen. 29 00:02:01,790 --> 00:02:07,500 Our client asked us to create a mock up for a desktop and mobile platform. 30 00:02:07,500 --> 00:02:13,040 So for the mobile one it will be 480 by 1400 hundred 31 00:02:13,040 --> 00:02:18,035 and obviously when you're looking at a browser most of the time on your 32 00:02:18,035 --> 00:02:22,050 phone,you can't adjust the width but you do scroll down. 33 00:02:22,050 --> 00:02:28,250 And so what happens is we have a fixed, Width, but vertically, we can scroll. 34 00:02:28,250 --> 00:02:31,190 So now that we have 480, 1,400, I'm going to hit OK. 35 00:02:31,190 --> 00:02:34,450 All right. 36 00:02:34,450 --> 00:02:37,080 Just change my screen mode by hitting F. 37 00:02:37,080 --> 00:02:38,430 That looks nicer. 38 00:02:38,430 --> 00:02:42,620 So you'll notice that we have two art boards that are the same size. 39 00:02:42,620 --> 00:02:47,460 One is going to be our mobile version, which is 480 by 1400, and 40 00:02:47,460 --> 00:02:49,892 they're both that size right now. 41 00:02:49,892 --> 00:02:55,236 And then our other one is going to be 1200 by 1400. 42 00:02:55,236 --> 00:02:58,130 So I am going to click on art board number two. 43 00:02:59,540 --> 00:03:03,200 Go to my artboard tool here and click on it. 44 00:03:03,200 --> 00:03:04,850 And you can see that it's highlighted. 45 00:03:04,850 --> 00:03:10,010 There are two ways I can change the size of the [INAUDIBLE]. 46 00:03:10,010 --> 00:03:15,160 I can double click on the artboard tool itself and change the width and 47 00:03:15,160 --> 00:03:19,880 the height here, or because I have the art 48 00:03:19,880 --> 00:03:24,490 board tool selected in our control panel, we now have those options. 49 00:03:24,490 --> 00:03:28,860 So if I go up here on the right hand side, I'm going to change it here and 50 00:03:28,860 --> 00:03:33,900 just show you something different, then I hit tab and 51 00:03:33,900 --> 00:03:36,690 1400 is correct, so I'm going to click off. 52 00:03:38,700 --> 00:03:43,040 Okay, and you'll see what happened is, now my art boards are overlapped. 53 00:03:44,160 --> 00:03:49,936 So what I can do is hit my art board tool again, and just move it over. 54 00:03:49,936 --> 00:03:56,940 So I'm just gonna, I'm moving my arrow keys, and moving it back over. 55 00:03:56,940 --> 00:04:02,830 I can also click, and hold and drag this way, but I wanted it to line up. 56 00:04:02,830 --> 00:04:05,850 And you can see I sort of undid what I did. 57 00:04:05,850 --> 00:04:09,577 So undo is Command + Z. 58 00:04:09,577 --> 00:04:12,617 That's a very, very important one. 59 00:04:12,617 --> 00:04:18,145 [LAUGH] Edit undo, so when you're working and something goes wrong, not a big deal. 60 00:04:18,145 --> 00:04:18,917 Command Z. 61 00:04:18,917 --> 00:04:22,040 [LAUGH] And then you're back in business. 62 00:04:22,040 --> 00:04:27,210 So, this is exactly what we want right here, and 63 00:04:27,210 --> 00:04:29,870 I just did something unconsciously, but this is, you need to know. 64 00:04:29,870 --> 00:04:33,740 So if you want to pan around your art board, hit spacebar. 65 00:04:33,740 --> 00:04:38,270 You can also touch this tool, but spacebar works, and 66 00:04:38,270 --> 00:04:42,300 that will allow us to You know move around, look around things. 67 00:04:42,300 --> 00:04:46,380 If you want to zoom out and in this is your zoom tool. 68 00:04:46,380 --> 00:04:50,500 If you hold down option and click that's going to take you back out. 69 00:04:50,500 --> 00:04:57,550 Got our space bar again, our hand tool, drive that back to the center. 70 00:04:57,550 --> 00:04:59,730 Now if it's off center. 71 00:04:59,730 --> 00:05:04,116 And you want to center your art board you can do command zero, 72 00:05:04,116 --> 00:05:06,104 which is really handy too. 73 00:05:06,104 --> 00:05:09,207 I'm gonna zoom out a little bit. 74 00:05:09,207 --> 00:05:14,395 Okay I was gonna say one other thing that's so helpful about Illustrator 75 00:05:14,395 --> 00:05:19,410 is the fact that you can have two art boards within one document. 76 00:05:19,410 --> 00:05:23,530 And we could have more than two, we could have multiple, tons of them. 77 00:05:23,530 --> 00:05:28,890 And that's a really wonderful thing while you're working and back and forth and 78 00:05:28,890 --> 00:05:33,550 doing iterations to be able to see all the versions you're doing at the same time. 79 00:05:33,550 --> 00:05:38,750 Now last, but definitely not least, remember to save. 80 00:05:38,750 --> 00:05:43,756 So file Save, or command S, and we're gonna be saving this as 81 00:05:43,756 --> 00:05:48,670 Wireframe_01, hit save. 82 00:05:48,670 --> 00:05:53,150 I already have another one, so I'm gonna replace mine, and hit ok. 83 00:05:55,000 --> 00:06:01,090 Remember to save, and save often, always, always do that. 84 00:06:01,090 --> 00:06:02,560 Alright, see you in the next video.