-: 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 gonna 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 your are 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, zero seven 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 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 dot 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 the 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 or 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 foot 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
at 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.
All 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 site map
which in this case is not necessary
because we will simply build a one page marketing website
for Omnifood.
So, there is no site map here needed
because we have just one page.
And oftentimes 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 startup
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 startup
and upbeat personality.
Because while 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 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.
Now, 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 they have here, and then we will group them
into more logical sections for our page.
So here, they want a section
with a logo of featured publications.
So here, they have some images about that.
For example here, Forbes or Tech Crunch.
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 all call to action then.
So, diets, meals.
Let's just call it meals actually
because I think they're just basically
showing some data about two meals there
and then or call to action, right?
Yeah. So, they have these two meals and the diets.
The call to action.
Then we have the pricing, photo gallery, and testimonials.
Okay. So, pricing gallery and testimonials.
All right. 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 publication 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 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, a navigation can still be helpful there.
Now, okay, so the call to action here
remember it's usually the last section before the footer.
So, let's move that down again, using option and down.
So, we have to footer
and the call to action.
The featured in section.
So, 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 this 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 besides 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, 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.
All right.
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 model 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 this 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 twelve.
So, it's this one and then eleven 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 foot looks.
And so, it will really try to make the user signed
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 the 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.
'Cause 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 three different app screens.
So, which look like this,
which is from the application
of Omnifood that they gave us.
And so, this 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 block 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 in the cell 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 sections in the next lecture.
So, hopefully I'm gonna see you there soon.