Speaker: Welcome back, so in the previous section,
we talked about the design ingredients of typography,
colors, images, icons, shadows, order radios,
whitespace, 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 you 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,
or actual content.
We then assemble these simple elements
into common components such as this feature role,
or a feature card, or a pricing table,
or a tapped 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 joined together, right?
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, right?
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 tags.
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 call them section components,
and they are things like the navigation, the hero section,
the footer, a call to action section, or a feature role.
And finally, we will also talk about layout patterns
in that 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 site 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 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 dropdown 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 specially 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 a 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 tags 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 do 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 list,
then we basically put them into many different pages,
and then we need some buttons like these
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 they're also like small alerts
for web applications, like we see here on the right,
where some item has been favored.
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 while 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 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 some, 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 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 site by site.
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 do 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 part 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 tabbed 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 tabbed 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 they 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 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 see that all these logos here are basically
some kind of newspaper or some kind of blog, right?
So once again, these 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 this 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 page, right?
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, right?
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 modal 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 modal 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 popup 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.