Original subtitles

1 1

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.