NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,319 Hi guys and welcome back. 2 00:00:01,319 --> 00:00:01,920 In this video. 3 00:00:02,039 --> 00:00:04,439 Let's start designing our micro blog. 4 00:00:04,830 --> 00:00:07,920 Obviously I've already designed it and I've already shown you 5 00:00:07,920 --> 00:00:09,150 what the final design looks like. 6 00:00:09,180 --> 00:00:14,190 But I want to guide you through how I designed this project so that when you 7 00:00:14,190 --> 00:00:17,669 come to design your own later on you know more or less how to get started. 8 00:00:17,669 --> 00:00:20,400 At least in the sort of the things that I went through in 9 00:00:20,400 --> 00:00:21,630 order to get this designed. 10 00:00:21,883 --> 00:00:26,303 So how this video is going to go is, I've got the full design in here and 11 00:00:26,303 --> 00:00:30,143 I'm going to delete everything except for the logo that I'm going to keep and 12 00:00:30,143 --> 00:00:33,053 I'll give you that as a downloadable resource in this lecture as well. 13 00:00:33,053 --> 00:00:37,193 You can download it and follow along, and then I'll guide you through the decisions 14 00:00:37,193 --> 00:00:39,473 I make on designing this project. 15 00:00:39,623 --> 00:00:40,373 Let's get started. 16 00:00:41,371 --> 00:00:43,861 As I mentioned, I'm going to go ahead and delete everything. 17 00:00:43,891 --> 00:00:46,351 What I've got here is the finished design. 18 00:00:46,681 --> 00:00:52,921 And in this entire project, if I zoom out, you can see that we've got the wireframe 19 00:00:52,921 --> 00:00:54,541 that we designed in the last video. 20 00:00:54,884 --> 00:00:58,694 We've got the finished design over here and here we've got 21 00:00:58,694 --> 00:00:59,984 the finished design as well. 22 00:01:00,044 --> 00:01:01,754 But what I'm going to do is I'm going to delete everything. 23 00:01:01,754 --> 00:01:04,574 Just keep the logo and start from here to give you an idea 24 00:01:04,814 --> 00:01:06,524 as to how I would go about it. 25 00:01:06,944 --> 00:01:11,388 You've also got a link to this Figma file in the resources section of 26 00:01:11,388 --> 00:01:12,828 the video, so you can check it out. 27 00:01:12,858 --> 00:01:16,474 What I'm going to do is I'm going to be designing bit by bit so that you get 28 00:01:16,474 --> 00:01:18,774 an idea as to how I go step by step. 29 00:01:19,262 --> 00:01:22,742 Okay, so let's go ahead and delete everything in here. 30 00:01:22,832 --> 00:01:23,942 So everything has to go. 31 00:01:24,452 --> 00:01:29,012 I'm going to delete that and we're going to delete the footer as well, 32 00:01:29,072 --> 00:01:32,512 and then we're going to delete it, everything except for the logo. 33 00:01:32,692 --> 00:01:34,462 So I've got the logo here in my layers. 34 00:01:34,672 --> 00:01:36,262 I'm going to delete everything else. 35 00:01:36,742 --> 00:01:39,262 And so now all I've got is my logo. 36 00:01:39,322 --> 00:01:41,072 I'm gonna name this logo. 37 00:01:41,377 --> 00:01:45,637 Where the logo would be positioned in one of these apps, it's totally up to you. 38 00:01:46,067 --> 00:01:49,607 You can see that we've got the wireframe here to begin with so it gives us a bit 39 00:01:49,607 --> 00:01:51,797 of an idea as to where we want to go. 40 00:01:52,335 --> 00:01:56,655 Something that most websites have and that you will have to design no matter 41 00:01:56,655 --> 00:01:59,595 what, really, is a header and a footer. 42 00:01:59,625 --> 00:02:01,185 That's really common. 43 00:02:01,645 --> 00:02:05,525 What I would recommend is you start off with some sort of header. 44 00:02:05,575 --> 00:02:09,925 Decide on the name for your application and if you have any navigation, 45 00:02:10,015 --> 00:02:11,545 you can add that in as well. 46 00:02:12,005 --> 00:02:14,952 I would start by just putting in here, the name of the application. 47 00:02:15,222 --> 00:02:15,552 Okay. 48 00:02:15,822 --> 00:02:16,242 There we go. 49 00:02:16,735 --> 00:02:20,355 Now we're going to have navigation here so you can put menu item. 50 00:02:20,355 --> 00:02:22,025 You can put a couple of menu items in there. 51 00:02:22,313 --> 00:02:22,583 Okay. 52 00:02:22,900 --> 00:02:27,085 Now when you're developing in Figma, if you've watched Jesse's video on An 53 00:02:27,085 --> 00:02:30,505 Introduction to Figma, he would've told you how to work with it a little bit. 54 00:02:30,745 --> 00:02:33,475 You'll want to make sure things are aligned together. 55 00:02:33,715 --> 00:02:37,189 Like here, we've got our text elements aligned and whenever you click on an 56 00:02:37,189 --> 00:02:41,419 element and you hold alt, the alt key, you'll be able to see the distance 57 00:02:41,419 --> 00:02:44,629 between this element and the other element that you've got hovered. 58 00:02:44,859 --> 00:02:49,499 So here, if I select the menu item I press alt and I hover over the frame. 59 00:02:49,619 --> 00:02:52,499 You can see the distance between this element and the edges of the frame. 60 00:02:52,959 --> 00:02:53,919 Same with this element. 61 00:02:53,979 --> 00:02:55,719 And if you hover over in a different element there, you can 62 00:02:55,719 --> 00:02:56,909 see the distance between those two. 63 00:02:57,139 --> 00:03:00,769 This is really helpful for us to have even spacing between elements. 64 00:03:00,769 --> 00:03:03,399 That's one of the really important parts of design. 65 00:03:03,779 --> 00:03:08,964 The other thing is that by going for consistency and reliability 66 00:03:08,964 --> 00:03:12,834 in your design, you're going to simplify the decision making process. 67 00:03:12,834 --> 00:03:15,504 You don't have to do everything by eye when you're designing. 68 00:03:15,924 --> 00:03:17,254 For example, look at this here. 69 00:03:17,284 --> 00:03:19,354 We have got this header, right? 70 00:03:19,654 --> 00:03:22,294 And it's 669 pixels wide. 71 00:03:22,599 --> 00:03:24,609 This feels like a bit of an arbitrary number. 72 00:03:24,759 --> 00:03:28,689 So you might want to design your header to be a particular width, at 73 00:03:28,689 --> 00:03:31,629 least initially, as that's going to give you a good starting point from 74 00:03:31,629 --> 00:03:33,579 which to take your design further. 75 00:03:34,096 --> 00:03:37,186 So the first thing we'll do is we'll align all our elements. 76 00:03:37,216 --> 00:03:39,266 So they are all aligned in the middle. 77 00:03:39,286 --> 00:03:42,706 We can select all our elements and then press this icon there, and then 78 00:03:42,706 --> 00:03:44,356 there'll be aligned to the centre. 79 00:03:44,776 --> 00:03:48,226 And then we're going to decide on what sort of spacing we want between elements. 80 00:03:48,226 --> 00:03:51,316 So I'm going to go for 50 pixels between my menu items. 81 00:03:51,691 --> 00:03:55,021 And for, yeah, this looks about right to 30 pixels or so 82 00:03:55,141 --> 00:03:56,821 between my logo and my text. 83 00:03:57,061 --> 00:04:01,461 Because the logo here is a very odd width , the distance between elements, is going 84 00:04:01,461 --> 00:04:04,291 to be a bit weird . But 31.26 looks OK. 85 00:04:04,731 --> 00:04:08,241 Then we want to make sure that the total size of the header is something 86 00:04:08,241 --> 00:04:11,691 reasonable and I'm going to go for 640. 87 00:04:12,051 --> 00:04:14,901 So you can see at the moment with our 669 in width, we want to 88 00:04:14,901 --> 00:04:18,291 shrink it by 29 pixels and what I'm going to do is very easy. 89 00:04:18,441 --> 00:04:23,091 I'm going to grab these two menu items and bring them to the left by 29 pixels. 90 00:04:23,201 --> 00:04:23,531 Okay. 91 00:04:23,801 --> 00:04:25,551 So I'll go shift left. 92 00:04:25,581 --> 00:04:27,351 That's when I moved them by 10 pixels to the left. 93 00:04:27,711 --> 00:04:30,351 Shift left again move them another 10 pixels to the left. 94 00:04:30,841 --> 00:04:33,191 And one more time, move them another 10 pixels to the left. 95 00:04:33,191 --> 00:04:33,871 So that's 30. 96 00:04:34,201 --> 00:04:37,321 Then I will release shift and move to the right one pixel. 97 00:04:37,771 --> 00:04:40,891 So by doing that, we're now at 640. 98 00:04:40,891 --> 00:04:42,631 Why 640 and not any other number? 99 00:04:42,883 --> 00:04:45,763 Totally up to you, how wide you make your elements. 100 00:04:45,986 --> 00:04:51,186 I like this size and I am picking 640, because it is a round number. 101 00:04:51,266 --> 00:04:54,496 A relatively common number in computers and in design. 102 00:04:54,806 --> 00:04:59,086 And now we can then design the rest of our elements with this as a starting point. 103 00:04:59,776 --> 00:05:02,836 The next thing I would do in Figma is I will select everything and press 104 00:05:02,836 --> 00:05:06,946 control G or command G if you're on Mac to group them to get that, and 105 00:05:06,946 --> 00:05:08,566 I'll give them a name of header. 106 00:05:09,180 --> 00:05:09,450 All right. 107 00:05:09,510 --> 00:05:15,460 Let's design our form that users are gonna use to submit their entries. 108 00:05:15,460 --> 00:05:17,850 So you can see we've got a text field and a button. 109 00:05:18,405 --> 00:05:22,928 We can go ahead and draw any rectangle for the text field, but you don't 110 00:05:22,928 --> 00:05:24,458 want to be too random with it. 111 00:05:24,668 --> 00:05:27,171 Again, try to pick a size that makes sense. 112 00:05:27,191 --> 00:05:32,121 So here I'm going for 400 width and let's say 120 pixels high. 113 00:05:32,301 --> 00:05:34,941 You can change this later on, but just going with a round number is 114 00:05:34,951 --> 00:05:38,001 going to make your design a bit less arbitrary, and that's going to help 115 00:05:38,001 --> 00:05:39,661 you later on when you make changes. 116 00:05:39,711 --> 00:05:42,111 As well as this, we're also going to draw our button. 117 00:05:42,621 --> 00:05:44,981 Now we get a check to pick a color. 118 00:05:45,031 --> 00:05:47,881 I'm going to go with the color that the logo contains, but you could 119 00:05:47,881 --> 00:05:49,111 also change this color if you want. 120 00:05:49,111 --> 00:05:52,601 Just click on any element and it changes color to whatever you want. 121 00:05:52,631 --> 00:05:54,151 You can change the logo color if you like. 122 00:05:54,694 --> 00:05:57,348 But this is the color that I'm going to go for like primary 123 00:05:57,348 --> 00:05:58,728 buttons and things like that. 124 00:05:58,728 --> 00:06:03,636 So I'll just grab this select the pippette and hover over that to make 125 00:06:03,636 --> 00:06:05,736 the button the same color as the logo. 126 00:06:06,363 --> 00:06:10,960 And then for the text field, we want to allow the users to type so we're 127 00:06:10,960 --> 00:06:12,670 going to have some text in here. 128 00:06:13,168 --> 00:06:15,658 So if you went onto our website and it looked like this, that 129 00:06:15,658 --> 00:06:16,918 will look really bizarre. 130 00:06:17,198 --> 00:06:19,718 The first thing we want to do is we want to make sure that the text 131 00:06:19,718 --> 00:06:21,588 field looks like a text field. 132 00:06:21,608 --> 00:06:25,228 What I'm going to do is I'm going to make the fill much lighter 133 00:06:25,228 --> 00:06:25,978 and I guess that's the word. 134 00:06:26,818 --> 00:06:30,508 And now if you look at this and you saw this in some sort of a website, 135 00:06:30,718 --> 00:06:33,388 you might think that something is already written in the field 136 00:06:33,388 --> 00:06:35,449 because it looks like a dark text. 137 00:06:35,499 --> 00:06:38,769 So what we do normally to let users know that this is not text that has already 138 00:06:38,769 --> 00:06:43,029 been written but rather a prompt for them to write is we make this text lighter. 139 00:06:43,369 --> 00:06:45,689 We're going to go for something like this. 140 00:06:46,387 --> 00:06:49,377 And that is going to tell users that nothing has been written here yet. 141 00:06:49,617 --> 00:06:53,877 When users start writing i.e this is no longer a place holder, but the 142 00:06:53,877 --> 00:06:55,527 actual text that the user has written. 143 00:06:55,887 --> 00:06:57,147 The text will be darker. 144 00:06:57,357 --> 00:07:00,127 So they will know that it's something new that they've written. 145 00:07:00,730 --> 00:07:03,160 For the button I'm going to use the text "Submit". 146 00:07:03,160 --> 00:07:07,450 And what we want to do is select the submit button as well as the rectangle 147 00:07:07,450 --> 00:07:10,960 underneath it and then when you have two elements selected these buttons 148 00:07:10,960 --> 00:07:12,854 here, act on these two elements only. 149 00:07:12,854 --> 00:07:16,584 So we can centre them both vertically and horizontally and that's going 150 00:07:16,584 --> 00:07:19,454 to put the text right in the middle of the button which is what we want. 151 00:07:20,007 --> 00:07:23,817 You'll often see rounded corners for buttons, and you can change the rounded 152 00:07:23,817 --> 00:07:26,577 corners here in Figma over at the right. 153 00:07:27,107 --> 00:07:31,487 By setting it to 6 we get this type of corner radius and you can increase that 154 00:07:31,487 --> 00:07:33,977 to 8 maybe or whatever number you like. 155 00:07:34,307 --> 00:07:39,167 In my case, because I want to make this microblog rather playful I'm going 156 00:07:39,167 --> 00:07:43,097 to go with a pill style button, which means the corners are fully rounded. 157 00:07:43,427 --> 00:07:47,327 In order to make fully rounded corners, we need to make the rounded corner 158 00:07:47,347 --> 00:07:49,667 size equal to half of the height. 159 00:07:49,721 --> 00:07:55,541 Here, the height is 53 so we're going to make the corner radius equal to 27. 160 00:07:56,127 --> 00:08:00,847 That makes the corner radius complete so that this produces a semicircle. 161 00:08:01,392 --> 00:08:03,882 So far, everything has the same font size. 162 00:08:03,912 --> 00:08:07,092 So our header which is arguably the most important or the most 163 00:08:07,122 --> 00:08:10,662 prominent part of our site has the same font size as the things inside 164 00:08:10,662 --> 00:08:12,822 the body and that's rather abnormal. 165 00:08:13,332 --> 00:08:17,052 You should pick a font size for your page and use it as the main 166 00:08:17,052 --> 00:08:22,212 font size for the body and only make larger font sizes when you want to 167 00:08:22,242 --> 00:08:24,462 bring special attention to things. 168 00:08:24,762 --> 00:08:26,652 I'm going to go for 18 pixels. 169 00:08:26,682 --> 00:08:29,637 So I'm going to just select both of these things and changed them 170 00:08:29,637 --> 00:08:33,987 to 18 pixels and then of course, make sure to recentre things. 171 00:08:34,557 --> 00:08:37,760 And in here, we're going to go for 20 pixels from each 172 00:08:37,760 --> 00:08:39,744 edge of the text box in there. 173 00:08:40,010 --> 00:08:41,540 So now we've got this a little bit better. 174 00:08:41,540 --> 00:08:45,620 I'm also going to make this bold instead of regular, and I'm actually going to 175 00:08:45,620 --> 00:08:50,750 make it white because I think that looks a little bit better than what it was before. 176 00:08:51,263 --> 00:08:53,753 I also think this button is a little bit too large, so we're going to 177 00:08:53,753 --> 00:08:58,913 make it a bit smaller, 124 by 36, for example, that's the width and height. 178 00:08:59,104 --> 00:08:59,524 Of course. 179 00:08:59,554 --> 00:09:03,703 Remember to recentre your button and then I'm going to select the text and 180 00:09:03,703 --> 00:09:07,963 the rectangle and group them together so here on the left, we can rename 181 00:09:07,963 --> 00:09:12,113 this to submit button, and now we're going to grab this and the rectangle 182 00:09:12,143 --> 00:09:15,383 and we're going to write a line them so that they are aligned like that. 183 00:09:15,920 --> 00:09:19,580 Now we need to get on to the past entries. 184 00:09:20,030 --> 00:09:24,260 And this is not a part of the cards that we're working on for this sprint. 185 00:09:24,560 --> 00:09:28,040 But like I mentioned at the beginning of this video, since we're working on this 186 00:09:28,070 --> 00:09:32,570 completely greenfield project, it helps me and get some inspiration and start to 187 00:09:32,570 --> 00:09:37,125 decide what sort of things I want to go a bit further with this initial design 188 00:09:37,155 --> 00:09:38,985 than just the cards we're working on. 189 00:09:39,255 --> 00:09:43,725 Later on, as the project becomes more established, you'll design 190 00:09:43,725 --> 00:09:45,585 in more incremental steps. 191 00:09:46,185 --> 00:09:49,275 I think what we're going to do here is we're going to have a title and the date 192 00:09:49,305 --> 00:09:52,425 that an entry was posted, and then we're going to have some text for the entry 193 00:09:52,425 --> 00:09:54,045 so we're going to keep it really simple. 194 00:09:54,045 --> 00:09:57,555 How I'm going to start is I'm going to have some sort of entry title. 195 00:09:57,865 --> 00:09:59,875 Like today, I couldn't learn too much. 196 00:10:00,445 --> 00:10:02,455 And then we're going to have some entry text. 197 00:10:02,905 --> 00:10:03,235 By the way. 198 00:10:03,235 --> 00:10:07,915 I'm copying by selecting and then pressing alt and dragging while alt is pressed. 199 00:10:07,945 --> 00:10:09,835 That allows us to copy elements. 200 00:10:10,518 --> 00:10:12,318 Today I couldn't learn too much. 201 00:10:12,368 --> 00:10:15,855 , because I spent some time designing my new app. 202 00:10:16,305 --> 00:10:16,645 Let's say. 203 00:10:17,075 --> 00:10:20,345 What's going to happen here or what I'm thinking might happen is 204 00:10:20,465 --> 00:10:24,235 since the users are only writing a log here in a single text field. 205 00:10:24,265 --> 00:10:27,505 They're not going to have the ability to write a different 206 00:10:27,565 --> 00:10:30,042 title from the body of the entry. 207 00:10:30,042 --> 00:10:33,522 So I'm going to take a bit of the body and use it as the title and then I'm 208 00:10:33,522 --> 00:10:35,502 going to put the entire text in here. 209 00:10:36,237 --> 00:10:39,717 Now I want to make this text the same width as the entry so I'm just 210 00:10:39,717 --> 00:10:43,817 going to grab it and bring it down so that it matches that one there. 211 00:10:44,350 --> 00:10:46,810 ,Because this is a title I'm just going to make it a little 212 00:10:46,810 --> 00:10:48,730 bit bigger maybe 22 pixels. 213 00:10:49,357 --> 00:10:53,797 And then I'm going to make sure that they are aligned there and they're not aligned. 214 00:10:53,827 --> 00:10:55,627 We're going to make them align and I'm going to separate them 215 00:10:55,627 --> 00:10:59,407 by 20 pixels so now the distance between these two is 20 pixels. 216 00:11:00,407 --> 00:11:04,007 I also like my text when it's in multiple lines to be a little bit 217 00:11:04,007 --> 00:11:05,777 more separated than the default. 218 00:11:05,777 --> 00:11:08,417 And you can adjust that with this icon over here. 219 00:11:08,417 --> 00:11:09,437 The line height. 220 00:11:09,857 --> 00:11:12,227 I'm going to set it to 150%. 221 00:11:12,437 --> 00:11:14,747 And that's just going to make the text a little bit more separated. 222 00:11:14,867 --> 00:11:16,367 A little bit easier to read. 223 00:11:16,953 --> 00:11:18,753 I'm actually thinking that these are a bit too big. 224 00:11:18,753 --> 00:11:24,453 So I'm going to bring these down to, let's say 14 pixels and let's say 16 pixels. 225 00:11:25,203 --> 00:11:26,943 That's going to be a little bit better. 226 00:11:27,933 --> 00:11:29,763 And again, separated by now. 227 00:11:29,793 --> 00:11:32,190 15 pixels, I think 20, maybe too many. 228 00:11:32,812 --> 00:11:35,962 We also want to put the date in here somewhere. 229 00:11:35,962 --> 00:11:39,802 So I'm going to go ahead and add another element where we're going 230 00:11:39,802 --> 00:11:42,085 to put, let's say October 24th. 231 00:11:42,366 --> 00:11:45,546 When you're doing this, you want to make sure that these two have the same size. 232 00:11:45,576 --> 00:11:49,056 So we want to bring this one up to 16 otherwise it's going to look really 233 00:11:49,056 --> 00:11:53,376 bizarre when multiple things in the same line have different size of text. 234 00:11:53,736 --> 00:11:56,136 So we're going to separate that slightly there as well. 235 00:11:56,779 --> 00:11:59,689 We're going to come back to this, but for now, we're going to grab it and copy it. 236 00:12:00,619 --> 00:12:04,069 And we're going to separate it by 50 pixels from each other. 237 00:12:04,249 --> 00:12:07,459 So we're going to bring three of them just like that. 238 00:12:07,459 --> 00:12:08,839 If I manage there. 239 00:12:09,019 --> 00:12:10,999 So now we've got three there that we can work on. 240 00:12:11,049 --> 00:12:13,569 When we make changes to this because there's three of them is going to let 241 00:12:13,569 --> 00:12:16,819 us see a little bit more easily what we want to change and what we want to keep. 242 00:12:17,374 --> 00:12:22,554 Finally down at the bottom, we're gonna put the footer and that's going 243 00:12:22,554 --> 00:12:24,324 to be the full width of the page. 244 00:12:24,354 --> 00:12:27,924 And it's going to be, let's say 160 pixels tall. 245 00:12:27,924 --> 00:12:31,184 So that's 40 and 40 by 160. 246 00:12:31,738 --> 00:12:36,138 I've decided to separate the data from the text, with this little icon there. 247 00:12:36,188 --> 00:12:39,338 You can find out how to write these icons using Google. 248 00:12:39,378 --> 00:12:42,725 In Windows you have to press alt and a number combination in your number 249 00:12:42,725 --> 00:12:44,135 pad in order to come up with it. 250 00:12:44,315 --> 00:12:46,385 And on Mac, you'll have to use the symbol viewer. 251 00:12:46,692 --> 00:12:48,912 But now that we've got this, I'm thinking that we're going to want 252 00:12:48,912 --> 00:12:52,212 to change it the text color here to be some sort of light gray so it 253 00:12:52,212 --> 00:12:54,282 doesn't take away from the main title. 254 00:12:54,532 --> 00:12:57,032 I'm just select that bit of text there and change the color, and 255 00:12:57,032 --> 00:12:58,142 then I'm going to copy that color 256 00:12:58,442 --> 00:13:04,262 and select the other identical elements there just to make them a little bit gray. 257 00:13:04,974 --> 00:13:05,964 For the footer, I'm going to go dark. 258 00:13:06,793 --> 00:13:09,138 So I found a color that I quite like. 259 00:13:09,138 --> 00:13:10,218 It's going to be this one. 260 00:13:10,248 --> 00:13:13,938 You can find colors just by clicking on it and deciding on a color that you like, but 261 00:13:13,938 --> 00:13:18,431 you can see here that I've started from this color and then I've gone down until 262 00:13:18,431 --> 00:13:22,571 I found a relatively dark color that I was happy with so that's this one there. 263 00:13:23,061 --> 00:13:26,571 And now we're going to write our footer columns in here. 264 00:13:26,571 --> 00:13:29,485 So I'm going to press the T element for text, and I'm 265 00:13:29,485 --> 00:13:31,775 going to write here made by me. 266 00:13:32,217 --> 00:13:36,807 If you're rewriting this code and you want to publish this in your own repositories. 267 00:13:37,117 --> 00:13:39,427 Obviously if you make a few changes, that's totally fine. 268 00:13:39,427 --> 00:13:41,317 Anything you want to do with this code. 269 00:13:41,627 --> 00:13:44,807 Just make sure to give attribution to the course, if you're copying 270 00:13:44,807 --> 00:13:48,907 the code exactly otherwise employers are not gonna like that. 271 00:13:49,037 --> 00:13:52,127 But feel free to put your own name in there if you're coding this from scratch. 272 00:13:52,277 --> 00:13:54,857 That's totally fine as long as you give the attribution to the course 273 00:13:55,277 --> 00:13:58,247 so that you don't try to pass it off as your own, everybody's going to be 274 00:13:58,247 --> 00:14:01,237 really happy with that and you can use it for your portfolio of course. 275 00:14:01,468 --> 00:14:04,348 Now, of course you can't see that text there, so we're going to make it white. 276 00:14:04,558 --> 00:14:09,058 And then we're gonna add a couple more pieces of text in here. 277 00:14:09,328 --> 00:14:10,408 I'm just going to copy it. 278 00:14:10,928 --> 00:14:11,498 Just like that. 279 00:14:11,498 --> 00:14:13,448 And we're going to make some changes here in just a moment. 280 00:14:14,070 --> 00:14:16,620 What I'm going to do is I'm going to change this to 281 00:14:16,710 --> 00:14:19,170 check out my other projects. 282 00:14:19,270 --> 00:14:22,390 That way, whenever anybody visits this project in your portfolio, they can click 283 00:14:22,390 --> 00:14:24,880 this to go and check out your main page. 284 00:14:25,690 --> 00:14:30,820 We're also going to add a few site links in here, like a recent calendar 285 00:14:31,690 --> 00:14:34,840 that we decided we're going to be up there in the header earlier on. 286 00:14:34,870 --> 00:14:37,300 About and how this was made. 287 00:14:37,761 --> 00:14:40,581 Okay, now that we're here and we've decided that we're going to use recent 288 00:14:40,581 --> 00:14:42,171 and calendar as our two main pages. 289 00:14:42,321 --> 00:14:46,731 I'm also going to come in here and change these two recent and calendar. 290 00:14:47,361 --> 00:14:50,191 When doing this, just make sure your head is again the right size. 291 00:14:50,211 --> 00:14:51,321 So I'm going to grab everything. 292 00:14:51,501 --> 00:14:53,481 You can see that we're missing 19 pixels. 293 00:14:53,631 --> 00:14:57,201 So I'm going to grab this and move it 20 pixels to the right. 294 00:14:57,201 --> 00:15:00,171 So this is now 640 and then I'm going to grab the "Recent" and make 295 00:15:00,171 --> 00:15:03,631 sure that it is a 50 pixels away from the "Calendar" as we decided. 296 00:15:04,173 --> 00:15:07,533 These rows here look very far away from each other so I'm just going 297 00:15:07,533 --> 00:15:08,883 to bring them a little bit closer. 298 00:15:09,603 --> 00:15:13,477 Just like that 5 pixels away from each other will do just fine. 299 00:15:13,882 --> 00:15:17,992 And I'm going to separate each one by 40 pixels from the top. 300 00:15:18,052 --> 00:15:21,167 Just so that they're not too close to the top of the footer. 301 00:15:21,583 --> 00:15:25,173 Now I'm going to select each pair of rows and I'm going to right 302 00:15:25,173 --> 00:15:28,243 align them to make sure that they match in the right alignment. 303 00:15:28,303 --> 00:15:28,573 There. 304 00:15:28,972 --> 00:15:33,532 Finally, we have to decide how far away this column will be from this column. 305 00:15:34,188 --> 00:15:38,028 Since we've used 50 pixels to separate each element in here. 306 00:15:38,238 --> 00:15:42,528 I think that we can use 50 pixels to separate this column from this one. 307 00:15:42,558 --> 00:15:43,878 So at the moment is a 100 pixels. 308 00:15:44,628 --> 00:15:46,068 We're going to bring it down to 50. 309 00:15:46,587 --> 00:15:51,087 Also at this point, it's worth reviewing whether our spacing is correct throughout 310 00:15:51,087 --> 00:15:52,917 so let's select each one of these. 311 00:15:53,217 --> 00:15:54,327 50 pixels. 312 00:15:54,717 --> 00:15:55,707 50 pixels. 313 00:15:55,887 --> 00:15:59,597 This is one is clearly not 50 pixels, so we can bring it down to 50. 314 00:16:00,069 --> 00:16:04,502 And what's the spacing between this and the header is 85 pixels so let's try 315 00:16:04,502 --> 00:16:07,453 to bring it up to 50, just like that. 316 00:16:07,616 --> 00:16:10,226 Now this footer here might seem like it's very far away, 317 00:16:10,226 --> 00:16:11,546 but it doesn't really matter. 318 00:16:11,786 --> 00:16:15,596 We're going to make this footer appear higher up if there's no entries and 319 00:16:15,596 --> 00:16:17,096 lower down if there are more entries. 320 00:16:17,216 --> 00:16:20,396 So the sizing here doesn't really matter at this point. 321 00:16:21,106 --> 00:16:24,586 Something that we normally want to do in our headers is mark the 322 00:16:24,586 --> 00:16:27,556 currently active page as being active. 323 00:16:27,766 --> 00:16:31,106 So that's the recent page in this case, because that's where we are right now. 324 00:16:31,506 --> 00:16:35,536 And by extension, we want to mark other pages as not the active page. 325 00:16:35,626 --> 00:16:38,686 So we're going to bring this down into a different color. 326 00:16:39,331 --> 00:16:42,721 By doing that it's more obvious that we are currently in the recent 327 00:16:42,721 --> 00:16:46,531 page and that we can click on the calendar page to go somewhere else. 328 00:16:47,162 --> 00:16:51,802 There are still a lot of things to think about even when we've gotten this far. 329 00:16:51,982 --> 00:16:54,112 But we're going to think about those things a bit more 330 00:16:54,112 --> 00:16:55,192 when we get into development. 331 00:16:55,412 --> 00:16:58,876 For example, what should happen when the user hovers over or puts 332 00:16:58,876 --> 00:17:00,736 their mouse over the calendar link? 333 00:17:00,766 --> 00:17:02,906 What color should this turn to? 334 00:17:02,926 --> 00:17:04,096 Should it turn into this color? 335 00:17:04,221 --> 00:17:05,151 Should it turn red? 336 00:17:05,271 --> 00:17:06,981 Should it to get a background et cetera. 337 00:17:07,491 --> 00:17:09,381 What happens when the user starts typing? 338 00:17:09,411 --> 00:17:12,081 What is going to be the color of the text they type? 339 00:17:12,121 --> 00:17:14,721 Should it be this color or should it be something else? 340 00:17:15,231 --> 00:17:17,151 What happens when the user hovers over that button? 341 00:17:17,211 --> 00:17:18,351 Should it change colors? 342 00:17:18,351 --> 00:17:20,514 Should it get a shadow under it et cetera. 343 00:17:21,024 --> 00:17:24,234 All of these little animations are things that we can design 344 00:17:24,294 --> 00:17:25,344 at this point if we want. 345 00:17:25,644 --> 00:17:28,704 But I think we've done enough for this project just now. 346 00:17:28,854 --> 00:17:31,469 We're going to leave it as is here. 347 00:17:31,559 --> 00:17:35,159 And when we get into coding and our website becomes more operational. 348 00:17:35,309 --> 00:17:37,469 We'll come back and we'll add those animations. 349 00:17:38,469 --> 00:17:42,298 Alright now that we've got this pixel perfect or I'm not a very good designer 350 00:17:42,298 --> 00:17:44,338 so only relatively pixel perfect design. 351 00:17:44,638 --> 00:17:48,618 The next step is to think about what HTML elements are going to be on our site. 352 00:17:48,618 --> 00:17:52,488 How is the main structure of the site in terms of the main containers? 353 00:17:52,728 --> 00:17:55,518 How is it defined and what we're going to have in there? 354 00:17:55,668 --> 00:17:57,678 So that's what we're going to think about in the next video. 355 00:17:57,948 --> 00:17:58,548 I'll see you there.