Voiceover: It's now time to start our project. 2 2
This is so exciting. 3 3
So let me introduce OMNIFOOD to you. 4 4
OMNIFOOD is a fictional company, 5 5
I made up only for this course. 6 6
OMNIFOOD is a premium food delivery company, 7 7
devoted to bring healthy and affordable meals, 8 8
to people in currently four cities. 9 9
Now, they need a new, modern and clean website 10 10
that will make them look like a really professional company. 11 11
And that is where we come in. 12 12
We are going to do exactly that. 13 13
Together we will pretend that we were hired by OMNIFOOD 14 14
to design and develop the visual part of their website 15 15
using HTML, Syntax and a little jQuery. 16 16
Isn't that fun? 17 17
It's like first job. 18 18
I mean, this is really cool right? 19 19
And they actually provide us with all the content 20 20
that you can and should download right now 21 21
from the link in the description. 22 22
Now, based on what OMNIFOOD wants from us. 23 23
We will start to put the seven step plan 24 24
we discussed before, 25 25
in action. 26 26
So, starting with step one. 27 27
As you probably remember, 28 28
step one is all about defining the project. 29 29
So the goal of the project is to show what OMNIFOOD does. 30 30
How it works. 31 31
And in which city it operates in. 32 32
Then, make people sign up on a subscription plan. 33 33
And is actually a pretty common project goal. 34 34
And the audience for this project is busy people 35 35
who don't have time to cook or don't like to cook. 36 36
Simple as that. 37 37
Now step two was about planning the website. 38 38
We will build a one page web page, 39 39
containing all the information provided by OMNIFOOD 40 40
With a simple navigation to guide us through the page. 41 41
And the content was provided by OMNIFOOD 42 42
in the form of a text document and couple of images 43 43
that you already downloaded to your computer. 44 44
And navigation was also provided 45 45
by OMNIFOOD in that text document. 46 46
We will look at all of that once we start building. 47 47
And a side map, it's not necessary in this case, 48 48
because we are talking about 49 49
a relatively small one page website here. 50 50
The next step is to get inspired and sketch some ideas. 51 51
Here is what I did for our project. 52 52
So we'll show you some sketches 53 53
for the nine different sections of the website. 54 54
Starting with the header and the feature section. 55 55
You can clearly see that I'm really bad 56 56
at drawing and sketching. 57 57
But I try my best because this step is really important. 58 58
And as I said before it really doesn't matter 59 59
if your sketches look good or bad. 60 60
We just want to get an idea of what we want to build. 61 61
So these different sections I sketched here 62 62
follow exactly the content OMNIFOOD gave us. 63 63
You can take a look at the document 64 64
and compare it with the sketches I show you here. 65 65
As we design each of these nine sections. 66 66
I will show you my sketches with greater detail. 67 67
And now step four. 68 68
This is where all the fun begins. 69 69
In step four, we finally design and develop our website. 70 70
This will take us from this lecture, 71 71
all until the end of section six. 72 72
This is because actually designing and developing 73 73
the web page is of course, what matters the most. 74 74
So for the design, I will start 75 75
by defining two essential things. 76 76
Colors and fonts. 77 77
As for the color, I'm going with an orange tone here. 78 78
We will use the flat UI colors that I showed you before, 79 79
to decide the exactly which orange tone 80 80
when we first need to use it. 81 81
Remember what I said about orange earlier. 82 82
It can be associated with friendliness, 83 83
confidence and courage. 84 84
Well this is exactly the kind of things 85 85
I want our web page to transmit to the user 86 86
in order to make him or her sign up for a subscription plan. 87 87
And of course, it also looks great. 88 88
Now as for the font. 89 89
I showed you some great Google fonts before. 90 90
We are going to use LATO. 91 91
In my opinion, LATO looks really good. 92 92
The semi-rounded details of the letters, 93 93
give the typeface a feeling of warmth. 94 94
While the strong structure, 95 95
provides stability and seriousness. 96 96
According to the designer of this font, 97 97
it is male and female, serious but friendly. 98 98
With the feeling of the summer. 99 99
Well given our project and it's audience, 100 100
it feels like this is a perfect font for our web page. 101 101
Actually, all the presentations you've been seeing 102 102
in this course also use this type face LATO. 103 103
Now having these design decisions in mind, 104 104
let's finally go back to brackets 105 105
and start to code our project. 106 106
See you there.