Jonas: So here is part two
of the final web design lecture,
which, remember, is about components and layouts.
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 gonna 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 submenu reveals itself.
And here, the submenu, 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 submenus on the page.
And even simpler than this would
to not have any submenu 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 submenu at all.
But if we do need a submenu,
which is usually when there are multiple subpages
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 kind of more complex submenu.
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 subpages,
or if you want to also include some more information,
maybe, inside of the submenu.
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 beforehand.
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 maybe the subproduct that the website has.
Then 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.
All right.
Then here are some more creative uses of navigations
where we have some overlays.
So these two on the right side, especially.
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 a 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 Bluewave example here,
we are currently in the Community Solar menu item,
which has two subpages.
And so those are Project Services and Sales Partners.
And so they are nicely displayed here
in this secondary navigation for the user to be able
to basically navigate this secondary menu item.
So this 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
and 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 the third one is to first have some text,
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 it's replaced by 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 text 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 of the styles that I mentioned before.
So that's, of course, also possible.
Next up, let's talk about the pages' 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 these 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 the footer.
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 simple 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
that 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 that 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, this 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 describes some feature
of the product or service.
And usually multiple of these rows are
then combined using some kind of pattern,
as we will see in a minute.
But anyway, a feature row like this is usually quite simple.
So normally there is some kind of image on one side,
and then there is some text 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 text,
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 I actually explained
this somewhere else already a little bit.
All right, so these are the five big section components
that I identified
and that 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 rows 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.
All right.
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 the three ones that we have here.
Also, this layout can be used on simple blog 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 blogs, 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 these.
And finally, we also have these more experimental
or asymmetric layouts.
So here, we can use all our creativity
in order to create some standout 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,
they 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 kinds
of layouts 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 basically 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.