All language subtitles for 095 Web Design Rules 10 - Part 2_ Layout Patterns.en_US

So here is part two of the final web design lecture,

which remember is about components and layout.

And in part one,

we talked about single elements and also components,

right?

And so now here in part two,

we are going to talk about bigger components,

which I like to call section components

and also some layout patterns, but without further ado,

let's get started with the section components

and we're going to start with navigation components.

So in all these four examples,

you have some navigation bar at the top of the page,

and then when the user clicks or hovers

over some of the menu items,

then this sub-menu reveals itself.

And here are the sub-menu or secondary menu

is just a small box, basically that hovers

over the rest of the page.

So this is essentially the simplest way

of having sub-menus on the page

and even simpler than this,

would to not have any sub-menu at all,

which sometimes is also the right choice.

So sometimes we just have a navigation bar

with some links at the top of the page

and without any sub-menu at all.

But if we do need a sub-menu,

which is usually when there are multiple sub-pages,

like you see here in these examples,

then we need a menu like this or an even bigger one.

And so here are some examples of a

uh kind of more complex sub-menu.

So here we have a bigger box that gets popped out once

the user hovers or clicks over one of the navigation items.

So this is helpful when you have multiple sub-pages

or if you want to also include

some more information maybe inside of the sub-menu.

So this is essentially taking it one step further

from what we had before.

And then, this one here is even the next step,

which is basically having one panel that reveals itself

and which occupies the entire width of the page.

So these are useful when we have even more links to display

or when we want to describe different pages

of our website before hand.

So here in this bottom example,

these different parts of the website are nicely

being described by a short sentence.

So this is actually a very nice feature that is becoming

quite modern so that you will see on many websites

that you visit these days.

And so here are some more examples of that.

And again,

you see how all of them give a short description

about these different pages that the user is about to visit.

So it's kind of a small summary of the,

maybe the sub product that the uh website has

Down here, We have some more examples

here the one in the bottom of IBM

has kind of a sidebar also in the navigation.

The one in the top has some very nice images.

And again, these are actually part of the navigation,

just like also on the Apple side, which uses these icons.

So actually kind of these product images

close to the links themselves.

Alright,

then here are some more creative uses of navigations

where we have some overlays.

So these two on the right side, specially.

So this is a navigation pattern

that's used on mobile screens

where the entire navigation overlays

the rest of the page,

but it might also be used on the desktop version

of these pages because this simply provides

a nice effect in some cases.

Then in the bottom,

I also have some simpler navigations

and these are usually used in some kind of web application.

Then here. Finally,

we have some examples of secondary navigations

and the secondary navigation is basically

just a second navigation bar

that shows the user all the other pages that are inside

of the current main navigation item.

Like in this blue wave example here,

we are currently in the community solar menu item,

which has two sub-pages.

And so those are project services and sales partners.

And so they are nicely displayed here

in the secondary navigation for the user to be able

to basically navigate this secondary menu item.

So these can be helpful again,

if you have a big website with a lot of different pages.

Okay, but now let's actually move on to our hero sections.

And the hero section is basically

the very first section of the page,

which contains like a description

of the site in the main heading.

And many times it also has some buttons and some images.

And right now for the hero section,

there are three big trends.

The first one is to have text on one side

and the image on another side.

Then the second one is to have a background image

with some text on top.

And a third one is to first have some texts

and then below that some image.

And so let's start with the first example.

So having the text on one side

and then an image on another one.

So this is, I would say,

the most common hero section that we see these days.

So again, some buttons,

some headlines and many times there's also

some text description of the product or the service.

So here are some more examples of that. And again,

I'm including many, many different examples here because

I know that this is going to be really really helpful

when you need to choose some design for your own

hero section one day.

So here are even more and actually even more right here.

So this is the first type of hero section.

So again, image on one side text on the other side,

and now let's go to the second type.

So having a background image and then some text on top.

Now this type of hero section used to be extremely popular

like five years ago,

but now it's getting a little bit out of favor

and is replaced by uh the category that we just saw.

So here, I just have four examples.

And now here is the other one.

So where first we have some texts

and maybe a button and they're all nicely centered.

And then below that, usually we have some kind of image.

So that's exactly what you see here in all these four.

And here are four more examples of that.

And again, hopefully you like one of them

for your next design.

Then here we have some hybrids.

So mixing multiple offers styles that I mentioned before.

So that's of course also possible

Next up, let's talk about the page's footers.

And again, we can do them in many different ways,

but right now it's kind of a trend

and actually it's become a standard even I would say,

to include a complete site map of your website

right here in the footer.

So that's exactly what we have

in all this examples right here.

Now, if your website is very big

with a lot of different pages,

then maybe it doesn't make sense to have

like an entire site map,

but at least usually some secondary or even tertiary links

are usually found in a photo.

So some information about the company

or some privacy policies,

or simply some other information of the company or website,

it's also very common to have the

social icons in the footer.

So the links that will point to the different

social media profiles of the company.

And sometimes there's also some kind of submit form,

like to sign up for some newsletter or something like that.

Then here are some more examples,

some a little bit more complex or more creative.

Now in the bottom here,

we actually also have some way more simpler footers.

So not always, you need to go with a fully fledged footer,

like the ones we just saw.

For example, the Tesla website,

which is this very last one here,

simply has these seven or eight links and that's it.

So that's also an okay choice

if you want to go with a more minimalistic approach

Next up, let's talk about Call-to-Action sections.

And these are some kind of section we have

close to the end of our page,

where after presenting all the information

that we wanted to show on the page,

we then want the user to take some kind of action.

So maybe subscribing to a newsletter

or trying out a free trial,

or simply contacting the company.

And for these sections,

it's quite common to have them stand out from the rest

of the elements of the page,

by using some sort of visual hierarchy,

like using a different color or using some background image.

So when you build some kind of marketing page,

then usually you will want to have some kind of

call-to-action section by the end of the page.

So here are some more examples

that you can use if you'd like.

Then here are four more.

And this one here,

I included them because all of them use the process of

social proof once again, by the end of the page.

So the two examples at the top use some customer logos

to show again that their product is actually used.

And so debt adds a lot of social proof.

And then the two examples at the bottom,

they simply reinforce some of the most important

product features like saying that

it is just a one-time purchase or

reassuring the user,

that there is a 30 day money back guarantee.

So again,

these can be very important to push the user over the edge

in order to basically have them spend their money.

Then these four examples here,

they simply ask the user to contact them,

which is something that is very useful

if the site is not for some kind of service

that the user can sign up for.

So these four call-to-action sections,

they simply ask the user to contact them.

And that can also be a very valid way of

having the user take some action by the end of the page.

So you can provide some email address

or some telephone number,

or simply a link to a contact form,

but whatever your website and your industry is about,

always make sure to have some

call-to-action section like this one

Now finally, our last section components

are the feature rows.

So feature rows are small sections of the page,

which usually describe some feature

of the product or service.

And usually multiple of these roles are then combined using

some kind of pattern as we will see in a minute.

But anyway,

a feature role like this is usually quite simple.

So normally there is some kind of image on one side,

and then there is some texts on the other side

And this text is usually some small heading

and then some description

and also sometimes maybe a button that leads to a page

that explains that feature a little bit better

And so that's what we can actually see on all

of these four feature rows, right?

So always an image then some texts

and three of them actually do have a button

Then here let's take a look at some more,

and I'm sure you have seen these type of feature rows

all the time when you browse well, most type of websites.

So take some inspiration from these and here are some more,

and in three of these examples,

we actually have a testimonial right here

in the feature row.

So one testimonial that is related to the feature

that is being displayed in this row.

And this can be a very powerful way

of selling the product or service.

And so more and more websites are starting to do this.

So definitely something that you can try out

once you build your own websites.

Then here are some more for your inspiration

and what these have in common,

or at least three of them

is that they use a small uppercase title

just before the main heading.

And so this is another trend that we are starting to see

more and more.

And I think actually explained this

somewhere else already a little bit.

Alright.

So these are the five big section components

that I identified and then I'm sure

you will start seeing now everywhere.

Once you start browsing the web with this knowledge.

And so now let's actually move on to patterns.

But what actually is a layout pattern?

Well, a layout pattern is simply a specific way

of repeating a certain component multiple times.

And the most simple layout pattern is probably the simple

row of boxes or row of cards.

So previously in our component gallery,

we actually saw some of them before, but individually,

but here we have them repeated in a row.

And so this is a very, very common pattern.

So having a couple of boxes or a couple of cards like this

all in a row.

And so we have seen many examples of this before.

And so here, we don't need a ton of examples.

And so let's go on straight to our second layout pattern,

which is actually pretty similar.

So here instead of a row of boxes and cards,

we have a two dimensional grid.

And so again, this is extremely common,

especially in something like online shops,

but also in displaying features on a website,

we will see this pattern all the time.

And here are some more examples.

Now, as an aside,

we can actually also nest patterns inside of components.

Now, inside of each of these components,

we actually have one of the two patterns

that we just studied.

So three of these examples have a grid of cards pattern,

and the other one is a row of cards pattern.

So what this means is that we can mix and match

all of these patterns and components as we would like.

So patterns can contain components,

which can in turn also contain

some more patterns inside of them.

So just keep that in mind,

when you design on your own

Next up, we have the Z pattern.

And so this one here is a combination

of different feature rows.

So basically the Z pattern is a way of repeating

similar feature rows, but with alternating configurations.

So here in this first example,

we first have the image on the left side.

Then in the next feature row, we have it on the right side.

And then in the next feature row,

we have it again on the left side.

And so this will then create this kind of Z pattern

for our eyes.

So we start on the left side,

then the eye goes to that content then to the next content,

then to the image and so on and so forth.

Now the reason why this pattern

is so extremely popular is that our eyes

have a tendency for scanning opposing roles

like we have here.

And so now that you know about this pattern,

you will see it absolutely everywhere

once you browse the web.

And here are some examples and most of the time

three rows are used.

So just like in the previous examples and like here

in this first example,

but of course it can also be more than three rows

or just two rows.

So that's completely normal and possible as well.

Now next up we have the F pattern,

which can also be about repeating feature rows,

but the repetition can also be about something like

more horizontal cards.

Like we actually have here in the first example.

Now the main difference between the F and the Z pattern is

that the configuration of the rows does not alternate.

So in the first and second example,

we always have the image on the left side

and the content on the right while on the right side,

we basically have the inverted F pattern.

So we have the images on the right

and then the content on the left.

So basically we draw the main axis here where the images are

because they draw the most attention.

And then from there we go to the content.

So that's why I mentioned that the last one

is the inverted F pattern.

And here there are three more examples

where actually all of them are

the inverted F pattern,

but usually we can simply call them F pattern anyway.

But what matters here is that basically

the images are all on one side

and then the text content is on the other ones.

So no alternating configurations in this one.

Alright, now, next up we have the single column pattern.

Now this one is mostly used on responsive websites

on mobile phones, or also on just very simple websites

like these three ones that we have here.

Also this layout can be used

on simple block posts where we don't want

any sidebars for distraction.

And speaking of sidebars,

that actually brings me to our next pattern,

which is exactly the sidebar pattern.

So the sidebar can be used for blocks, as I just mentioned,

or they can be used for options in a web application

or as a table of contents, or also as a summary.

So here we have examples of all of those.

And here then in the next slide,

we have some examples of web applications

where we then have a sidebar

where all the different options are located.

Now we're almost finishing here.

Next up we have the multi-column or magazine layout.

So this one is basically about combining different columns

with different width,

into some kind of layout that I'm sure

we're all familiar with.

So basically to create some kind of

more traditional magazine layout like this

And finally, we also have this

more experimental or asymmetric layout.

So here we can use all our creativity

in order to create some stand-out designs.

So all of these are quite uncommon,

but they will allow us to give our design some kind of

different impact to our users.

And by the way,

many of these experimental layouts

were actually made possible by CSS grid.

So for example, here, the first and second examples,

there are clearly like very griddy, right?

And some years ago, this was almost impossible to build.

And so we didn't see layouts like these

a couple of years ago, but now more and more,

we start seeing designs like these popping up

and that's also because many designers

are getting a little bit tired of designing

always the same kind of layout that we see all over again.

And so that's why there has been a small trend,

at least towards these more experimental layouts.

So here are some more,

and I think all of them are quite nice

and actually not your entire page

needs to have this more experimental layout.

So these first three examples that we have here are actually

just a small section of each of their websites.

And so you can, of course also do that.

So just including something like a small grid like this,

because that alone might give your design a special impact.

Okay. And that's all I had to show you for layout patterns.

So I hope that you find this as interesting as I did.

So I really took a lot of time compiling these

and researching all of these different layouts

and components as well

because this stuff really fascinates and interests me.

So hopefully I was able to spark some of that interest

in you as well,

because that was actually

one of my main goal with all these design lectures.

And with this, we do actually finish

our web design lectures.

So again, I hope you had a lot of fun with those,

but this section is actually not finished yet.

So we will now build two components: one hero section,

and one web application layout.

So I hope to see you there soon so that we can

get back to code here.