Original subtitles

Welcome back.

So in the previous section,

we talked about the design ingredients of typography,

colors, images, icons, shadows, border radius, white space,

and visual hierarchy.

So these are all very fundamental and crucial,

but one really important ingredient of creating designs

is still missing.

And it is so crucial that it actually deserves

its own section.

And the missing ingredient that I'm talking about

is actually designing components and layouts.

So for this ingredient,

we also need some general guidelines and above all,

a lot of inspiration.

And so that's what this rule number 10 is all about.

Now it is split up in two parts, actually, this lecture,

so part one is right now

and the one about layout patterns

is in the middle of the section.

All right, but now let's start talking

about how an actual webpage is designed from scratch.

So when you want to start a new website

and start with an empty page,

and all we have is the content,

you might feel very lost, but you don't have to feel lost.

It doesn't have to be hard

because this is where well-established patterns

come into play in order to help you.

So basically we build websites always in the same way,

we start with some common, small elements

like paragraphs or images or buttons

which will contain our actual content.

We then assemble these simple elements

into common components,

such as this feature row or a feature card

or a pricing table or a tab component.

Then we take all the components that we designed

and use them to build a layout using common layout patterns.

Finally, we take all the smaller layouts like this one,

or just one big layout and assemble a final page from them.

And so in the end,

this is how we come up with a final design.

So hopefully you see that there is in fact a system

behind all this.

So a webpage is not just a bunch

of random elements tying together.

Instead, elements are organized

into components which are then organized

into one or more layouts, which in the end,

make-up a final webpage.

So whenever you need to start a new design

from a blank page, this is how you proceed.

You use common elements and components

in order to present the information

that you want on the website.

And I will, of course,

show you the most common elements

and components in a minute

so to enable you to really create designs

on your own in the future.

But anyway, these components are then combined into layouts

by using some common layout patterns

just as we saw in the previous slide.

Now, some of these patterns

are actually about repeating a certain component

a couple of times,

as you will see in the lecture about layout patterns.

But anyway, finally, as I mentioned before,

you take all your layouts and components

and assemble them into the final page.

So as a summary,

you do not need to get scared by a blank page

and a brand new design.

You just need to go step by step,

follow common best practices that I will show you.

And of course,

all the other design guidelines

that you have been learning in the previous section.

All right, and so now

let me show you the most common elements,

components, section components and layout patterns

that exist in web design and web development.

So the most common elements I would say are text, buttons,

images, input elements and texts.

And so it is these elements

that we then combine into one of these components.

Now this list here is not exhaustive.

There are a lot of other components

that we can and that we do use,

but I would say that these are the most common components

that you will see in web designs.

So in this lecture,

I will show you some inspiration for elements

and for these components,

and actually not just some inspiration,

but a lot of inspiration.

So I'm sure you will love this lecture

because from the inspiration in this video,

you will be able to take your design skills

to the next level, I hope at least.

But anyway, in part two of this lecture,

we will then talk about these,

let's say components, that are actually a section.

So I called them section components

and they are things like the navigation,

the hero section, the footer,

a call-to-action section or a feature row.

And finally, we will also talk about layout patterns

in the part two of this lecture.

So basically combining multiple components into a layout.

All right, but let's get started

with some inspiration about text.

Now, text of course is very simple.

And so the inspiration that I have here

is basically for ways

to start a different website sections.

So nothing all too exciting yet at this point,

but still it's good to start at the basics.

And here is some more inspiration

of how to start a section with text,

because now there is this very popular way

of adding a small and short

and super descriptive title

before the actual main heading.

So just like we see in all of these examples here.

Next up, we have some buttons

and we talked a lot about buttons before,

but here you have one slide

where you have basically all the different ways

in which you can design buttons all in one place.

So on the very left,

you have a lot of different single buttons.

And then here in the middle,

we have basically a combination of two buttons

where one is the primary button for the primary action

and then at the side,

there is another button with a lot less emphasis on it.

So usually that one doesn't have any background color.

And so this is a very common pattern

that is used all the time.

Next up, there is images

and we already talked a lot about images.

So here are just some more ways of using them.

Then here are input elements

and many of them are actually used to create big forms.

But here we are just basically talking

about the single input elements like we have here.

For example, using just one field

to input an email address with a small button besides it,

or here in the bottom,

just a simple drop down menu

and some simple value pickers, basically.

Now, just like in the previous section,

I will, of course not go into every single example here,

because once again, and I promise,

this is the last time I'm saying this,

so again, I want you to actually download these slides

and study all these examples one by one on your own.

So that's actually especially important in this lecture

and part two of this lecture,

because there is so much inspiration

for so much different components.

And so it's really important

that you actually take a close look

at all of these examples.

And especially if you're actually right now

with the task of designing some page,

and probably I took something like a hundred hours

to compile all of these different examples

for all the components and layouts.

And therefore I think there is a lot of value here

that you can extract from these videos.

And so again, I think you can only get that value

if you actually analyze each of the slides

on your own with some time.

But anyway, next up there is tags,

which are just a very, very simple element

that we can use

to create a visual representation of categories.

So that's exactly what's happening here

in each of these examples.

And I'm pretty sure you have already seen texts used

all the time as you browse the internet.

All right And now we actually move

into the section of components.

So for each of these types of components,

I'm gonna present you with a couple of examples

and I'm gonna start with breadcrumbs.

So these are usually used to help the user navigate

a pretty complex site.

So usually we only use

and we only see breadcrumbs on websites

that actually have a deep level of page organization.

So if you're just designing a simple landing page,

then probably you're not gonna need these,

but actually there are many use cases

in which they do make sense.

And so this is how we usually design them.

Next up pagination and I'm sure you've seen it many times.

So when we have many results in some lists,

then we basically put them into many different pages

and then we need some buttons like this

to navigate between these pages.

And so here are six different ways

in which they can be designed.

Then we have alert and status bars.

So these are small components that appear

at the very top of the page

with some kind of announcement usually,

or sometimes there are also like small alerts

for web applications.

Like we see here on the right where some item

has been favorited or the second one on the right

which says that the account has been connected.

So again, alert and status bars

are used to show the user that something new is happening

or well that just some action happened recently.

Next up, we have statistics,

which is basically some numbers

that we want to show to the user

about our product or our service usually.

And statistics can be pretty powerful

in order to convince our users

that our product is like really good for them.

So here you have very different examples,

which does exactly that.

And you see that there are also very creative ways

in which these statistics can be displayed.

So all of these that I have here are quite different

and yeah, I think this is a good source of inspiration,

if you want to do the same in your own designs.

Next up, another powerful thing

that you can use in your web design is galleries.

So again, I'm sure you see galleries all the time,

but there are actually many different ways

in which we can do galleries.

So there are more structured ways

like the two that you see in the bottom.

And then there are also some more unstructured ways

which work very well in some situations as well.

So this might depend a little bit

on your website personality here.

So you need to take that into account.

Here is another bunch of examples.

And again, these are a little bit more irregular

and sometimes we can even overlap images,

which can also make for a nice effect.

So if you need to design some kind of gallery,

you can always come to one of these slides

and get some inspiration.

Now, next up we have the feature box,

which is basically a box that groups together

a bunch of information about something, about a product.

Now, feature boxes, come in all shapes and forms,

but usually they all have a couple of things in common,

which is that all of them uses some kind of icon or image.

Then they use a bigger text,

like some small headline and then also some description.

And of course not all of the feature boxes follow this.

So sometimes they might not have an image,

but they have a link like the one in the bottom corner.

But in general, this is what a feature box will look like.

And later on in part two of this lecture,

we will see that it's pretty common

to actually combine these into rows or grids.

So usually we don't have just one feature box,

but we have multiple of them side by side.

Now here are some more.

And again, we can see here

that they do really come in all shapes and forms.

What matters is that usually multiple of them

will be combined in some form of layout.

Then we have preview and profile cards,

which are a little bit similar to feature boxes.

But the difference is that these two actually contain

some data points for something that they want to preview.

So they might preview some kind of product

or some kind of profile.

And so they usually always have some data.

So that's something that you see in all of these cards here.

Also, we can usually click somewhere on the card

and it will then lead us somewhere, so to some other page.

And actually I did mention this component of cards

a couple of times already.

For example, in the project of the last section,

we did build some cards for each of the different chairs

by the bottom of the page, remember that?

Then here again are some more and all of them

do have some kind of link somewhere.

And also all of them have some kind of data points,

but they are really all completely different

and that's why I have so many different here,

because that way you can get more inspiration

and more options to choose from

when you build your own designs

and actually there is even more

and these are all profile cards

and I'm sure that you have seen most of them around

in some kind of form on the web,

but it's always nice to have multiple of them

all in one place, so you can actually compare them

And in case you need to design one,

you can then decide how exactly you want to do it.

All right, next up,

we have the accordion and accordion is basically a way

of hiding information and only displaying it

once the user clicks on one of the parts here.

So this component is most commonly used

in frequently asked questions,

but it might also be used in some other parts of the website

where we do want to hide some content in the beginning,

in order not to clutter up the entire page.

So basically instead of showing all the information at once,

we simply hide it in one container.

And then only when we click the title, that content appears.

And here is some more, of course,

because there are many different ways

of designing accordions.

So once again, these are all pretty different

and that's why I wanted to show you multiple here.

Next one is the tab component or simply tabs.

And once again, a very, very common one

that we see all the time on pages.

So this one too,

just like the accordion is to hide some information

in the beginning and then show that information to the user

once the right tab is clicked.

Now the accordion,

so the component that we saw before is used mostly

for frequently asked questions, as I mentioned,

but the tab component,

so this one here is used many times

for product features or also for bigger areas of content

that we want to hide and to show selectively.

And once again, there are actually many, many ways

of designing these.

So here are some more and actually here three of them

are vertical tabs.

So the tabs are basically stacked vertically here,

which is just another way of designing this

if it fits your content best.

Then we have another really popular component,

which is the carousel,

which is basically yet another way

to have multiple pieces of content in the same place.

So in the same area

and in this case, the user doesn't click on any tabs

but instead they can click on some button

that will move them to the right or to the left

of the carousel and then the content will change.

So here are four more

and these are all completely different, once again.

One thing that most of them have in common

is that they have some dots in the bottom,

which basically shows how many slides are in the carousel.

I said slides and that's because many times,

the carousel is also called a slider.

So these are basically the same thing I would say.

And so, yeah, this is how you design them,

usually with some dots in the bottom

and then some arrows at the left and the right side.

Next up is customer testimonials.

So this is where you ask your customers

or the customers of the brand

that you're building the website for,

for their opinion on the product or the service.

And this is actually one of the most important pieces

on modern websites that you see these days.

At least if it's some kind of website

that tries to sell a product or a service.

So you can really not leave out testimonials

if you're building a site like that.

And so that's why here I have a lot of different ways

in which these can be displayed

and actually here are some more.

And the first one, there is actually just a wall of tweets.

So that's what it's called

when you just take a couple of tweets

about a certain company or a certain brand

and simply display those as testimonials.

So that can be just another very powerful way

of displaying testimonials

because that shows automatically

that these are actually true.

With all these other ones,

the user cannot be 100% sure

that you actually didn't fake them,

which of course you should never, ever do, okay?

So always use testimonials from real users

and do not fake something.

So that's a really, really bad practice, all right?

And actually here I have some more

because, well, again,

this is really, really important stuff.

And so you can choose the style

that best fits the design that you already have in mind

for your page, all right?

And by the way down here,

we actually have two carousels

that are being used for testimonials.

So that's a pretty common trend that we see also,

which, again, is to use carousels for testimonials.

Next up, we have customer logos,

which once again is really important stuff

in case you are building some kind of marketing website.

So basically what you do here

is to take the logos of your biggest

and most important and most well-known customers

and display them all in one section like this.

And so together with customer testimonials,

this really, really helps to build trust in the brand

or in the company that the website belongs to.

So this is really, really important

and here are some more ways in which that can be done,

because once again, this really should not be missed.

At least of course,

if you have some customers in the first place.

Of course, if you don't have any customers

or the company you're building this for

doesn't have any customers, then you can't do this.

But as soon as there are two or three customers,

you should start displaying them like this.

Then very related are the featured-in the logos,

which are once again to build trust with the user.

So all of these are also called social proof.

Now the difference between these logos

and the customer logos

is that these are basically from places

where your website or the product has been featured in.

So you'll see that all these logos here

are basically some kind of newspaper

or some kind of blog.

So once again, this build trust with the customers.

So if you can add a section like this,

then really go for it.

All right, another one is the steps component.

And these do, once again,

come in many different forms and shapes,

but they can be very, very effective

to actually show a customer how your product

or how your service actually works.

So you see that here in all of those

where you have some numbers like one, two, three,

or one, two, three, four,

and it takes the customer through the journey

of actually getting started with the product

or to actually use that product.

And in my opinion,

this is actually one of the very best ways that you can use

to show how your website or how your product works.

So if you need to do that, always go for some steps,

because that really makes it very simple

for the user to digest.

Here are some more and these are all vertical,

which I also like a lot.

And once again, a lot of diversity is to be found here

and so go for the one that you like the most

and that also best fits the style

that you already have for your pitch.

Then of course we have forms,

which are a crucial component in many, many websites.

And most of these actually do what I showed you

in the UX lecture, which is to align everything,

So the label and the input field,

but sometimes there is just not enough space.

And then you can also do what they did

here in the second form and the last one,

which is to basically put the label

right inside of the input field.

Then here are some more forms,

but these are quite different.

So these are basically login or sign up forms.

So again, something that is very common

and which can be designed in a couple of different ways.

And so here, I wanted to show you some of them.

Then here I have even more

and the first two are some forms that are bigger.

So I wanted to show you that as well

and then the two in the bottom are some one-line forms.

So basically just two or three inputs,

and then with a button on the side.

All right, now tables and I promise

we're getting closer to the end.

So it's 18 and we are at number 16,

but tables are sometimes pretty important

to simply display some kind of tabular data.

So that's what a table is all about

and they can be designed in some very different ways.

So please take some inspiration from this slide

and also from this one.

Now the example in the top right corner

might not be classified as a traditional table

but instead as a couple of cards,

since it contains some data in each of those cards

or in each of those elements,

but we can also think about this

simply being a different way of representing data.

So basically a different way of creating a table.

And so I decided to include it in this group,

along with these other more regular looking tables.

Then we also have pricing tables

and these are very important

and also very, very common on all marketing pages.

So on pages for products or services,

that need to charge some money basically.

So a pricing table

usually has a couple of different columns,

each column for one different pricing plan.

And then each of the columns has a title

for the pricing plan then some description,

a price, all the features that are included,

and usually also some kind of button

to sign up for each of the pricing plans.

Now, many times also the most popular one

is highlighted just as I had mentioned

in some other lecture, I think.

So that's the one

that they want the user to choose basically.

So here are some more examples

and three of them are a little bit different, actually.

So we can say they are a bit more creative

and also a bit more simple.

And finally component number 18 are modal windows.

Now the ones that we see here on this page

is what I actually call functional model windows,

because they are actually important

for the application or the site itself.

So for displaying the data of the site

or for example, to allow a user

to actually sign in or sign up for the service.

Then on the other hand,

we also have these more annoying marketing model windows.

So these are usually the ones

that want to have your email address

and want to basically give you something in return.

Well, actually one of them here is not like that

but at least the two ones on the left,

they are clearly the marketing pop-up windows

that I'm sure you have encountered all the time

and which are really annoying,

but still they are a valid component that we can use.

And so here, once again,

I wanted you to get some inspiration

and with this, we finished this lecture,

which is really mostly a gallery

of all these different components.

So that was the most important thing for this lecture.

And also of course,

the whole process of how actually a page

is designed from element all the way to a final layout.

Now in the next lecture,

we will actually take one of these components,

which is the accordion component

and build one using HTML and CSS.

So we're finally gonna be back to code.

And so I can't wait to do that and to see you there.