All language subtitles for 103 Sketching Initial Layout Ideas (Step 3).en_US

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 will 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.

All right.

And so that's what people 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 the,

I think the layout's 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 Omnifood 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 Omnifood,

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

insection 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

what 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 meals 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 Omnifood.

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 overall layout

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 proved

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, the sketch like this is perfect,

but anyway, of course here,

this first section is the Hero section.

Then here is that featured insection

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 or content file.

Than 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.