1 1 00:00:01,779 --> 00:00:04,218 It's now time to start our project. 2 2 00:00:04,218 --> 00:00:05,885 This is so exciting. 3 3 00:00:07,472 --> 00:00:10,633 So let me introduce OMNIFOOD to you. 4 4 00:00:10,633 --> 00:00:13,009 OMNIFOOD is a fictional company, 5 5 00:00:13,009 --> 00:00:16,404 I made up only for this course. 6 6 00:00:16,404 --> 00:00:19,512 OMNIFOOD is a premium food delivery company, 7 7 00:00:19,512 --> 00:00:22,590 devoted to bring healthy and affordable meals, 8 8 00:00:22,590 --> 00:00:25,236 to people in currently four cities. 9 9 00:00:25,236 --> 00:00:28,962 Now, they need a new, modern and clean website 10 10 00:00:28,962 --> 00:00:33,788 that will make them look like a really professional company. 11 11 00:00:33,788 --> 00:00:36,656 And that is where we come in. 12 12 00:00:36,656 --> 00:00:39,392 We are going to do exactly that. 13 13 00:00:39,392 --> 00:00:43,584 Together we will pretend that we were hired by OMNIFOOD 14 14 00:00:43,584 --> 00:00:47,707 to design and develop the visual part of their website 15 15 00:00:47,707 --> 00:00:50,957 using HTML, Syntax and a little jQuery. 16 16 00:00:51,845 --> 00:00:53,178 Isn't that fun? 17 17 00:00:54,422 --> 00:00:56,105 It's like first job. 18 18 00:00:56,105 --> 00:00:58,938 I mean, this is really cool right? 19 19 00:00:59,804 --> 00:01:02,315 And they actually provide us with all the content 20 20 00:01:02,315 --> 00:01:05,812 that you can and should download right now 21 21 00:01:05,812 --> 00:01:08,562 from the link in the description. 22 22 00:01:10,161 --> 00:01:13,818 Now, based on what OMNIFOOD wants from us. 23 23 00:01:13,818 --> 00:01:16,287 We will start to put the seven step plan 24 24 00:01:16,287 --> 00:01:18,320 we discussed before, 25 25 00:01:18,320 --> 00:01:19,153 in action. 26 26 00:01:22,086 --> 00:01:24,336 So, starting with step one. 27 27 00:01:25,253 --> 00:01:26,943 As you probably remember, 28 28 00:01:26,943 --> 00:01:30,232 step one is all about defining the project. 29 29 00:01:30,232 --> 00:01:33,967 So the goal of the project is to show what OMNIFOOD does. 30 30 00:01:33,967 --> 00:01:35,274 How it works. 31 31 00:01:35,274 --> 00:01:38,810 And in which city it operates in. 32 32 00:01:38,810 --> 00:01:43,093 Then, make people sign up on a subscription plan. 33 33 00:01:43,093 --> 00:01:46,906 And is actually a pretty common project goal. 34 34 00:01:46,906 --> 00:01:50,687 And the audience for this project is busy people 35 35 00:01:50,687 --> 00:01:54,437 who don't have time to cook or don't like to cook. 36 36 00:01:54,437 --> 00:01:55,687 Simple as that. 37 37 00:01:58,418 --> 00:02:02,409 Now step two was about planning the website. 38 38 00:02:02,409 --> 00:02:05,246 We will build a one page web page, 39 39 00:02:05,246 --> 00:02:09,152 containing all the information provided by OMNIFOOD 40 40 00:02:09,152 --> 00:02:13,319 With a simple navigation to guide us through the page. 41 41 00:02:14,325 --> 00:02:16,966 And the content was provided by OMNIFOOD 42 42 00:02:16,966 --> 00:02:19,849 in the form of a text document and couple of images 43 43 00:02:19,849 --> 00:02:24,376 that you already downloaded to your computer. 44 44 00:02:24,376 --> 00:02:26,101 And navigation was also provided 45 45 00:02:26,101 --> 00:02:29,726 by OMNIFOOD in that text document. 46 46 00:02:29,726 --> 00:02:33,887 We will look at all of that once we start building. 47 47 00:02:33,887 --> 00:02:37,218 And a side map, it's not necessary in this case, 48 48 00:02:37,218 --> 00:02:39,110 because we are talking about 49 49 00:02:39,110 --> 00:02:42,610 a relatively small one page website here. 50 50 00:02:45,070 --> 00:02:49,098 The next step is to get inspired and sketch some ideas. 51 51 00:02:49,098 --> 00:02:51,933 Here is what I did for our project. 52 52 00:02:51,933 --> 00:02:53,537 So we'll show you some sketches 53 53 00:02:53,537 --> 00:02:56,743 for the nine different sections of the website. 54 54 00:02:56,743 --> 00:03:00,826 Starting with the header and the feature section. 55 55 00:03:02,874 --> 00:03:05,594 You can clearly see that I'm really bad 56 56 00:03:05,594 --> 00:03:07,351 at drawing and sketching. 57 57 00:03:07,351 --> 00:03:11,518 But I try my best because this step is really important. 58 58 00:03:14,055 --> 00:03:16,976 And as I said before it really doesn't matter 59 59 00:03:16,976 --> 00:03:19,647 if your sketches look good or bad. 60 60 00:03:19,647 --> 00:03:23,814 We just want to get an idea of what we want to build. 61 61 00:03:26,181 --> 00:03:29,022 So these different sections I sketched here 62 62 00:03:29,022 --> 00:03:32,845 follow exactly the content OMNIFOOD gave us. 63 63 00:03:32,845 --> 00:03:34,984 You can take a look at the document 64 64 00:03:34,984 --> 00:03:39,067 and compare it with the sketches I show you here. 65 65 00:03:40,607 --> 00:03:43,569 As we design each of these nine sections. 66 66 00:03:43,569 --> 00:03:47,569 I will show you my sketches with greater detail. 67 67 00:03:49,105 --> 00:03:50,605 And now step four. 68 68 00:03:51,529 --> 00:03:54,117 This is where all the fun begins. 69 69 00:03:54,117 --> 00:03:59,014 In step four, we finally design and develop our website. 70 70 00:03:59,014 --> 00:04:00,743 This will take us from this lecture, 71 71 00:04:00,743 --> 00:04:03,543 all until the end of section six. 72 72 00:04:03,543 --> 00:04:06,750 This is because actually designing and developing 73 73 00:04:06,750 --> 00:04:11,074 the web page is of course, what matters the most. 74 74 00:04:11,074 --> 00:04:13,374 So for the design, I will start 75 75 00:04:13,374 --> 00:04:15,513 by defining two essential things. 76 76 00:04:15,513 --> 00:04:16,930 Colors and fonts. 77 77 00:04:18,968 --> 00:04:23,408 As for the color, I'm going with an orange tone here. 78 78 00:04:23,408 --> 00:04:26,863 We will use the flat UI colors that I showed you before, 79 79 00:04:26,863 --> 00:04:29,743 to decide the exactly which orange tone 80 80 00:04:29,743 --> 00:04:32,089 when we first need to use it. 81 81 00:04:32,089 --> 00:04:35,764 Remember what I said about orange earlier. 82 82 00:04:35,764 --> 00:04:37,938 It can be associated with friendliness, 83 83 00:04:37,938 --> 00:04:39,855 confidence and courage. 84 84 00:04:40,893 --> 00:04:42,967 Well this is exactly the kind of things 85 85 00:04:42,967 --> 00:04:46,078 I want our web page to transmit to the user 86 86 00:04:46,078 --> 00:04:50,245 in order to make him or her sign up for a subscription plan. 87 87 00:04:51,101 --> 00:04:54,018 And of course, it also looks great. 88 88 00:04:56,322 --> 00:04:57,804 Now as for the font. 89 89 00:04:57,804 --> 00:05:01,345 I showed you some great Google fonts before. 90 90 00:05:01,345 --> 00:05:03,428 We are going to use LATO. 91 91 00:05:04,387 --> 00:05:08,298 In my opinion, LATO looks really good. 92 92 00:05:08,298 --> 00:05:10,933 The semi-rounded details of the letters, 93 93 00:05:10,933 --> 00:05:14,382 give the typeface a feeling of warmth. 94 94 00:05:14,382 --> 00:05:15,655 While the strong structure, 95 95 00:05:15,655 --> 00:05:18,572 provides stability and seriousness. 96 96 00:05:19,522 --> 00:05:21,824 According to the designer of this font, 97 97 00:05:21,824 --> 00:05:26,023 it is male and female, serious but friendly. 98 98 00:05:26,023 --> 00:05:28,529 With the feeling of the summer. 99 99 00:05:28,529 --> 00:05:31,157 Well given our project and it's audience, 100 100 00:05:31,157 --> 00:05:36,139 it feels like this is a perfect font for our web page. 101 101 00:05:36,139 --> 00:05:38,937 Actually, all the presentations you've been seeing 102 102 00:05:38,937 --> 00:05:42,604 in this course also use this type face LATO. 103 103 00:05:44,322 --> 00:05:47,404 Now having these design decisions in mind, 104 104 00:05:47,404 --> 00:05:49,747 let's finally go back to brackets 105 105 00:05:49,747 --> 00:05:52,216 and start to code our project. 106 106 00:05:52,216 --> 00:05:53,383 See you there.