Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,952 --> 00:00:03,311
It's now time to start planning
2
00:00:03,311 --> 00:00:05,141
our big course project,
3
00:00:05,141 --> 00:00:08,920
based on the steps that we just learned about.
4
00:00:08,920 --> 00:00:13,920
And so, let me start by introducing you to "Omnifood".
5
00:00:14,490 --> 00:00:18,121
So, Omnifood is a fictional startup that I invented
6
00:00:18,121 --> 00:00:20,420
just for this course.
7
00:00:20,420 --> 00:00:25,210
And what they do, is to use AI to create and deliver
8
00:00:25,210 --> 00:00:28,181
custom healthy meal plans. But right now,
9
00:00:28,181 --> 00:00:31,160
before they can actually launch their product,
10
00:00:31,160 --> 00:00:36,160
they need a new, beautiful, modern and clean website.
11
00:00:36,440 --> 00:00:38,550
So, a website that will make them look
12
00:00:38,550 --> 00:00:42,080
like a professional and trustworthy company.
13
00:00:42,080 --> 00:00:44,640
And so, that is where we come in,
14
00:00:44,640 --> 00:00:47,320
because we will do exactly that.
15
00:00:47,320 --> 00:00:49,560
So together, we will pretend
16
00:00:49,560 --> 00:00:53,361
that we were hired by Omnifood to design and build
17
00:00:53,361 --> 00:00:58,361
their marketing website using HTML and CSS.
18
00:00:58,380 --> 00:01:01,630
So, this is going to be a real-world project,
19
00:01:01,630 --> 00:01:05,380
where we're gonna use all the skills that we already learned
20
00:01:05,380 --> 00:01:07,340
and even a lot more.
21
00:01:07,340 --> 00:01:09,540
So, this project will be like
22
00:01:09,540 --> 00:01:12,810
your very first job, building websites.
23
00:01:12,810 --> 00:01:15,890
And this is really, really cool, I think.
24
00:01:15,890 --> 00:01:18,401
It will be so much fun to pretend
25
00:01:18,401 --> 00:01:22,452
that we're actually working for a real company, right?
26
00:01:22,452 --> 00:01:26,750
So, I hope you're as excited as I am about this project.
27
00:01:26,750 --> 00:01:30,660
I think this is a really cool idea and challenge,
28
00:01:30,660 --> 00:01:34,070
and of course, learning opportunity as well.
29
00:01:34,070 --> 00:01:35,750
Now, Omnifood provides us
30
00:01:35,750 --> 00:01:39,090
with all the content for the website, of course.
31
00:01:39,090 --> 00:01:42,362
And so, in order to prepare for our job now,
32
00:01:42,362 --> 00:01:45,283
let's take a quick look at that content.
33
00:01:47,000 --> 00:01:49,350
And as always, that content
34
00:01:49,350 --> 00:01:52,083
is in the starter files for this section.
35
00:01:52,980 --> 00:01:56,940
So, let's come here again to our starter folder.
36
00:01:56,940 --> 00:02:00,800
And then, here inside of this, it is this one.
37
00:02:00,800 --> 00:02:04,044
So, Omnifood-Desktop seven.
38
00:02:04,044 --> 00:02:07,030
And then here, all we have is this content.
39
00:02:07,030 --> 00:02:08,400
So again, what I will do
40
00:02:08,400 --> 00:02:10,399
is copy this folder here
41
00:02:10,399 --> 00:02:13,420
and paste it right here.
42
00:02:13,420 --> 00:02:16,460
So, "07-Omnifood-Desktop".
43
00:02:16,460 --> 00:02:18,630
Now, in your case, it is probably enough
44
00:02:18,630 --> 00:02:20,530
to simply call this "Omnifood",
45
00:02:20,530 --> 00:02:22,910
and then, you will simply work in this folder
46
00:02:22,910 --> 00:02:25,340
until the very end of the course.
47
00:02:25,340 --> 00:02:27,470
Here, in my case, I have divided it
48
00:02:27,470 --> 00:02:29,270
into multiple folders
49
00:02:29,270 --> 00:02:33,570
because we will have multiple sections in this project.
50
00:02:33,570 --> 00:02:36,963
But again, you should just do it like this.
51
00:02:38,321 --> 00:02:40,520
Then, let's create a new window here
52
00:02:40,520 --> 00:02:44,630
and then, I'm going to open that folder right here.
53
00:02:44,630 --> 00:02:47,920
And so, that will then be our project folder
54
00:02:47,920 --> 00:02:49,713
for this project.
55
00:02:52,840 --> 00:02:53,873
Okay.
56
00:02:54,730 --> 00:02:56,673
This is something new here in VS code.
57
00:02:58,200 --> 00:02:59,750
So, just click on "yes" there
58
00:03:01,010 --> 00:03:02,710
and okay.
59
00:03:02,710 --> 00:03:05,950
So, all we have here is this folder with the content
60
00:03:05,950 --> 00:03:08,640
and then, in there, we have this image folder,
61
00:03:08,640 --> 00:03:10,440
which has all the images
62
00:03:10,440 --> 00:03:13,090
and even some more folders with images.
63
00:03:13,090 --> 00:03:14,720
And then, even more importantly,
64
00:03:14,720 --> 00:03:19,720
we have this content.md and "md" stands for markdown,
65
00:03:19,920 --> 00:03:22,010
which is a special text format
66
00:03:22,010 --> 00:03:24,383
that we use many times in development.
67
00:03:25,570 --> 00:03:27,200
So, just quickly about that.
68
00:03:27,200 --> 00:03:30,740
Basically, in markup, having one hash like this
69
00:03:30,740 --> 00:03:32,540
is for the main heading,
70
00:03:32,540 --> 00:03:35,510
then two hashes is for the secondary heading
71
00:03:35,510 --> 00:03:37,410
and so on and so forth.
72
00:03:37,410 --> 00:03:39,330
So, here we have a third one.
73
00:03:39,330 --> 00:03:41,510
So, this is a tertiary heading.
74
00:03:41,510 --> 00:03:43,633
So, it's a little bit like H1, H2,
75
00:03:43,633 --> 00:03:46,723
all the way to H6, in HTML.
76
00:03:47,840 --> 00:03:50,810
But anyway, here we have some short description
77
00:03:50,810 --> 00:03:53,760
about Omnifood right here.
78
00:03:53,760 --> 00:03:55,300
Then, we have some branding.
79
00:03:55,300 --> 00:03:58,373
So, things like the headline and the brand color.
80
00:03:59,220 --> 00:04:02,050
So, as you see, at least the design decision
81
00:04:02,050 --> 00:04:05,680
about the color has already been taken away from us,
82
00:04:05,680 --> 00:04:07,520
which is very nice.
83
00:04:07,520 --> 00:04:11,030
So, this is helpful to already have the brand color.
84
00:04:11,030 --> 00:04:14,180
And then here, they give us the actual content
85
00:04:14,180 --> 00:04:15,273
for the website.
86
00:04:16,140 --> 00:04:18,620
So, we have some summary and we have then here,
87
00:04:18,620 --> 00:04:20,863
all this content that we will need.
88
00:04:21,820 --> 00:04:23,070
Okay.
89
00:04:23,070 --> 00:04:25,660
And so now, I just want to ask you to please
90
00:04:25,660 --> 00:04:27,520
pause the video at this point
91
00:04:27,520 --> 00:04:29,910
and read all this content here.
92
00:04:29,910 --> 00:04:32,970
So that then, when we start building the project,
93
00:04:32,970 --> 00:04:35,040
we are all on the same page.
94
00:04:35,040 --> 00:04:38,490
And actually, the most important thing here is this one.
95
00:04:38,490 --> 00:04:39,840
So, this description.
96
00:04:39,840 --> 00:04:41,660
Because this one, we will actually need
97
00:04:41,660 --> 00:04:44,280
for the rest of this lecture.
98
00:04:44,280 --> 00:04:45,113
Okay.
99
00:04:45,113 --> 00:04:49,000
So, please pause the video here and read this description.
100
00:04:49,000 --> 00:04:50,800
And if you feel like it,
101
00:04:50,800 --> 00:04:52,180
it would be even better
102
00:04:52,180 --> 00:04:54,183
to read the entire content here.
103
00:04:56,630 --> 00:04:57,570
All right.
104
00:04:57,570 --> 00:04:59,840
So now, based on this content
105
00:04:59,840 --> 00:05:02,200
and on the Omnifood description,
106
00:05:02,200 --> 00:05:05,453
let's actually start planning our project.
107
00:05:06,810 --> 00:05:09,930
So, what we're gonna do now is to take care of step one
108
00:05:09,930 --> 00:05:14,030
and step two of the seven steps behind a great website
109
00:05:14,030 --> 00:05:16,560
that we learned in the previous lecture.
110
00:05:16,560 --> 00:05:20,340
So in other words, we're gonna define and plan the project
111
00:05:20,340 --> 00:05:22,080
a little bit here now.
112
00:05:22,080 --> 00:05:24,860
And beginning with defining the project,
113
00:05:24,860 --> 00:05:25,780
remember that here,
114
00:05:25,780 --> 00:05:29,502
we need to define who the website is for, what it is for,
115
00:05:29,502 --> 00:05:34,502
and also, basically establish our target audience.
116
00:05:34,520 --> 00:05:36,850
So, the first one is very easy.
117
00:05:36,850 --> 00:05:40,350
In this case, this project is for a client.
118
00:05:40,350 --> 00:05:43,430
So, the Omnifood company in this case.
119
00:05:43,430 --> 00:05:46,080
Next, defining what the website is for
120
00:05:46,080 --> 00:05:50,050
is, basically, defining the user goal and the business goal.
121
00:05:50,050 --> 00:05:51,220
Remember?
122
00:05:51,220 --> 00:05:52,300
And for doing that,
123
00:05:52,300 --> 00:05:54,910
we can take another look at the content
124
00:05:54,910 --> 00:05:57,210
that Omnifood has provided us
125
00:05:57,210 --> 00:05:59,900
and that we just read previously.
126
00:05:59,900 --> 00:06:02,320
So, based on this company description,
127
00:06:02,320 --> 00:06:05,370
we can kind of infer that the business goal
128
00:06:05,370 --> 00:06:07,901
is to sell a monthly food subscription
129
00:06:07,901 --> 00:06:10,220
and that the goal of the users
130
00:06:10,220 --> 00:06:13,020
is to basically eat well, effortlessly,
131
00:06:13,020 --> 00:06:16,600
but without spending a lot of time and money.
132
00:06:16,600 --> 00:06:18,160
Now, of course, you could have used
133
00:06:18,160 --> 00:06:20,420
a completely different wording here,
134
00:06:20,420 --> 00:06:23,520
but the intention is basically this.
135
00:06:23,520 --> 00:06:27,160
So, the business wants to sell the food subscription
136
00:06:27,160 --> 00:06:31,960
and the user wants to eat well and eat healthy, right?
137
00:06:31,960 --> 00:06:34,920
So, that's basically what this website will be for,
138
00:06:34,920 --> 00:06:37,830
matching the business goal with the user goal.
139
00:06:37,830 --> 00:06:40,500
And so, of course, as we already learned,
140
00:06:40,500 --> 00:06:44,110
we need to keep this in mind as we design our page.
141
00:06:44,110 --> 00:06:47,540
And the huge factor in that is, of course, also the content,
142
00:06:47,540 --> 00:06:50,160
but that is already written, right?
143
00:06:50,160 --> 00:06:51,600
So, that makes it easier.
144
00:06:51,600 --> 00:06:54,330
But if you have to write the content on your own,
145
00:06:54,330 --> 00:06:58,070
then there, this aspect is actually even more important.
146
00:06:58,070 --> 00:07:01,550
So, writing the content exactly so that, in the end,
147
00:07:01,550 --> 00:07:04,830
we have the business goal meet the user goal.
148
00:07:04,830 --> 00:07:07,420
Now finally, about the target audience.
149
00:07:07,420 --> 00:07:10,550
We are not gonna be able to make it really specific,
150
00:07:10,550 --> 00:07:14,450
like in that example that I showed you in the last video,
151
00:07:14,450 --> 00:07:16,682
but we can take some clues here.
152
00:07:16,682 --> 00:07:19,310
So, the language in this description
153
00:07:19,310 --> 00:07:22,760
is kind of technical and geeky.
154
00:07:22,760 --> 00:07:26,941
So, with things like AI algorithm and AI-centric approach,
155
00:07:26,941 --> 00:07:30,200
and also, they themselves say that
156
00:07:30,200 --> 00:07:32,690
they are a technology company first.
157
00:07:32,690 --> 00:07:35,520
And so, I think it's safe to say that this product
158
00:07:35,520 --> 00:07:39,980
is targeted mainly to people who are into technology.
159
00:07:39,980 --> 00:07:43,750
So, a little bit into geeky stuff like this.
160
00:07:43,750 --> 00:07:45,910
Also, we can read from the description
161
00:07:45,910 --> 00:07:48,680
that this is kind of for busy people
162
00:07:48,680 --> 00:07:51,330
and also for people who are interested
163
00:07:51,330 --> 00:07:53,820
in their health, right?
164
00:07:53,820 --> 00:07:57,190
Now, since they will have to pay for a monthly subscription,
165
00:07:57,190 --> 00:07:59,770
which is probably not that cheap,
166
00:07:59,770 --> 00:08:02,970
they also will have to have a well-paying job.
167
00:08:02,970 --> 00:08:06,160
And so, in the end, we end up with this target audience
168
00:08:06,160 --> 00:08:08,780
of busy people who like technology,
169
00:08:08,780 --> 00:08:10,560
are interested in a healthy diet
170
00:08:10,560 --> 00:08:12,480
and have a well-paying job.
171
00:08:12,480 --> 00:08:14,940
And once again, this is even more important
172
00:08:14,940 --> 00:08:18,260
for when you actually write the content on your own.
173
00:08:18,260 --> 00:08:20,840
But still, it is good to know that the website
174
00:08:20,840 --> 00:08:23,980
will be built for people like this.
175
00:08:23,980 --> 00:08:25,600
Now, of course, this doesn't mean
176
00:08:25,600 --> 00:08:27,250
that there won't be any users
177
00:08:27,250 --> 00:08:29,560
who don't fit this description,
178
00:08:29,560 --> 00:08:31,950
but in general, it is people like this
179
00:08:31,950 --> 00:08:34,860
that we are going to build this website for.
180
00:08:34,860 --> 00:08:36,120
All right.
181
00:08:36,120 --> 00:08:40,390
So, that is basically defining the project in broad terms.
182
00:08:40,390 --> 00:08:43,530
So, let's go now to step number two.
183
00:08:43,530 --> 00:08:47,030
So, step number two, remember, entails planning
184
00:08:47,030 --> 00:08:49,430
and gathering the website content
185
00:08:49,430 --> 00:08:52,070
and this one has already been done.
186
00:08:52,070 --> 00:08:54,290
So, that's very nice.
187
00:08:54,290 --> 00:08:57,620
Then, the second one is to plan out the sitemap,
188
00:08:57,620 --> 00:08:59,900
which, in this case, is not necessary
189
00:08:59,900 --> 00:09:03,891
because we will simply build a one-page marketing website
190
00:09:03,891 --> 00:09:05,890
for Omnifood.
191
00:09:05,890 --> 00:09:08,000
So, there is no sitemap here needed
192
00:09:08,000 --> 00:09:10,540
because we have just one page.
193
00:09:10,540 --> 00:09:13,000
And oftentimes, a page like this
194
00:09:13,000 --> 00:09:16,961
with only, basically, one page is called a landing page.
195
00:09:16,961 --> 00:09:21,510
Next up, we need to think about the website personality.
196
00:09:21,510 --> 00:09:24,160
And here, once again, we can take some clues
197
00:09:24,160 --> 00:09:27,900
from the Omnifood description that we were provided.
198
00:09:27,900 --> 00:09:31,200
So here, in the first paragraph, they immediately say
199
00:09:31,200 --> 00:09:33,930
that they are a technology company first,
200
00:09:33,930 --> 00:09:38,390
but that they also have a focus on wellbeing of their users.
201
00:09:38,390 --> 00:09:39,490
Right?
202
00:09:39,490 --> 00:09:42,620
Now, in the previous step, we already defined also
203
00:09:42,620 --> 00:09:44,570
that we are looking, kind of,
204
00:09:44,570 --> 00:09:47,130
for a tech-centered target audience.
205
00:09:47,130 --> 00:09:50,610
And so therefore, it kind of makes sense, I think,
206
00:09:50,610 --> 00:09:54,322
that we will use the start-up and upbeat personality.
207
00:09:54,322 --> 00:09:57,740
Now, because of that importance that is being placed
208
00:09:57,740 --> 00:10:01,080
on consumer wellbeing, we can also add some elements
209
00:10:01,080 --> 00:10:03,910
of the calm and peaceful personality.
210
00:10:03,910 --> 00:10:06,260
So, that's a little bit where this personality
211
00:10:06,260 --> 00:10:08,000
usually focuses.
212
00:10:08,000 --> 00:10:11,590
And so, I think it might be nice to add some design elements
213
00:10:11,590 --> 00:10:13,760
of that personality as well.
214
00:10:13,760 --> 00:10:17,020
But in general, I think we will mainly use the start-up
215
00:10:17,020 --> 00:10:19,931
and upbeat personality because, well,
216
00:10:19,931 --> 00:10:23,600
this is, in fact, a startup. Okay?
217
00:10:23,600 --> 00:10:27,860
And so now, all we have to do is to plan the page sections.
218
00:10:27,860 --> 00:10:29,300
And so, in order to do that,
219
00:10:29,300 --> 00:10:31,810
let's actually go back to our content
220
00:10:31,810 --> 00:10:35,140
because remember that we should always do this planning
221
00:10:35,140 --> 00:10:37,170
based on the content.
222
00:10:37,170 --> 00:10:40,370
So, not to do a pretty design without the content,
223
00:10:40,370 --> 00:10:43,460
and then, simply filling it up with content.
224
00:10:43,460 --> 00:10:46,071
But instead, we will have our content,
225
00:10:46,071 --> 00:10:50,753
basically guide the design and the planning of the sections.
226
00:10:52,740 --> 00:10:56,690
Okay. So, let's check out here the website content.
227
00:10:56,690 --> 00:10:59,270
And, actually, this is already a little bit divided
228
00:10:59,270 --> 00:11:03,350
into sections, however, we can still do better.
229
00:11:03,350 --> 00:11:06,140
So, this content that they provided us with
230
00:11:06,140 --> 00:11:11,069
is not yet finally divided into logical website sections.
231
00:11:11,069 --> 00:11:15,960
But anyway, here we have some summary and also up here,
232
00:11:15,960 --> 00:11:18,500
this headline. And so these should probably go
233
00:11:18,500 --> 00:11:21,580
into some kind of a header, right?
234
00:11:21,580 --> 00:11:24,313
So, into a "hero section", as we like to call it.
235
00:11:25,750 --> 00:11:27,700
Then, we have here these features.
236
00:11:27,700 --> 00:11:30,282
We have how Omnifood works,
237
00:11:30,282 --> 00:11:33,344
then, we have some meals and this list,
238
00:11:33,344 --> 00:11:36,304
but let's actually go here to the very bottom
239
00:11:36,304 --> 00:11:40,533
where I will create a list of the sections.
240
00:11:42,580 --> 00:11:44,850
Just some separation there.
241
00:11:44,850 --> 00:11:47,053
And then here, I'm using an H2 basically,
242
00:11:47,970 --> 00:11:49,017
so, "Sections".
243
00:11:50,560 --> 00:11:53,821
So, these dashes here are basically like bullet points.
244
00:11:53,821 --> 00:11:55,820
So, let's use those.
245
00:11:55,820 --> 00:12:00,333
And remember, we are going to start with a "Hero" section.
246
00:12:01,380 --> 00:12:05,010
So for now, let's simply, basically, gather all the sections
247
00:12:05,010 --> 00:12:07,160
that you have here. And then, we will group them
248
00:12:07,160 --> 00:12:09,993
into more logical sections for our page.
249
00:12:11,040 --> 00:12:12,380
So here, they want a section
250
00:12:12,380 --> 00:12:15,203
with logos of featured publications.
251
00:12:17,180 --> 00:12:20,920
So here, they have some images about that.
252
00:12:20,920 --> 00:12:24,320
For example, Forbes or TechCrunch.
253
00:12:24,320 --> 00:12:27,260
And remember that this is something that I talked about
254
00:12:27,260 --> 00:12:30,750
in the components lecture. Right?
255
00:12:30,750 --> 00:12:32,570
But anyway, there's a lot of things here,
256
00:12:32,570 --> 00:12:35,450
but let's start at the top.
257
00:12:35,450 --> 00:12:38,611
So here, we have the features, then how it works.
258
00:12:38,611 --> 00:12:41,733
Okay. So, let's add that.
259
00:12:42,910 --> 00:12:45,460
Let's not use the word "section" here all the time.
260
00:12:46,740 --> 00:12:47,887
So, "Features",
261
00:12:50,527 --> 00:12:51,883
"How it works"...
262
00:12:53,610 --> 00:12:55,203
Let's see what else they have.
263
00:12:56,200 --> 00:12:59,430
Then, we have "diets" basically
264
00:12:59,430 --> 00:13:00,887
and "sample meals",
265
00:13:02,360 --> 00:13:06,320
and they also say that they offer a free sample meal.
266
00:13:06,320 --> 00:13:10,190
So here, they want a simple form for users to sign up.
267
00:13:10,190 --> 00:13:12,350
So, we can say that this is kind of
268
00:13:12,350 --> 00:13:15,110
our "call to action" section, right?
269
00:13:15,110 --> 00:13:16,450
And again, this is something
270
00:13:16,450 --> 00:13:19,200
that I talked about at length already,
271
00:13:19,200 --> 00:13:23,830
I think, in the component section or in the layout section.
272
00:13:23,830 --> 00:13:25,430
Or, actually, lectures.
273
00:13:25,430 --> 00:13:28,800
So, you can just go back there for inspiration, as always,
274
00:13:28,800 --> 00:13:31,800
and also, to see what it's all about.
275
00:13:31,800 --> 00:13:34,700
So again, we have the diets, the sample meals,
276
00:13:34,700 --> 00:13:36,803
and this is our call to action, then.
277
00:13:39,610 --> 00:13:40,867
So, "Diets",
278
00:13:43,550 --> 00:13:46,073
meals, let's just call it "Meals" actually.
279
00:13:47,070 --> 00:13:50,620
Because I think they are just basically showing some data
280
00:13:50,620 --> 00:13:52,300
about two meals there.
281
00:13:52,300 --> 00:13:53,850
And then, our "call to action".
282
00:13:56,350 --> 00:13:57,263
Right?
283
00:14:00,130 --> 00:14:03,130
Yeah. So they have these two meals and the diets,
284
00:14:03,130 --> 00:14:04,871
the call to action. Then we have the pricing,
285
00:14:04,871 --> 00:14:08,653
a photo gallery and testimonials.
286
00:14:10,410 --> 00:14:11,840
Okay.
287
00:14:11,840 --> 00:14:13,923
So, pricing, gallery and testimonials.
288
00:14:21,850 --> 00:14:23,190
Alright.
289
00:14:23,190 --> 00:14:25,010
And, of course, you can do this planning
290
00:14:25,010 --> 00:14:28,550
in some other software, or even with pen and paper,
291
00:14:28,550 --> 00:14:30,490
which is how I like to do it.
292
00:14:30,490 --> 00:14:33,710
But then you couldn't really see what I'm writing.
293
00:14:33,710 --> 00:14:35,280
Right.
294
00:14:35,280 --> 00:14:37,050
Okay.
295
00:14:37,050 --> 00:14:41,470
Then here, they have that "featured publications" section.
296
00:14:41,470 --> 00:14:44,120
So this one, I like to call "featured in",
297
00:14:44,120 --> 00:14:48,500
and then, some "contact information" and "additional links".
298
00:14:48,500 --> 00:14:51,500
And so this is usually the kind of information
299
00:14:51,500 --> 00:14:54,070
that goes into the website footer.
300
00:14:54,070 --> 00:14:56,070
So again, that's something that I showed you
301
00:14:56,070 --> 00:14:57,730
in one of these lectures
302
00:14:57,730 --> 00:15:00,578
that were about components and layouts.
303
00:15:00,578 --> 00:15:03,663
So, "featured in" and then a footer.
304
00:15:05,190 --> 00:15:06,023
Okay.
305
00:15:07,437 --> 00:15:09,303
"Featured in"
306
00:15:13,520 --> 00:15:14,353
and a "Footer"
307
00:15:14,353 --> 00:15:16,910
at the very top.
308
00:15:16,910 --> 00:15:18,160
Okay.
309
00:15:18,160 --> 00:15:19,640
Now, usually before the "Hero",
310
00:15:19,640 --> 00:15:21,713
we also want some navigation.
311
00:15:23,500 --> 00:15:27,290
Now, even though this page is only a single-page website,
312
00:15:27,290 --> 00:15:29,590
so a landing page, remember,
313
00:15:29,590 --> 00:15:32,070
we still want some kind of navigation
314
00:15:32,070 --> 00:15:35,530
because it can be helpful to have some links at the top,
315
00:15:35,530 --> 00:15:39,570
which will lead the user to different sections of the page.
316
00:15:39,570 --> 00:15:42,860
And that is useful because each of these sections
317
00:15:42,860 --> 00:15:47,590
will kind of be a mini-page. So back in the day, actually,
318
00:15:47,590 --> 00:15:50,880
websites were made like that, where each page
319
00:15:50,880 --> 00:15:54,230
only had very little content, and then each of these here
320
00:15:54,230 --> 00:15:57,010
could actually be its own page.
321
00:15:57,010 --> 00:15:58,690
But now, in modern design,
322
00:15:58,690 --> 00:16:02,160
and especially for landing pages, it's quite common
323
00:16:02,160 --> 00:16:05,310
to simply have a very long page where the user
324
00:16:05,310 --> 00:16:07,220
simply keeps scrolling.
325
00:16:07,220 --> 00:16:09,733
But again, navigation can still be helpful there.
326
00:16:10,600 --> 00:16:11,640
Okay.
327
00:16:11,640 --> 00:16:14,690
So, the call to action here, remember,
328
00:16:14,690 --> 00:16:17,859
is usually the last section before the footer.
329
00:16:17,859 --> 00:16:22,627
So, let's move that down again, using "option" and "down".
330
00:16:22,627 --> 00:16:26,257
So we have the "Footer" and the "call to action".
331
00:16:27,200 --> 00:16:31,350
The "featured in" section, that small part with the logos,
332
00:16:31,350 --> 00:16:34,400
is usually always right after the "Hero".
333
00:16:34,400 --> 00:16:36,700
Or sometimes, these logos are even placed
334
00:16:36,700 --> 00:16:39,180
right into the "Hero" section.
335
00:16:39,180 --> 00:16:41,410
But to make it simpler, we will simply put it
336
00:16:41,410 --> 00:16:43,290
right after the "Hero".
337
00:16:43,290 --> 00:16:45,900
And again, you can see some examples of that
338
00:16:45,900 --> 00:16:48,130
in the inspiration that I provided you
339
00:16:48,130 --> 00:16:51,450
in the layouts lecture. Okay?
340
00:16:51,450 --> 00:16:54,150
So, that is in the previous section.
341
00:16:54,150 --> 00:16:57,800
Next up, here in these "Diets" and "Meals",
342
00:16:57,800 --> 00:16:59,233
let's go up there again.
343
00:17:00,530 --> 00:17:01,363
So,
344
00:17:02,560 --> 00:17:04,130
ah, yeah, right here.
345
00:17:04,130 --> 00:17:06,710
So, this one here is only like
346
00:17:06,710 --> 00:17:09,050
a list of these different diets.
347
00:17:09,050 --> 00:17:10,960
And so, I don't think that this deserves
348
00:17:10,960 --> 00:17:12,223
a section on its own.
349
00:17:13,100 --> 00:17:16,600
So instead, I would say that we can include this here
350
00:17:16,600 --> 00:17:19,140
into the section of the sample meals
351
00:17:19,140 --> 00:17:21,870
because here we have just two meals.
352
00:17:21,870 --> 00:17:25,110
And so, I can imagine that we could put these two meals
353
00:17:25,110 --> 00:17:28,234
side by side and then, on the side of that,
354
00:17:28,234 --> 00:17:32,740
so beside these two, we could then simply display this list.
355
00:17:32,740 --> 00:17:35,377
So that, to me, looks quite logical.
356
00:17:35,377 --> 00:17:38,913
And so, let's join these two together.
357
00:17:41,040 --> 00:17:42,073
So, "Meals"
358
00:17:43,040 --> 00:17:45,707
and "list of diets".
359
00:17:47,100 --> 00:17:48,650
Okay.
360
00:17:48,650 --> 00:17:50,640
Now, another pattern that you will see
361
00:17:50,640 --> 00:17:53,670
in modern landing pages is that the pricing
362
00:17:53,670 --> 00:17:57,060
is also quite low on the page.
363
00:17:57,060 --> 00:18:01,480
So, many times, it comes right before the "call to action".
364
00:18:01,480 --> 00:18:04,060
So, let's move that down there.
365
00:18:04,060 --> 00:18:05,200
Alright.
366
00:18:05,200 --> 00:18:08,645
And so, now slowly, the order of the sections here
367
00:18:08,645 --> 00:18:11,810
is starting to make a little bit more sense.
368
00:18:11,810 --> 00:18:14,090
And also, it starts to be more in line
369
00:18:14,090 --> 00:18:17,300
with what we see in modern landing pages.
370
00:18:17,300 --> 00:18:20,550
And teaching you that is actually yet another goal
371
00:18:20,550 --> 00:18:22,490
of this course.
372
00:18:22,490 --> 00:18:24,560
So, this is really nice here.
373
00:18:24,560 --> 00:18:27,400
I think together, thinking about
374
00:18:27,400 --> 00:18:29,140
the order of the sections here
375
00:18:29,140 --> 00:18:31,020
and how we can arrange our content
376
00:18:31,020 --> 00:18:33,580
in a logical and modern way.
377
00:18:33,580 --> 00:18:38,580
But anyway, here we have the "Testimonials" section, right?
378
00:18:40,210 --> 00:18:42,713
And so again, there's not a lot of content here,
379
00:18:43,680 --> 00:18:46,300
so it's basically these four testimonials here
380
00:18:46,300 --> 00:18:47,693
with some photos.
381
00:18:48,650 --> 00:18:50,330
So,
382
00:18:50,330 --> 00:18:53,130
well, here we have a lot of these customer photos
383
00:18:53,130 --> 00:18:56,433
and then, for the gallery, we have these 12.
384
00:18:57,270 --> 00:19:00,080
So, it's this one and then, 11 others
385
00:19:00,080 --> 00:19:02,140
and they're all square.
386
00:19:02,140 --> 00:19:04,210
So, we will want some kind of gallery.
387
00:19:04,210 --> 00:19:07,770
And again, we actually got some inspiration on that
388
00:19:07,770 --> 00:19:09,890
in one of the previous sections.
389
00:19:09,890 --> 00:19:12,310
So actually, I think, in the previous section,
390
00:19:12,310 --> 00:19:14,790
in the lecture about components.
391
00:19:14,790 --> 00:19:17,310
Now, the goal of this photo gallery here
392
00:19:17,310 --> 00:19:21,110
will to show the user just how yummy the food looks.
393
00:19:21,110 --> 00:19:24,460
And so, it will really try to make the user
394
00:19:24,460 --> 00:19:26,530
sign up for the subscription.
395
00:19:26,530 --> 00:19:30,340
And the same thing can be said about these testimonials.
396
00:19:30,340 --> 00:19:33,650
So, these testimonials are all about social proof.
397
00:19:33,650 --> 00:19:35,960
And so, they are to show the user
398
00:19:35,960 --> 00:19:38,710
that other users already bought a subscription
399
00:19:38,710 --> 00:19:40,520
and that it's worth it.
400
00:19:40,520 --> 00:19:44,400
And so again, this one here is a little bit about selling.
401
00:19:44,400 --> 00:19:48,510
And so, our thinking that we could put the testimonials
402
00:19:48,510 --> 00:19:51,940
and the gallery kind of side by side.
403
00:19:51,940 --> 00:19:53,790
So then, we have on one side,
404
00:19:53,790 --> 00:19:55,700
all of these nice testimonials
405
00:19:55,700 --> 00:19:58,860
that will really try to push the user over the edge
406
00:19:58,860 --> 00:20:00,260
of signing up.
407
00:20:00,260 --> 00:20:04,420
And then, the gallery here can then really reinforce that
408
00:20:04,420 --> 00:20:06,660
and drive that point home.
409
00:20:06,660 --> 00:20:09,390
So, let's put them side by side,
410
00:20:09,390 --> 00:20:11,763
because I think that can be quite powerful.
411
00:20:13,400 --> 00:20:16,334
So, one section will be "Gallery plus..."
412
00:20:16,334 --> 00:20:20,907
Or actually, "Testimonials plus gallery".
413
00:20:22,410 --> 00:20:23,610
Okay.
414
00:20:23,610 --> 00:20:25,670
And we're almost done here.
415
00:20:25,670 --> 00:20:29,010
There's just one more thing that I want to show you.
416
00:20:29,010 --> 00:20:32,140
So here in this, "How Omnifood works",
417
00:20:32,140 --> 00:20:35,690
we have these app images.
418
00:20:35,690 --> 00:20:40,270
So we have these, these three different app screens.
419
00:20:40,270 --> 00:20:41,900
So, which look like this,
420
00:20:41,900 --> 00:20:46,220
which is from the application of Omnifood that they gave us.
421
00:20:46,220 --> 00:20:48,620
And so, this will be very helpful to show us
422
00:20:48,620 --> 00:20:51,120
how Omnifood actually works.
423
00:20:51,120 --> 00:20:52,730
So that's exactly here,
424
00:20:52,730 --> 00:20:55,700
these three steps that we have here.
425
00:20:55,700 --> 00:20:58,550
And by reading through these three steps here,
426
00:20:58,550 --> 00:21:01,460
I think that this section actually gives
427
00:21:01,460 --> 00:21:04,580
a really good impression of what Omnifood is
428
00:21:04,580 --> 00:21:05,930
and how it works.
429
00:21:05,930 --> 00:21:08,670
So, it can show the user not just how it works,
430
00:21:08,670 --> 00:21:11,577
but also really what Omnifood is all about.
431
00:21:11,577 --> 00:21:14,340
And so, I think that this is actually a better way
432
00:21:14,340 --> 00:21:16,100
of opening the website
433
00:21:16,100 --> 00:21:18,400
than simply listing these features here,
434
00:21:18,400 --> 00:21:21,260
which is something that many websites do.
435
00:21:21,260 --> 00:21:23,110
But now, more and more,
436
00:21:23,110 --> 00:21:27,270
we see that this is no longer the case in many designs.
437
00:21:27,270 --> 00:21:28,760
So, a couple of years ago,
438
00:21:28,760 --> 00:21:31,200
many landing pages would start, like,
439
00:21:31,200 --> 00:21:35,040
with these four columns and then have one feature blog
440
00:21:35,040 --> 00:21:36,840
for each of these features,
441
00:21:36,840 --> 00:21:38,630
but that looks a little bit boring.
442
00:21:38,630 --> 00:21:42,820
And also, it's easier to scan simply these three steps here,
443
00:21:42,820 --> 00:21:45,890
than to read through all these features, right?
444
00:21:45,890 --> 00:21:48,460
And also, if we take a look at the content here,
445
00:21:48,460 --> 00:21:51,050
then actually this doesn't really explain.
446
00:21:51,050 --> 00:21:54,780
And it doesn't really describe what Omnifood is all about.
447
00:21:54,780 --> 00:21:57,090
And so, I think that this is a little bit
448
00:21:57,090 --> 00:21:59,400
more secondary information.
449
00:21:59,400 --> 00:22:03,130
Like "never cook again". Okay, this is quite important,
450
00:22:03,130 --> 00:22:05,440
but then, things like "local" and "organic"
451
00:22:05,440 --> 00:22:07,600
and that they produce "no waste"
452
00:22:07,600 --> 00:22:09,630
and that you can "pause anytime".
453
00:22:09,630 --> 00:22:12,410
This is more, I think, secondary information.
454
00:22:12,410 --> 00:22:16,730
It's not that important to be, like, on the top of the page.
455
00:22:16,730 --> 00:22:20,240
And so, I would open the page with this section here
456
00:22:20,240 --> 00:22:23,840
of how Omnifood works and then, move that down.
457
00:22:23,840 --> 00:22:25,030
All right?
458
00:22:25,030 --> 00:22:28,820
But, of course, that is only my own personal choice
459
00:22:28,820 --> 00:22:32,920
and it would be totally fine to do it in any different way.
460
00:22:32,920 --> 00:22:35,600
So obviously, all this is a little bit based
461
00:22:35,600 --> 00:22:39,163
on my own personal bias and my personal tastes,
462
00:22:39,163 --> 00:22:43,003
but I still think that these are sensible choices.
463
00:22:43,003 --> 00:22:45,100
And so, what I'm gonna do here
464
00:22:45,100 --> 00:22:48,547
is to move the "Features" actually below the "Pricing".
465
00:22:49,870 --> 00:22:53,869
So, we then have a kind of a section which can,
466
00:22:53,869 --> 00:22:57,090
while we can even add the "Pricing" with the "Features"
467
00:22:57,090 --> 00:22:58,763
like together in one section.
468
00:23:00,130 --> 00:23:03,130
So, we can have these two pricing tables
469
00:23:03,130 --> 00:23:05,230
and then, below that, we can simply have
470
00:23:05,230 --> 00:23:08,120
these four features, which will then inform the user
471
00:23:08,120 --> 00:23:11,000
even better, what they are signing up for.
472
00:23:11,000 --> 00:23:13,929
In case that they're interested, at least.
473
00:23:13,929 --> 00:23:16,140
Okay.
474
00:23:16,140 --> 00:23:20,223
And so, with this, we end up with this list of sections.
475
00:23:21,130 --> 00:23:23,170
The "Navigation" is not really a section,
476
00:23:23,170 --> 00:23:25,460
but it will be the first thing on the page,
477
00:23:25,460 --> 00:23:27,063
together with the logo.
478
00:23:28,526 --> 00:23:29,720
So, that is quite common.
479
00:23:29,720 --> 00:23:31,053
Then, the "Hero" section,
480
00:23:32,006 --> 00:23:34,290
then, that small section just with the logos,
481
00:23:34,290 --> 00:23:36,870
then, that nice "How it works" section,
482
00:23:36,870 --> 00:23:39,250
which contains a lot of useful information
483
00:23:39,250 --> 00:23:43,690
about how Omnifood works and even, what it's all about.
484
00:23:43,690 --> 00:23:45,550
Then, we can already show the user
485
00:23:45,550 --> 00:23:49,177
some of the possible meals in case they sign up.
486
00:23:49,177 --> 00:23:53,860
And then, from here on, we are trying to sell the product.
487
00:23:53,860 --> 00:23:57,880
So here, we are really starting to hit the sell mode.
488
00:23:57,880 --> 00:24:01,030
So, we start having some testimonials and gallery
489
00:24:01,030 --> 00:24:02,960
to really convince the user.
490
00:24:02,960 --> 00:24:05,050
Then, we show them how much it costs
491
00:24:05,050 --> 00:24:07,960
and the features of the product.
492
00:24:07,960 --> 00:24:10,170
And finally then, here, in the call to action,
493
00:24:10,170 --> 00:24:11,920
we want to sign them up.
494
00:24:11,920 --> 00:24:12,920
Okay?
495
00:24:12,920 --> 00:24:15,800
So, I hope that reasoning made sense to you
496
00:24:15,800 --> 00:24:17,470
and will help you also
497
00:24:17,470 --> 00:24:20,175
maybe reason about the order of your own sections
498
00:24:20,175 --> 00:24:24,590
once you start building your own websites at some point.
499
00:24:24,590 --> 00:24:25,423
Nice.
500
00:24:25,423 --> 00:24:28,570
So with this in place, we can actually start sketching
501
00:24:28,570 --> 00:24:31,670
some of these sectors in the next lecture.
502
00:24:31,670 --> 00:24:33,870
So, hopefully, I'm gonna see you there soon.
37152
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.