Instructor: Now based on the page sections
that we defined in the last lecture,
so in step number two,
let's now very quickly think about some components
that we might need in our page
and some first layout ideas as well.
And remember that this is an iterative process,
so you'll never arrive at a perfect solution immediately,
but usually only after experimenting a little bit around.
Also, we don't have to think
about the entire page just yet, alright?
And so that's what we will do here in this lecture as well.
But anyway, here we have an outline of the sections
that we arrived at in the last lecture.
Remember that?
And so now let's, for a few of them here,
think about some of the components that we might need.
And so the logo and navigation
we will not worry about at this point,
but let's think about the hero section.
So I was thinking of using a hero like this.
And so this is basically one of the examples
that we got in, I think, the layouts gallery lecture,
so in the previous section.
And so this is because we have a hero image
that looks a little bit like this.
So a hero image that we got from the Omni Food content,
and which would look nice here
on the right side of the hero section.
So just like here.
Then also in the content we have some headline,
and we have also a summary.
And so basically we have our content
follow a little bit the example that we have here.
So remember the very important principle
that I mentioned a couple of times already,
which is that the design
and the layout must follow the content,
and not the other way around, okay?
And so we have a hero image that we got from Omni Food,
which looks a bit like this.
And so we can then use this very common form
of a hero section, right?
Next, we're also gonna have a featured in section,
and that will simply look like this,
probably without the text, which we do not have,
but it's simply going to be some logos,
one beside the other.
Then next up we have the how it works section,
and here I was thinking of using something like this.
But we do actually have a lot more content than this,
especially the text is a bit longer than this one here.
And so we will probably put them one after the other,
so using some kind of Z pattern for example.
But I will show you the layout
that I ended up with in a minute as well.
But first, let's go here through the components.
So next up we have the meal section.
And if we take a look at the content,
there we had two different meals
and then also a list of diets.
And so for each of these two meals,
we're going to use a cart that looks a little bit like this.
So basically with an image on top,
and then with some data about the recipe or about the meal,
and using some icons there as well
just like in this component right here.
Finally, let's also think
about the testimonials and gallery section.
And so here I had the idea
of putting the testimonials on one side
and the gallery on the other side.
And so the testimonials might look something like this.
So basically this two by two grid,
because we do also have four testimonials.
And then on the right side we could use a gallery like this.
So a very simple gallery, just three by four images.
And that is because we also have exactly 12 images
in that folder that we got from Omni Food.
So I think this could be a nice section
with these two components, basically, side by side.
All right, and putting it all together,
I arrived at a layout that might look something like this.
So as I said before,
I like to do these sketches always by hand.
And so this is exactly the type of sketch
that I always make before coding any new website.
And as I said also before, it is not the entire page here,
but maybe something like the first half.
So it's just so we get a general feeling
of the other layouts and of some of the components
that we want to use for the content.
Also, I would usually create a couple
of different sketches just to experiment
around a little bit
like I said in the beginning of this lecture.
But here, of course, in this course and in this lecture,
I need to keep it short,
and so I'm just showing you what I arrived at.
And if you still had any doubt
if I was something like an artist,
then this sketch should be proof
that I'm definitely not an artist, right?
But, of course, here the quality
of the drawing does not matter at all.
We just want to get our ideas out of our head.
And so for that, a sketch like this is perfect.
But anyway, of course,
here this first section is the hero section.
Then here is this featured in section
with these five logos side by side.
Then next we have the how it works section.
And as I mentioned previously,
we do actually have a lot more text content
in our content file then we have here
in this example component.
And so we will put these steps here
basically one after another using this Z pattern.
So can you recognize the Z pattern here?
So that's something again
that we studied before in the last section, I believe.
But anyway, next up as I said,
we will then have these cards here
for the two meals that will be in the meal section.
And then of course we will have the testimonials here
on the left side in the next section
and also the gallery on the right side.
And I think that this will create
a really, really nice layout for this section.
Okay, and yeah, for now, that's actually it.
So this is our initial plan basically
of how we will create the layout of this page.
And I will discuss each of the sections,
of course, in a little bit more detail as we reach them
as we go through the project here.
Okay, and once again, I really hope that it was helpful
for you to kind of get a look at what my process is
and how I do these sketches,
and really how I come up with layouts on my own,
because this is really
all that matters for me in this project.
So I don't just want you to learn
how to build this specific project, of course.
I want you to learn how to actually come up
with your own layouts based
on your own content in the future.
And so that's why I'm putting
so much emphasis here on this planning step.
I think it is really crucial,
and I believe that you will experiment the same
once you really have
to start building some layout on your own,
which hopefully will be sooner than later.
But anyway, let's now finally start writing
our first line of code in the next lecture.