Original subtitles

It's now time to start planning

our big course project,

based on the steps that we just learned about.

And so, let me start by introducing you to "Omnifood".

So, Omnifood is a fictional startup that I invented

just for this course.

And what they do, is to use AI to create and deliver

custom healthy meal plans. But right now,

before they can actually launch their product,

they need a new, beautiful, modern and clean website.

So, a website that will make them look

like a professional and trustworthy company.

And so, that is where we come in,

because we will do exactly that.

So together, we will pretend

that we were hired by Omnifood to design and build

their marketing website using HTML and CSS.

So, this is going to be a real-world project,

where we're gonna use all the skills that we already learned

and even a lot more.

So, this project will be like

your very first job, building websites.

And this is really, really cool, I think.

It will be so much fun to pretend

that we're actually working for a real company, right?

So, I hope you're as excited as I am about this project.

I think this is a really cool idea and challenge,

and of course, learning opportunity as well.

Now, Omnifood provides us

with all the content for the website, of course.

And so, in order to prepare for our job now,

let's take a quick look at that content.

And as always, that content

is in the starter files for this section.

So, let's come here again to our starter folder.

And then, here inside of this, it is this one.

So, Omnifood-Desktop seven.

And then here, all we have is this content.

So again, what I will do

is copy this folder here

and paste it right here.

So, "07-Omnifood-Desktop".

Now, in your case, it is probably enough

to simply call this "Omnifood",

and then, you will simply work in this folder

until the very end of the course.

Here, in my case, I have divided it

into multiple folders

because we will have multiple sections in this project.

But again, you should just do it like this.

Then, let's create a new window here

and then, I'm going to open that folder right here.

And so, that will then be our project folder

for this project.

Okay.

This is something new here in VS code.

So, just click on "yes" there

and okay.

So, all we have here is this folder with the content

and then, in there, we have this image folder,

which has all the images

and even some more folders with images.

And then, even more importantly,

we have this content.md and "md" stands for markdown,

which is a special text format

that we use many times in development.

So, just quickly about that.

Basically, in markup, having one hash like this

is for the main heading,

then two hashes is for the secondary heading

and so on and so forth.

So, here we have a third one.

So, this is a tertiary heading.

So, it's a little bit like H1, H2,

all the way to H6, in HTML.

But anyway, here we have some short description

about Omnifood right here.

Then, we have some branding.

So, things like the headline and the brand color.

So, as you see, at least the design decision

about the color has already been taken away from us,

which is very nice.

So, this is helpful to already have the brand color.

And then here, they give us the actual content

for the website.

So, we have some summary and we have then here,

all this content that we will need.

Okay.

And so now, I just want to ask you to please

pause the video at this point

and read all this content here.

So that then, when we start building the project,

we are all on the same page.

And actually, the most important thing here is this one.

So, this description.

Because this one, we will actually need

for the rest of this lecture.

Okay.

So, please pause the video here and read this description.

And if you feel like it,

it would be even better

to read the entire content here.

All right.

So now, based on this content

and on the Omnifood description,

let's actually start planning our project.

So, what we're gonna do now is to take care of step one

and step two of the seven steps behind a great website

that we learned in the previous lecture.

So in other words, we're gonna define and plan the project

a little bit here now.

And beginning with defining the project,

remember that here,

we need to define who the website is for, what it is for,

and also, basically establish our target audience.

So, the first one is very easy.

In this case, this project is for a client.

So, the Omnifood company in this case.

Next, defining what the website is for

is, basically, defining the user goal and the business goal.

Remember?

And for doing that,

we can take another look at the content

that Omnifood has provided us

and that we just read previously.

So, based on this company description,

we can kind of infer that the business goal

is to sell a monthly food subscription

and that the goal of the users

is to basically eat well, effortlessly,

but without spending a lot of time and money.

Now, of course, you could have used

a completely different wording here,

but the intention is basically this.

So, the business wants to sell the food subscription

and the user wants to eat well and eat healthy, right?

So, that's basically what this website will be for,

matching the business goal with the user goal.

And so, of course, as we already learned,

we need to keep this in mind as we design our page.

And the huge factor in that is, of course, also the content,

but that is already written, right?

So, that makes it easier.

But if you have to write the content on your own,

then there, this aspect is actually even more important.

So, writing the content exactly so that, in the end,

we have the business goal meet the user goal.

Now finally, about the target audience.

We are not gonna be able to make it really specific,

like in that example that I showed you in the last video,

but we can take some clues here.

So, the language in this description

is kind of technical and geeky.

So, with things like AI algorithm and AI-centric approach,

and also, they themselves say that

they are a technology company first.

And so, I think it's safe to say that this product

is targeted mainly to people who are into technology.

So, a little bit into geeky stuff like this.

Also, we can read from the description

that this is kind of for busy people

and also for people who are interested

in their health, right?

Now, since they will have to pay for a monthly subscription,

which is probably not that cheap,

they also will have to have a well-paying job.

And so, in the end, we end up with this target audience

of busy people who like technology,

are interested in a healthy diet

and have a well-paying job.

And once again, this is even more important

for when you actually write the content on your own.

But still, it is good to know that the website

will be built for people like this.

Now, of course, this doesn't mean

that there won't be any users

who don't fit this description,

but in general, it is people like this

that we are going to build this website for.

All right.

So, that is basically defining the project in broad terms.

So, let's go now to step number two.

So, step number two, remember, entails planning

and gathering the website content

and this one has already been done.

So, that's very nice.

Then, the second one is to plan out the sitemap,

which, in this case, is not necessary

because we will simply build a one-page marketing website

for Omnifood.

So, there is no sitemap here needed

because we have just one page.

And oftentimes, a page like this

with only, basically, one page is called a landing page.

Next up, we need to think about the website personality.

And here, once again, we can take some clues

from the Omnifood description that we were provided.

So here, in the first paragraph, they immediately say

that they are a technology company first,

but that they also have a focus on wellbeing of their users.

Right?

Now, in the previous step, we already defined also

that we are looking, kind of,

for a tech-centered target audience.

And so therefore, it kind of makes sense, I think,

that we will use the start-up and upbeat personality.

Now, because of that importance that is being placed

on consumer wellbeing, we can also add some elements

of the calm and peaceful personality.

So, that's a little bit where this personality

usually focuses.

And so, I think it might be nice to add some design elements

of that personality as well.

But in general, I think we will mainly use the start-up

and upbeat personality because, well,

this is, in fact, a startup. Okay?

And so now, all we have to do is to plan the page sections.

And so, in order to do that,

let's actually go back to our content

because remember that we should always do this planning

based on the content.

So, not to do a pretty design without the content,

and then, simply filling it up with content.

But instead, we will have our content,

basically guide the design and the planning of the sections.

Okay. So, let's check out here the website content.

And, actually, this is already a little bit divided

into sections, however, we can still do better.

So, this content that they provided us with

is not yet finally divided into logical website sections.

But anyway, here we have some summary and also up here,

this headline. And so these should probably go

into some kind of a header, right?

So, into a "hero section", as we like to call it.

Then, we have here these features.

We have how Omnifood works,

then, we have some meals and this list,

but let's actually go here to the very bottom

where I will create a list of the sections.

Just some separation there.

And then here, I'm using an H2 basically,

so, "Sections".

So, these dashes here are basically like bullet points.

So, let's use those.

And remember, we are going to start with a "Hero" section.

So for now, let's simply, basically, gather all the sections

that you have here. And then, we will group them

into more logical sections for our page.

So here, they want a section

with logos of featured publications.

So here, they have some images about that.

For example, Forbes or TechCrunch.

And remember that this is something that I talked about

in the components lecture. Right?

But anyway, there's a lot of things here,

but let's start at the top.

So here, we have the features, then how it works.

Okay. So, let's add that.

Let's not use the word "section" here all the time.

So, "Features",

"How it works"...

Let's see what else they have.

Then, we have "diets" basically

and "sample meals",

and they also say that they offer a free sample meal.

So here, they want a simple form for users to sign up.

So, we can say that this is kind of

our "call to action" section, right?

And again, this is something

that I talked about at length already,

I think, in the component section or in the layout section.

Or, actually, lectures.

So, you can just go back there for inspiration, as always,

and also, to see what it's all about.

So again, we have the diets, the sample meals,

and this is our call to action, then.

So, "Diets",

meals, let's just call it "Meals" actually.

Because I think they are just basically showing some data

about two meals there.

And then, our "call to action".

Right?

Yeah. So they have these two meals and the diets,

the call to action. Then we have the pricing,

a photo gallery and testimonials.

Okay.

So, pricing, gallery and testimonials.

Alright.

And, of course, you can do this planning

in some other software, or even with pen and paper,

which is how I like to do it.

But then you couldn't really see what I'm writing.

Right.

Okay.

Then here, they have that "featured publications" section.

So this one, I like to call "featured in",

and then, some "contact information" and "additional links".

And so this is usually the kind of information

that goes into the website footer.

So again, that's something that I showed you

in one of these lectures

that were about components and layouts.

So, "featured in" and then a footer.

Okay.

"Featured in"

and a "Footer"

at the very top.

Okay.

Now, usually before the "Hero",

we also want some navigation.

Now, even though this page is only a single-page website,

so a landing page, remember,

we still want some kind of navigation

because it can be helpful to have some links at the top,

which will lead the user to different sections of the page.

And that is useful because each of these sections

will kind of be a mini-page. So back in the day, actually,

websites were made like that, where each page

only had very little content, and then each of these here

could actually be its own page.

But now, in modern design,

and especially for landing pages, it's quite common

to simply have a very long page where the user

simply keeps scrolling.

But again, navigation can still be helpful there.

Okay.

So, the call to action here, remember,

is usually the last section before the footer.

So, let's move that down again, using "option" and "down".

So we have the "Footer" and the "call to action".

The "featured in" section, that small part with the logos,

is usually always right after the "Hero".

Or sometimes, these logos are even placed

right into the "Hero" section.

But to make it simpler, we will simply put it

right after the "Hero".

And again, you can see some examples of that

in the inspiration that I provided you

in the layouts lecture. Okay?

So, that is in the previous section.

Next up, here in these "Diets" and "Meals",

let's go up there again.

So,

ah, yeah, right here.

So, this one here is only like

a list of these different diets.

And so, I don't think that this deserves

a section on its own.

So instead, I would say that we can include this here

into the section of the sample meals

because here we have just two meals.

And so, I can imagine that we could put these two meals

side by side and then, on the side of that,

so beside these two, we could then simply display this list.

So that, to me, looks quite logical.

And so, let's join these two together.

So, "Meals"

and "list of diets".

Okay.

Now, another pattern that you will see

in modern landing pages is that the pricing

is also quite low on the page.

So, many times, it comes right before the "call to action".

So, let's move that down there.

Alright.

And so, now slowly, the order of the sections here

is starting to make a little bit more sense.

And also, it starts to be more in line

with what we see in modern landing pages.

And teaching you that is actually yet another goal

of this course.

So, this is really nice here.

I think together, thinking about

the order of the sections here

and how we can arrange our content

in a logical and modern way.

But anyway, here we have the "Testimonials" section, right?

And so again, there's not a lot of content here,

so it's basically these four testimonials here

with some photos.

So,

well, here we have a lot of these customer photos

and then, for the gallery, we have these 12.

So, it's this one and then, 11 others

and they're all square.

So, we will want some kind of gallery.

And again, we actually got some inspiration on that

in one of the previous sections.

So actually, I think, in the previous section,

in the lecture about components.

Now, the goal of this photo gallery here

will to show the user just how yummy the food looks.

And so, it will really try to make the user

sign up for the subscription.

And the same thing can be said about these testimonials.

So, these testimonials are all about social proof.

And so, they are to show the user

that other users already bought a subscription

and that it's worth it.

And so again, this one here is a little bit about selling.

And so, our thinking that we could put the testimonials

and the gallery kind of side by side.

So then, we have on one side,

all of these nice testimonials

that will really try to push the user over the edge

of signing up.

And then, the gallery here can then really reinforce that

and drive that point home.

So, let's put them side by side,

because I think that can be quite powerful.

So, one section will be "Gallery plus..."

Or actually, "Testimonials plus gallery".

Okay.

And we're almost done here.

There's just one more thing that I want to show you.

So here in this, "How Omnifood works",

we have these app images.

So we have these, these three different app screens.

So, which look like this,

which is from the application of Omnifood that they gave us.

And so, this will be very helpful to show us

how Omnifood actually works.

So that's exactly here,

these three steps that we have here.

And by reading through these three steps here,

I think that this section actually gives

a really good impression of what Omnifood is

and how it works.

So, it can show the user not just how it works,

but also really what Omnifood is all about.

And so, I think that this is actually a better way

of opening the website

than simply listing these features here,

which is something that many websites do.

But now, more and more,

we see that this is no longer the case in many designs.

So, a couple of years ago,

many landing pages would start, like,

with these four columns and then have one feature blog

for each of these features,

but that looks a little bit boring.

And also, it's easier to scan simply these three steps here,

than to read through all these features, right?

And also, if we take a look at the content here,

then actually this doesn't really explain.

And it doesn't really describe what Omnifood is all about.

And so, I think that this is a little bit

more secondary information.

Like "never cook again". Okay, this is quite important,

but then, things like "local" and "organic"

and that they produce "no waste"

and that you can "pause anytime".

This is more, I think, secondary information.

It's not that important to be, like, on the top of the page.

And so, I would open the page with this section here

of how Omnifood works and then, move that down.

All right?

But, of course, that is only my own personal choice

and it would be totally fine to do it in any different way.

So obviously, all this is a little bit based

on my own personal bias and my personal tastes,

but I still think that these are sensible choices.

And so, what I'm gonna do here

is to move the "Features" actually below the "Pricing".

So, we then have a kind of a section which can,

while we can even add the "Pricing" with the "Features"

like together in one section.

So, we can have these two pricing tables

and then, below that, we can simply have

these four features, which will then inform the user

even better, what they are signing up for.

In case that they're interested, at least.

Okay.

And so, with this, we end up with this list of sections.

The "Navigation" is not really a section,

but it will be the first thing on the page,

together with the logo.

So, that is quite common.

Then, the "Hero" section,

then, that small section just with the logos,

then, that nice "How it works" section,

which contains a lot of useful information

about how Omnifood works and even, what it's all about.

Then, we can already show the user

some of the possible meals in case they sign up.

And then, from here on, we are trying to sell the product.

So here, we are really starting to hit the sell mode.

So, we start having some testimonials and gallery

to really convince the user.

Then, we show them how much it costs

and the features of the product.

And finally then, here, in the call to action,

we want to sign them up.

Okay?

So, I hope that reasoning made sense to you

and will help you also

maybe reason about the order of your own sections

once you start building your own websites at some point.

Nice.

So with this in place, we can actually start sketching

some of these sectors in the next lecture.

So, hopefully, I'm gonna see you there soon.