Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,370 --> 00:00:03,240
Welcome back.
2
00:00:03,240 --> 00:00:05,440
So in the previous section,
3
00:00:05,440 --> 00:00:09,530
we talked about the design ingredients of typography,
4
00:00:09,530 --> 00:00:14,530
colors, images, icons, shadows, border radius, white space,
5
00:00:15,060 --> 00:00:17,270
and visual hierarchy.
6
00:00:17,270 --> 00:00:21,010
So these are all very fundamental and crucial,
7
00:00:21,010 --> 00:00:25,120
but one really important ingredient of creating designs
8
00:00:25,120 --> 00:00:26,880
is still missing.
9
00:00:26,880 --> 00:00:30,040
And it is so crucial that it actually deserves
10
00:00:30,040 --> 00:00:32,050
its own section.
11
00:00:32,050 --> 00:00:35,070
And the missing ingredient that I'm talking about
12
00:00:35,070 --> 00:00:39,260
is actually designing components and layouts.
13
00:00:39,260 --> 00:00:40,680
So for this ingredient,
14
00:00:40,680 --> 00:00:44,730
we also need some general guidelines and above all,
15
00:00:44,730 --> 00:00:47,150
a lot of inspiration.
16
00:00:47,150 --> 00:00:51,360
And so that's what this rule number 10 is all about.
17
00:00:51,360 --> 00:00:55,460
Now it is split up in two parts, actually, this lecture,
18
00:00:55,460 --> 00:00:57,620
so part one is right now
19
00:00:57,620 --> 00:00:59,600
and the one about layout patterns
20
00:00:59,600 --> 00:01:01,693
is in the middle of the section.
21
00:01:03,250 --> 00:01:05,660
All right, but now let's start talking
22
00:01:05,660 --> 00:01:09,880
about how an actual webpage is designed from scratch.
23
00:01:09,880 --> 00:01:13,140
So when you want to start a new website
24
00:01:13,140 --> 00:01:15,470
and start with an empty page,
25
00:01:15,470 --> 00:01:17,680
and all we have is the content,
26
00:01:17,680 --> 00:01:22,680
you might feel very lost, but you don't have to feel lost.
27
00:01:23,360 --> 00:01:25,090
It doesn't have to be hard
28
00:01:25,090 --> 00:01:28,530
because this is where well-established patterns
29
00:01:28,530 --> 00:01:31,410
come into play in order to help you.
30
00:01:31,410 --> 00:01:36,000
So basically we build websites always in the same way,
31
00:01:36,000 --> 00:01:38,910
we start with some common, small elements
32
00:01:38,910 --> 00:01:42,380
like paragraphs or images or buttons
33
00:01:42,380 --> 00:01:45,320
which will contain our actual content.
34
00:01:45,320 --> 00:01:47,780
We then assemble these simple elements
35
00:01:47,780 --> 00:01:49,650
into common components,
36
00:01:49,650 --> 00:01:53,560
such as this feature row or a feature card
37
00:01:53,560 --> 00:01:57,670
or a pricing table or a tab component.
38
00:01:57,670 --> 00:02:00,750
Then we take all the components that we designed
39
00:02:00,750 --> 00:02:05,750
and use them to build a layout using common layout patterns.
40
00:02:05,800 --> 00:02:09,680
Finally, we take all the smaller layouts like this one,
41
00:02:09,680 --> 00:02:14,680
or just one big layout and assemble a final page from them.
42
00:02:15,100 --> 00:02:16,370
And so in the end,
43
00:02:16,370 --> 00:02:19,720
this is how we come up with a final design.
44
00:02:19,720 --> 00:02:23,460
So hopefully you see that there is in fact a system
45
00:02:23,460 --> 00:02:25,040
behind all this.
46
00:02:25,040 --> 00:02:27,770
So a webpage is not just a bunch
47
00:02:27,770 --> 00:02:30,283
of random elements tying together.
48
00:02:31,600 --> 00:02:34,020
Instead, elements are organized
49
00:02:34,020 --> 00:02:36,540
into components which are then organized
50
00:02:36,540 --> 00:02:39,120
into one or more layouts, which in the end,
51
00:02:39,120 --> 00:02:41,540
make-up a final webpage.
52
00:02:41,540 --> 00:02:44,480
So whenever you need to start a new design
53
00:02:44,480 --> 00:02:48,640
from a blank page, this is how you proceed.
54
00:02:48,640 --> 00:02:51,440
You use common elements and components
55
00:02:51,440 --> 00:02:53,520
in order to present the information
56
00:02:53,520 --> 00:02:56,240
that you want on the website.
57
00:02:56,240 --> 00:02:57,290
And I will, of course,
58
00:02:57,290 --> 00:02:59,080
show you the most common elements
59
00:02:59,080 --> 00:03:01,090
and components in a minute
60
00:03:01,090 --> 00:03:04,000
so to enable you to really create designs
61
00:03:04,000 --> 00:03:06,200
on your own in the future.
62
00:03:06,200 --> 00:03:10,650
But anyway, these components are then combined into layouts
63
00:03:10,650 --> 00:03:13,190
by using some common layout patterns
64
00:03:13,190 --> 00:03:15,513
just as we saw in the previous slide.
65
00:03:17,160 --> 00:03:18,520
Now, some of these patterns
66
00:03:18,520 --> 00:03:21,780
are actually about repeating a certain component
67
00:03:21,780 --> 00:03:23,200
a couple of times,
68
00:03:23,200 --> 00:03:26,820
as you will see in the lecture about layout patterns.
69
00:03:26,820 --> 00:03:30,470
But anyway, finally, as I mentioned before,
70
00:03:30,470 --> 00:03:33,430
you take all your layouts and components
71
00:03:33,430 --> 00:03:36,790
and assemble them into the final page.
72
00:03:36,790 --> 00:03:38,480
So as a summary,
73
00:03:38,480 --> 00:03:41,859
you do not need to get scared by a blank page
74
00:03:41,859 --> 00:03:44,300
and a brand new design.
75
00:03:44,300 --> 00:03:46,700
You just need to go step by step,
76
00:03:46,700 --> 00:03:50,210
follow common best practices that I will show you.
77
00:03:50,210 --> 00:03:51,210
And of course,
78
00:03:51,210 --> 00:03:52,922
all the other design guidelines
79
00:03:52,922 --> 00:03:56,023
that you have been learning in the previous section.
80
00:03:57,790 --> 00:03:59,310
All right, and so now
81
00:03:59,310 --> 00:04:02,410
let me show you the most common elements,
82
00:04:02,410 --> 00:04:07,000
components, section components and layout patterns
83
00:04:07,000 --> 00:04:09,913
that exist in web design and web development.
84
00:04:10,830 --> 00:04:14,980
So the most common elements I would say are text, buttons,
85
00:04:14,980 --> 00:04:18,680
images, input elements and texts.
86
00:04:18,680 --> 00:04:20,230
And so it is these elements
87
00:04:20,230 --> 00:04:24,060
that we then combine into one of these components.
88
00:04:24,060 --> 00:04:26,560
Now this list here is not exhaustive.
89
00:04:26,560 --> 00:04:29,130
There are a lot of other components
90
00:04:29,130 --> 00:04:31,760
that we can and that we do use,
91
00:04:31,760 --> 00:04:35,020
but I would say that these are the most common components
92
00:04:35,020 --> 00:04:37,870
that you will see in web designs.
93
00:04:37,870 --> 00:04:39,340
So in this lecture,
94
00:04:39,340 --> 00:04:42,200
I will show you some inspiration for elements
95
00:04:42,200 --> 00:04:44,160
and for these components,
96
00:04:44,160 --> 00:04:46,420
and actually not just some inspiration,
97
00:04:46,420 --> 00:04:48,970
but a lot of inspiration.
98
00:04:48,970 --> 00:04:51,430
So I'm sure you will love this lecture
99
00:04:51,430 --> 00:04:53,830
because from the inspiration in this video,
100
00:04:53,830 --> 00:04:56,460
you will be able to take your design skills
101
00:04:56,460 --> 00:04:59,630
to the next level, I hope at least.
102
00:04:59,630 --> 00:05:02,380
But anyway, in part two of this lecture,
103
00:05:02,380 --> 00:05:04,900
we will then talk about these,
104
00:05:04,900 --> 00:05:08,040
let's say components, that are actually a section.
105
00:05:08,040 --> 00:05:10,240
So I called them section components
106
00:05:10,240 --> 00:05:12,660
and they are things like the navigation,
107
00:05:12,660 --> 00:05:15,070
the hero section, the footer,
108
00:05:15,070 --> 00:05:18,530
a call-to-action section or a feature row.
109
00:05:18,530 --> 00:05:21,870
And finally, we will also talk about layout patterns
110
00:05:21,870 --> 00:05:24,760
in the part two of this lecture.
111
00:05:24,760 --> 00:05:29,760
So basically combining multiple components into a layout.
112
00:05:29,810 --> 00:05:31,640
All right, but let's get started
113
00:05:31,640 --> 00:05:33,803
with some inspiration about text.
114
00:05:34,800 --> 00:05:37,400
Now, text of course is very simple.
115
00:05:37,400 --> 00:05:39,900
And so the inspiration that I have here
116
00:05:39,900 --> 00:05:41,440
is basically for ways
117
00:05:41,440 --> 00:05:44,470
to start a different website sections.
118
00:05:44,470 --> 00:05:47,340
So nothing all too exciting yet at this point,
119
00:05:47,340 --> 00:05:50,790
but still it's good to start at the basics.
120
00:05:50,790 --> 00:05:52,850
And here is some more inspiration
121
00:05:52,850 --> 00:05:55,750
of how to start a section with text,
122
00:05:55,750 --> 00:05:58,660
because now there is this very popular way
123
00:05:58,660 --> 00:06:01,200
of adding a small and short
124
00:06:01,200 --> 00:06:03,440
and super descriptive title
125
00:06:03,440 --> 00:06:05,910
before the actual main heading.
126
00:06:05,910 --> 00:06:09,313
So just like we see in all of these examples here.
127
00:06:11,060 --> 00:06:13,040
Next up, we have some buttons
128
00:06:13,040 --> 00:06:16,210
and we talked a lot about buttons before,
129
00:06:16,210 --> 00:06:17,770
but here you have one slide
130
00:06:17,770 --> 00:06:20,730
where you have basically all the different ways
131
00:06:20,730 --> 00:06:24,400
in which you can design buttons all in one place.
132
00:06:24,400 --> 00:06:25,610
So on the very left,
133
00:06:25,610 --> 00:06:28,850
you have a lot of different single buttons.
134
00:06:28,850 --> 00:06:30,230
And then here in the middle,
135
00:06:30,230 --> 00:06:33,450
we have basically a combination of two buttons
136
00:06:33,450 --> 00:06:36,945
where one is the primary button for the primary action
137
00:06:36,945 --> 00:06:38,670
and then at the side,
138
00:06:38,670 --> 00:06:42,790
there is another button with a lot less emphasis on it.
139
00:06:42,790 --> 00:06:46,380
So usually that one doesn't have any background color.
140
00:06:46,380 --> 00:06:48,550
And so this is a very common pattern
141
00:06:48,550 --> 00:06:50,413
that is used all the time.
142
00:06:52,170 --> 00:06:54,180
Next up, there is images
143
00:06:54,180 --> 00:06:57,290
and we already talked a lot about images.
144
00:06:57,290 --> 00:07:00,253
So here are just some more ways of using them.
145
00:07:01,770 --> 00:07:04,330
Then here are input elements
146
00:07:04,330 --> 00:07:08,440
and many of them are actually used to create big forms.
147
00:07:08,440 --> 00:07:11,050
But here we are just basically talking
148
00:07:11,050 --> 00:07:14,710
about the single input elements like we have here.
149
00:07:14,710 --> 00:07:17,020
For example, using just one field
150
00:07:17,020 --> 00:07:20,910
to input an email address with a small button besides it,
151
00:07:20,910 --> 00:07:22,330
or here in the bottom,
152
00:07:22,330 --> 00:07:24,450
just a simple drop down menu
153
00:07:24,450 --> 00:07:28,310
and some simple value pickers, basically.
154
00:07:28,310 --> 00:07:30,560
Now, just like in the previous section,
155
00:07:30,560 --> 00:07:34,270
I will, of course not go into every single example here,
156
00:07:34,270 --> 00:07:37,650
because once again, and I promise,
157
00:07:37,650 --> 00:07:40,420
this is the last time I'm saying this,
158
00:07:40,420 --> 00:07:44,340
so again, I want you to actually download these slides
159
00:07:44,340 --> 00:07:48,260
and study all these examples one by one on your own.
160
00:07:48,260 --> 00:07:51,750
So that's actually especially important in this lecture
161
00:07:51,750 --> 00:07:54,240
and part two of this lecture,
162
00:07:54,240 --> 00:07:56,370
because there is so much inspiration
163
00:07:56,370 --> 00:07:58,700
for so much different components.
164
00:07:58,700 --> 00:08:00,290
And so it's really important
165
00:08:00,290 --> 00:08:02,480
that you actually take a close look
166
00:08:02,480 --> 00:08:04,310
at all of these examples.
167
00:08:04,310 --> 00:08:07,310
And especially if you're actually right now
168
00:08:07,310 --> 00:08:10,490
with the task of designing some page,
169
00:08:10,490 --> 00:08:13,680
and probably I took something like a hundred hours
170
00:08:13,680 --> 00:08:16,760
to compile all of these different examples
171
00:08:16,760 --> 00:08:20,240
for all the components and layouts.
172
00:08:20,240 --> 00:08:23,213
And therefore I think there is a lot of value here
173
00:08:23,213 --> 00:08:25,890
that you can extract from these videos.
174
00:08:25,890 --> 00:08:29,910
And so again, I think you can only get that value
175
00:08:29,910 --> 00:08:33,050
if you actually analyze each of the slides
176
00:08:33,050 --> 00:08:34,893
on your own with some time.
177
00:08:36,220 --> 00:08:39,370
But anyway, next up there is tags,
178
00:08:39,370 --> 00:08:42,300
which are just a very, very simple element
179
00:08:42,300 --> 00:08:43,630
that we can use
180
00:08:43,630 --> 00:08:47,970
to create a visual representation of categories.
181
00:08:47,970 --> 00:08:49,830
So that's exactly what's happening here
182
00:08:49,830 --> 00:08:52,110
in each of these examples.
183
00:08:52,110 --> 00:08:55,620
And I'm pretty sure you have already seen texts used
184
00:08:55,620 --> 00:08:58,093
all the time as you browse the internet.
185
00:08:59,610 --> 00:09:01,730
All right And now we actually move
186
00:09:01,730 --> 00:09:04,960
into the section of components.
187
00:09:04,960 --> 00:09:07,720
So for each of these types of components,
188
00:09:07,720 --> 00:09:10,900
I'm gonna present you with a couple of examples
189
00:09:10,900 --> 00:09:13,800
and I'm gonna start with breadcrumbs.
190
00:09:13,800 --> 00:09:17,570
So these are usually used to help the user navigate
191
00:09:17,570 --> 00:09:19,720
a pretty complex site.
192
00:09:19,720 --> 00:09:22,120
So usually we only use
193
00:09:22,120 --> 00:09:25,010
and we only see breadcrumbs on websites
194
00:09:25,010 --> 00:09:29,540
that actually have a deep level of page organization.
195
00:09:29,540 --> 00:09:32,430
So if you're just designing a simple landing page,
196
00:09:32,430 --> 00:09:35,210
then probably you're not gonna need these,
197
00:09:35,210 --> 00:09:37,720
but actually there are many use cases
198
00:09:37,720 --> 00:09:39,360
in which they do make sense.
199
00:09:39,360 --> 00:09:41,853
And so this is how we usually design them.
200
00:09:43,100 --> 00:09:46,936
Next up pagination and I'm sure you've seen it many times.
201
00:09:46,936 --> 00:09:50,530
So when we have many results in some lists,
202
00:09:50,530 --> 00:09:54,400
then we basically put them into many different pages
203
00:09:54,400 --> 00:09:56,688
and then we need some buttons like this
204
00:09:56,688 --> 00:09:59,610
to navigate between these pages.
205
00:09:59,610 --> 00:10:02,290
And so here are six different ways
206
00:10:02,290 --> 00:10:03,790
in which they can be designed.
207
00:10:05,540 --> 00:10:08,520
Then we have alert and status bars.
208
00:10:08,520 --> 00:10:12,020
So these are small components that appear
209
00:10:12,020 --> 00:10:13,830
at the very top of the page
210
00:10:13,830 --> 00:10:16,890
with some kind of announcement usually,
211
00:10:16,890 --> 00:10:20,270
or sometimes there are also like small alerts
212
00:10:20,270 --> 00:10:22,500
for web applications.
213
00:10:22,500 --> 00:10:25,100
Like we see here on the right where some item
214
00:10:25,100 --> 00:10:28,670
has been favorited or the second one on the right
215
00:10:28,670 --> 00:10:32,160
which says that the account has been connected.
216
00:10:32,160 --> 00:10:34,800
So again, alert and status bars
217
00:10:34,800 --> 00:10:38,454
are used to show the user that something new is happening
218
00:10:38,454 --> 00:10:42,283
or well that just some action happened recently.
219
00:10:44,070 --> 00:10:46,090
Next up, we have statistics,
220
00:10:46,090 --> 00:10:48,570
which is basically some numbers
221
00:10:48,570 --> 00:10:50,490
that we want to show to the user
222
00:10:50,490 --> 00:10:54,240
about our product or our service usually.
223
00:10:54,240 --> 00:10:56,840
And statistics can be pretty powerful
224
00:10:56,840 --> 00:10:59,060
in order to convince our users
225
00:10:59,060 --> 00:11:02,840
that our product is like really good for them.
226
00:11:02,840 --> 00:11:05,700
So here you have very different examples,
227
00:11:05,700 --> 00:11:07,590
which does exactly that.
228
00:11:07,590 --> 00:11:10,920
And you see that there are also very creative ways
229
00:11:10,920 --> 00:11:14,220
in which these statistics can be displayed.
230
00:11:14,220 --> 00:11:17,650
So all of these that I have here are quite different
231
00:11:17,650 --> 00:11:22,140
and yeah, I think this is a good source of inspiration,
232
00:11:22,140 --> 00:11:24,893
if you want to do the same in your own designs.
233
00:11:26,320 --> 00:11:28,320
Next up, another powerful thing
234
00:11:28,320 --> 00:11:32,140
that you can use in your web design is galleries.
235
00:11:32,140 --> 00:11:35,970
So again, I'm sure you see galleries all the time,
236
00:11:35,970 --> 00:11:38,030
but there are actually many different ways
237
00:11:38,030 --> 00:11:40,450
in which we can do galleries.
238
00:11:40,450 --> 00:11:42,700
So there are more structured ways
239
00:11:42,700 --> 00:11:45,460
like the two that you see in the bottom.
240
00:11:45,460 --> 00:11:48,760
And then there are also some more unstructured ways
241
00:11:48,760 --> 00:11:52,500
which work very well in some situations as well.
242
00:11:52,500 --> 00:11:54,010
So this might depend a little bit
243
00:11:54,010 --> 00:11:56,270
on your website personality here.
244
00:11:56,270 --> 00:11:59,300
So you need to take that into account.
245
00:11:59,300 --> 00:12:01,610
Here is another bunch of examples.
246
00:12:01,610 --> 00:12:04,830
And again, these are a little bit more irregular
247
00:12:04,830 --> 00:12:07,610
and sometimes we can even overlap images,
248
00:12:07,610 --> 00:12:10,360
which can also make for a nice effect.
249
00:12:10,360 --> 00:12:13,150
So if you need to design some kind of gallery,
250
00:12:13,150 --> 00:12:15,792
you can always come to one of these slides
251
00:12:15,792 --> 00:12:17,573
and get some inspiration.
252
00:12:18,500 --> 00:12:21,390
Now, next up we have the feature box,
253
00:12:21,390 --> 00:12:24,230
which is basically a box that groups together
254
00:12:24,230 --> 00:12:28,740
a bunch of information about something, about a product.
255
00:12:28,740 --> 00:12:31,920
Now, feature boxes, come in all shapes and forms,
256
00:12:31,920 --> 00:12:35,340
but usually they all have a couple of things in common,
257
00:12:35,340 --> 00:12:39,950
which is that all of them uses some kind of icon or image.
258
00:12:39,950 --> 00:12:42,460
Then they use a bigger text,
259
00:12:42,460 --> 00:12:46,830
like some small headline and then also some description.
260
00:12:46,830 --> 00:12:50,850
And of course not all of the feature boxes follow this.
261
00:12:50,850 --> 00:12:53,060
So sometimes they might not have an image,
262
00:12:53,060 --> 00:12:56,850
but they have a link like the one in the bottom corner.
263
00:12:56,850 --> 00:13:01,220
But in general, this is what a feature box will look like.
264
00:13:01,220 --> 00:13:03,850
And later on in part two of this lecture,
265
00:13:03,850 --> 00:13:05,659
we will see that it's pretty common
266
00:13:05,659 --> 00:13:09,930
to actually combine these into rows or grids.
267
00:13:09,930 --> 00:13:12,930
So usually we don't have just one feature box,
268
00:13:12,930 --> 00:13:15,863
but we have multiple of them side by side.
269
00:13:16,840 --> 00:13:18,681
Now here are some more.
270
00:13:18,681 --> 00:13:20,660
And again, we can see here
271
00:13:20,660 --> 00:13:24,520
that they do really come in all shapes and forms.
272
00:13:24,520 --> 00:13:27,140
What matters is that usually multiple of them
273
00:13:27,140 --> 00:13:29,703
will be combined in some form of layout.
274
00:13:31,250 --> 00:13:34,200
Then we have preview and profile cards,
275
00:13:34,200 --> 00:13:37,360
which are a little bit similar to feature boxes.
276
00:13:37,360 --> 00:13:40,410
But the difference is that these two actually contain
277
00:13:40,410 --> 00:13:44,630
some data points for something that they want to preview.
278
00:13:44,630 --> 00:13:47,330
So they might preview some kind of product
279
00:13:47,330 --> 00:13:49,730
or some kind of profile.
280
00:13:49,730 --> 00:13:54,000
And so they usually always have some data.
281
00:13:54,000 --> 00:13:57,900
So that's something that you see in all of these cards here.
282
00:13:57,900 --> 00:14:01,230
Also, we can usually click somewhere on the card
283
00:14:01,230 --> 00:14:05,430
and it will then lead us somewhere, so to some other page.
284
00:14:05,430 --> 00:14:08,780
And actually I did mention this component of cards
285
00:14:08,780 --> 00:14:10,750
a couple of times already.
286
00:14:10,750 --> 00:14:14,270
For example, in the project of the last section,
287
00:14:14,270 --> 00:14:18,880
we did build some cards for each of the different chairs
288
00:14:18,880 --> 00:14:21,423
by the bottom of the page, remember that?
289
00:14:22,710 --> 00:14:25,730
Then here again are some more and all of them
290
00:14:25,730 --> 00:14:27,905
do have some kind of link somewhere.
291
00:14:27,905 --> 00:14:32,040
And also all of them have some kind of data points,
292
00:14:32,040 --> 00:14:35,240
but they are really all completely different
293
00:14:35,240 --> 00:14:37,930
and that's why I have so many different here,
294
00:14:37,930 --> 00:14:40,970
because that way you can get more inspiration
295
00:14:40,970 --> 00:14:42,830
and more options to choose from
296
00:14:42,830 --> 00:14:45,370
when you build your own designs
297
00:14:45,370 --> 00:14:47,320
and actually there is even more
298
00:14:47,320 --> 00:14:49,380
and these are all profile cards
299
00:14:49,380 --> 00:14:52,720
and I'm sure that you have seen most of them around
300
00:14:52,720 --> 00:14:55,240
in some kind of form on the web,
301
00:14:55,240 --> 00:14:58,100
but it's always nice to have multiple of them
302
00:14:58,100 --> 00:15:01,230
all in one place, so you can actually compare them
303
00:15:01,230 --> 00:15:03,200
And in case you need to design one,
304
00:15:03,200 --> 00:15:06,393
you can then decide how exactly you want to do it.
305
00:15:08,140 --> 00:15:09,420
All right, next up,
306
00:15:09,420 --> 00:15:13,270
we have the accordion and accordion is basically a way
307
00:15:13,270 --> 00:15:16,260
of hiding information and only displaying it
308
00:15:16,260 --> 00:15:20,380
once the user clicks on one of the parts here.
309
00:15:20,380 --> 00:15:22,910
So this component is most commonly used
310
00:15:22,910 --> 00:15:25,260
in frequently asked questions,
311
00:15:25,260 --> 00:15:29,610
but it might also be used in some other parts of the website
312
00:15:29,610 --> 00:15:32,710
where we do want to hide some content in the beginning,
313
00:15:32,710 --> 00:15:35,990
in order not to clutter up the entire page.
314
00:15:35,990 --> 00:15:39,780
So basically instead of showing all the information at once,
315
00:15:39,780 --> 00:15:42,770
we simply hide it in one container.
316
00:15:42,770 --> 00:15:46,203
And then only when we click the title, that content appears.
317
00:15:47,170 --> 00:15:49,390
And here is some more, of course,
318
00:15:49,390 --> 00:15:51,780
because there are many different ways
319
00:15:51,780 --> 00:15:54,010
of designing accordions.
320
00:15:54,010 --> 00:15:57,139
So once again, these are all pretty different
321
00:15:57,139 --> 00:16:00,233
and that's why I wanted to show you multiple here.
322
00:16:02,230 --> 00:16:07,070
Next one is the tab component or simply tabs.
323
00:16:07,070 --> 00:16:09,660
And once again, a very, very common one
324
00:16:09,660 --> 00:16:12,550
that we see all the time on pages.
325
00:16:12,550 --> 00:16:14,010
So this one too,
326
00:16:14,010 --> 00:16:17,460
just like the accordion is to hide some information
327
00:16:17,460 --> 00:16:21,170
in the beginning and then show that information to the user
328
00:16:21,170 --> 00:16:24,550
once the right tab is clicked.
329
00:16:24,550 --> 00:16:25,940
Now the accordion,
330
00:16:25,940 --> 00:16:29,410
so the component that we saw before is used mostly
331
00:16:29,410 --> 00:16:32,880
for frequently asked questions, as I mentioned,
332
00:16:32,880 --> 00:16:34,710
but the tab component,
333
00:16:34,710 --> 00:16:37,400
so this one here is used many times
334
00:16:37,400 --> 00:16:41,920
for product features or also for bigger areas of content
335
00:16:41,920 --> 00:16:45,500
that we want to hide and to show selectively.
336
00:16:45,500 --> 00:16:48,480
And once again, there are actually many, many ways
337
00:16:48,480 --> 00:16:50,450
of designing these.
338
00:16:50,450 --> 00:16:54,690
So here are some more and actually here three of them
339
00:16:54,690 --> 00:16:56,650
are vertical tabs.
340
00:16:56,650 --> 00:17:00,250
So the tabs are basically stacked vertically here,
341
00:17:00,250 --> 00:17:03,080
which is just another way of designing this
342
00:17:03,080 --> 00:17:04,923
if it fits your content best.
343
00:17:05,890 --> 00:17:09,070
Then we have another really popular component,
344
00:17:09,070 --> 00:17:10,960
which is the carousel,
345
00:17:10,960 --> 00:17:13,140
which is basically yet another way
346
00:17:13,140 --> 00:17:17,060
to have multiple pieces of content in the same place.
347
00:17:17,060 --> 00:17:18,750
So in the same area
348
00:17:18,750 --> 00:17:22,500
and in this case, the user doesn't click on any tabs
349
00:17:22,500 --> 00:17:25,260
but instead they can click on some button
350
00:17:25,260 --> 00:17:27,930
that will move them to the right or to the left
351
00:17:27,930 --> 00:17:31,223
of the carousel and then the content will change.
352
00:17:32,460 --> 00:17:34,610
So here are four more
353
00:17:34,610 --> 00:17:38,530
and these are all completely different, once again.
354
00:17:38,530 --> 00:17:41,490
One thing that most of them have in common
355
00:17:41,490 --> 00:17:44,200
is that they have some dots in the bottom,
356
00:17:44,200 --> 00:17:49,070
which basically shows how many slides are in the carousel.
357
00:17:49,070 --> 00:17:52,060
I said slides and that's because many times,
358
00:17:52,060 --> 00:17:55,190
the carousel is also called a slider.
359
00:17:55,190 --> 00:17:59,120
So these are basically the same thing I would say.
360
00:17:59,120 --> 00:18:02,290
And so, yeah, this is how you design them,
361
00:18:02,290 --> 00:18:04,430
usually with some dots in the bottom
362
00:18:04,430 --> 00:18:07,923
and then some arrows at the left and the right side.
363
00:18:09,350 --> 00:18:12,539
Next up is customer testimonials.
364
00:18:12,539 --> 00:18:15,238
So this is where you ask your customers
365
00:18:15,238 --> 00:18:17,750
or the customers of the brand
366
00:18:17,750 --> 00:18:19,890
that you're building the website for,
367
00:18:19,890 --> 00:18:23,290
for their opinion on the product or the service.
368
00:18:23,290 --> 00:18:26,330
And this is actually one of the most important pieces
369
00:18:26,330 --> 00:18:29,630
on modern websites that you see these days.
370
00:18:29,630 --> 00:18:31,980
At least if it's some kind of website
371
00:18:31,980 --> 00:18:35,270
that tries to sell a product or a service.
372
00:18:35,270 --> 00:18:38,340
So you can really not leave out testimonials
373
00:18:38,340 --> 00:18:40,570
if you're building a site like that.
374
00:18:40,570 --> 00:18:43,510
And so that's why here I have a lot of different ways
375
00:18:43,510 --> 00:18:45,768
in which these can be displayed
376
00:18:45,768 --> 00:18:48,423
and actually here are some more.
377
00:18:48,423 --> 00:18:52,710
And the first one, there is actually just a wall of tweets.
378
00:18:52,710 --> 00:18:54,160
So that's what it's called
379
00:18:54,160 --> 00:18:56,330
when you just take a couple of tweets
380
00:18:56,330 --> 00:18:59,830
about a certain company or a certain brand
381
00:18:59,830 --> 00:19:03,000
and simply display those as testimonials.
382
00:19:03,000 --> 00:19:06,610
So that can be just another very powerful way
383
00:19:06,610 --> 00:19:08,670
of displaying testimonials
384
00:19:08,670 --> 00:19:11,380
because that shows automatically
385
00:19:11,380 --> 00:19:13,370
that these are actually true.
386
00:19:13,370 --> 00:19:14,560
With all these other ones,
387
00:19:14,560 --> 00:19:17,280
the user cannot be 100% sure
388
00:19:17,280 --> 00:19:19,990
that you actually didn't fake them,
389
00:19:19,990 --> 00:19:24,020
which of course you should never, ever do, okay?
390
00:19:24,020 --> 00:19:27,380
So always use testimonials from real users
391
00:19:27,380 --> 00:19:29,670
and do not fake something.
392
00:19:29,670 --> 00:19:33,193
So that's a really, really bad practice, all right?
393
00:19:34,170 --> 00:19:35,830
And actually here I have some more
394
00:19:35,830 --> 00:19:38,230
because, well, again,
395
00:19:38,230 --> 00:19:40,670
this is really, really important stuff.
396
00:19:40,670 --> 00:19:42,470
And so you can choose the style
397
00:19:42,470 --> 00:19:46,070
that best fits the design that you already have in mind
398
00:19:46,070 --> 00:19:48,740
for your page, all right?
399
00:19:48,740 --> 00:19:50,130
And by the way down here,
400
00:19:50,130 --> 00:19:52,420
we actually have two carousels
401
00:19:52,420 --> 00:19:54,980
that are being used for testimonials.
402
00:19:54,980 --> 00:19:58,360
So that's a pretty common trend that we see also,
403
00:19:58,360 --> 00:20:03,083
which, again, is to use carousels for testimonials.
404
00:20:04,570 --> 00:20:07,160
Next up, we have customer logos,
405
00:20:07,160 --> 00:20:10,040
which once again is really important stuff
406
00:20:10,040 --> 00:20:14,010
in case you are building some kind of marketing website.
407
00:20:14,010 --> 00:20:15,850
So basically what you do here
408
00:20:15,850 --> 00:20:18,560
is to take the logos of your biggest
409
00:20:18,560 --> 00:20:22,660
and most important and most well-known customers
410
00:20:22,660 --> 00:20:26,760
and display them all in one section like this.
411
00:20:26,760 --> 00:20:29,880
And so together with customer testimonials,
412
00:20:29,880 --> 00:20:33,450
this really, really helps to build trust in the brand
413
00:20:33,450 --> 00:20:37,090
or in the company that the website belongs to.
414
00:20:37,090 --> 00:20:39,447
So this is really, really important
415
00:20:39,447 --> 00:20:43,186
and here are some more ways in which that can be done,
416
00:20:43,186 --> 00:20:47,830
because once again, this really should not be missed.
417
00:20:47,830 --> 00:20:49,160
At least of course,
418
00:20:49,160 --> 00:20:52,600
if you have some customers in the first place.
419
00:20:52,600 --> 00:20:55,140
Of course, if you don't have any customers
420
00:20:55,140 --> 00:20:57,240
or the company you're building this for
421
00:20:57,240 --> 00:21:00,830
doesn't have any customers, then you can't do this.
422
00:21:00,830 --> 00:21:03,490
But as soon as there are two or three customers,
423
00:21:03,490 --> 00:21:06,394
you should start displaying them like this.
424
00:21:06,394 --> 00:21:10,350
Then very related are the featured-in the logos,
425
00:21:10,350 --> 00:21:14,270
which are once again to build trust with the user.
426
00:21:14,270 --> 00:21:17,590
So all of these are also called social proof.
427
00:21:17,590 --> 00:21:19,550
Now the difference between these logos
428
00:21:19,550 --> 00:21:21,250
and the customer logos
429
00:21:21,250 --> 00:21:23,750
is that these are basically from places
430
00:21:23,750 --> 00:21:27,920
where your website or the product has been featured in.
431
00:21:27,920 --> 00:21:30,430
So you'll see that all these logos here
432
00:21:30,430 --> 00:21:32,710
are basically some kind of newspaper
433
00:21:32,710 --> 00:21:34,223
or some kind of blog.
434
00:21:35,402 --> 00:21:39,250
So once again, this build trust with the customers.
435
00:21:39,250 --> 00:21:41,550
So if you can add a section like this,
436
00:21:41,550 --> 00:21:43,053
then really go for it.
437
00:21:44,170 --> 00:21:48,400
All right, another one is the steps component.
438
00:21:48,400 --> 00:21:50,210
And these do, once again,
439
00:21:50,210 --> 00:21:52,820
come in many different forms and shapes,
440
00:21:52,820 --> 00:21:55,430
but they can be very, very effective
441
00:21:55,430 --> 00:21:58,650
to actually show a customer how your product
442
00:21:58,650 --> 00:22:01,980
or how your service actually works.
443
00:22:01,980 --> 00:22:04,400
So you see that here in all of those
444
00:22:04,400 --> 00:22:07,300
where you have some numbers like one, two, three,
445
00:22:07,300 --> 00:22:09,290
or one, two, three, four,
446
00:22:09,290 --> 00:22:11,990
and it takes the customer through the journey
447
00:22:11,990 --> 00:22:14,650
of actually getting started with the product
448
00:22:14,650 --> 00:22:17,200
or to actually use that product.
449
00:22:17,200 --> 00:22:18,560
And in my opinion,
450
00:22:18,560 --> 00:22:22,530
this is actually one of the very best ways that you can use
451
00:22:22,530 --> 00:22:26,510
to show how your website or how your product works.
452
00:22:26,510 --> 00:22:29,950
So if you need to do that, always go for some steps,
453
00:22:29,950 --> 00:22:32,210
because that really makes it very simple
454
00:22:32,210 --> 00:22:34,123
for the user to digest.
455
00:22:35,400 --> 00:22:39,350
Here are some more and these are all vertical,
456
00:22:39,350 --> 00:22:41,700
which I also like a lot.
457
00:22:41,700 --> 00:22:45,560
And once again, a lot of diversity is to be found here
458
00:22:45,560 --> 00:22:47,910
and so go for the one that you like the most
459
00:22:47,910 --> 00:22:50,790
and that also best fits the style
460
00:22:50,790 --> 00:22:52,963
that you already have for your pitch.
461
00:22:54,950 --> 00:22:56,810
Then of course we have forms,
462
00:22:56,810 --> 00:23:01,660
which are a crucial component in many, many websites.
463
00:23:01,660 --> 00:23:04,650
And most of these actually do what I showed you
464
00:23:04,650 --> 00:23:08,220
in the UX lecture, which is to align everything,
465
00:23:08,220 --> 00:23:11,020
So the label and the input field,
466
00:23:11,020 --> 00:23:14,020
but sometimes there is just not enough space.
467
00:23:14,020 --> 00:23:15,890
And then you can also do what they did
468
00:23:15,890 --> 00:23:18,420
here in the second form and the last one,
469
00:23:18,420 --> 00:23:21,160
which is to basically put the label
470
00:23:21,160 --> 00:23:24,053
right inside of the input field.
471
00:23:25,550 --> 00:23:27,660
Then here are some more forms,
472
00:23:27,660 --> 00:23:29,510
but these are quite different.
473
00:23:29,510 --> 00:23:33,930
So these are basically login or sign up forms.
474
00:23:33,930 --> 00:23:36,880
So again, something that is very common
475
00:23:36,880 --> 00:23:40,170
and which can be designed in a couple of different ways.
476
00:23:40,170 --> 00:23:42,993
And so here, I wanted to show you some of them.
477
00:23:44,570 --> 00:23:46,760
Then here I have even more
478
00:23:46,760 --> 00:23:50,700
and the first two are some forms that are bigger.
479
00:23:50,700 --> 00:23:53,100
So I wanted to show you that as well
480
00:23:53,100 --> 00:23:57,080
and then the two in the bottom are some one-line forms.
481
00:23:57,080 --> 00:23:59,690
So basically just two or three inputs,
482
00:23:59,690 --> 00:24:02,143
and then with a button on the side.
483
00:24:03,750 --> 00:24:06,840
All right, now tables and I promise
484
00:24:06,840 --> 00:24:09,370
we're getting closer to the end.
485
00:24:09,370 --> 00:24:12,880
So it's 18 and we are at number 16,
486
00:24:12,880 --> 00:24:15,870
but tables are sometimes pretty important
487
00:24:15,870 --> 00:24:19,223
to simply display some kind of tabular data.
488
00:24:20,450 --> 00:24:23,040
So that's what a table is all about
489
00:24:23,040 --> 00:24:26,560
and they can be designed in some very different ways.
490
00:24:26,560 --> 00:24:30,140
So please take some inspiration from this slide
491
00:24:30,140 --> 00:24:32,770
and also from this one.
492
00:24:32,770 --> 00:24:34,930
Now the example in the top right corner
493
00:24:34,930 --> 00:24:38,440
might not be classified as a traditional table
494
00:24:38,440 --> 00:24:41,100
but instead as a couple of cards,
495
00:24:41,100 --> 00:24:44,630
since it contains some data in each of those cards
496
00:24:44,630 --> 00:24:46,700
or in each of those elements,
497
00:24:46,700 --> 00:24:48,840
but we can also think about this
498
00:24:48,840 --> 00:24:52,640
simply being a different way of representing data.
499
00:24:52,640 --> 00:24:56,240
So basically a different way of creating a table.
500
00:24:56,240 --> 00:24:59,350
And so I decided to include it in this group,
501
00:24:59,350 --> 00:25:02,493
along with these other more regular looking tables.
502
00:25:03,560 --> 00:25:06,250
Then we also have pricing tables
503
00:25:06,250 --> 00:25:08,350
and these are very important
504
00:25:08,350 --> 00:25:13,330
and also very, very common on all marketing pages.
505
00:25:13,330 --> 00:25:16,650
So on pages for products or services,
506
00:25:16,650 --> 00:25:20,250
that need to charge some money basically.
507
00:25:20,250 --> 00:25:21,710
So a pricing table
508
00:25:21,710 --> 00:25:24,420
usually has a couple of different columns,
509
00:25:24,420 --> 00:25:27,870
each column for one different pricing plan.
510
00:25:27,870 --> 00:25:30,240
And then each of the columns has a title
511
00:25:30,240 --> 00:25:33,220
for the pricing plan then some description,
512
00:25:33,220 --> 00:25:36,570
a price, all the features that are included,
513
00:25:36,570 --> 00:25:39,060
and usually also some kind of button
514
00:25:39,060 --> 00:25:43,110
to sign up for each of the pricing plans.
515
00:25:43,110 --> 00:25:46,140
Now, many times also the most popular one
516
00:25:46,140 --> 00:25:49,210
is highlighted just as I had mentioned
517
00:25:49,210 --> 00:25:51,280
in some other lecture, I think.
518
00:25:51,280 --> 00:25:52,113
So that's the one
519
00:25:52,113 --> 00:25:54,853
that they want the user to choose basically.
520
00:25:55,830 --> 00:25:57,490
So here are some more examples
521
00:25:57,490 --> 00:26:01,070
and three of them are a little bit different, actually.
522
00:26:01,070 --> 00:26:03,960
So we can say they are a bit more creative
523
00:26:03,960 --> 00:26:06,460
and also a bit more simple.
524
00:26:06,460 --> 00:26:11,460
And finally component number 18 are modal windows.
525
00:26:11,490 --> 00:26:13,870
Now the ones that we see here on this page
526
00:26:13,870 --> 00:26:17,100
is what I actually call functional model windows,
527
00:26:17,100 --> 00:26:18,990
because they are actually important
528
00:26:18,990 --> 00:26:22,000
for the application or the site itself.
529
00:26:22,000 --> 00:26:24,560
So for displaying the data of the site
530
00:26:24,560 --> 00:26:27,190
or for example, to allow a user
531
00:26:27,190 --> 00:26:31,260
to actually sign in or sign up for the service.
532
00:26:31,260 --> 00:26:32,710
Then on the other hand,
533
00:26:32,710 --> 00:26:37,350
we also have these more annoying marketing model windows.
534
00:26:37,350 --> 00:26:39,050
So these are usually the ones
535
00:26:39,050 --> 00:26:42,010
that want to have your email address
536
00:26:42,010 --> 00:26:45,490
and want to basically give you something in return.
537
00:26:45,490 --> 00:26:49,360
Well, actually one of them here is not like that
538
00:26:49,360 --> 00:26:51,970
but at least the two ones on the left,
539
00:26:51,970 --> 00:26:54,750
they are clearly the marketing pop-up windows
540
00:26:54,750 --> 00:26:58,410
that I'm sure you have encountered all the time
541
00:26:58,410 --> 00:27:00,650
and which are really annoying,
542
00:27:00,650 --> 00:27:04,130
but still they are a valid component that we can use.
543
00:27:04,130 --> 00:27:06,010
And so here, once again,
544
00:27:06,010 --> 00:27:09,230
I wanted you to get some inspiration
545
00:27:09,230 --> 00:27:12,080
and with this, we finished this lecture,
546
00:27:12,080 --> 00:27:14,700
which is really mostly a gallery
547
00:27:14,700 --> 00:27:16,960
of all these different components.
548
00:27:16,960 --> 00:27:20,420
So that was the most important thing for this lecture.
549
00:27:20,420 --> 00:27:21,350
And also of course,
550
00:27:21,350 --> 00:27:24,660
the whole process of how actually a page
551
00:27:24,660 --> 00:27:29,390
is designed from element all the way to a final layout.
552
00:27:29,390 --> 00:27:30,670
Now in the next lecture,
553
00:27:30,670 --> 00:27:33,320
we will actually take one of these components,
554
00:27:33,320 --> 00:27:35,480
which is the accordion component
555
00:27:35,480 --> 00:27:39,470
and build one using HTML and CSS.
556
00:27:39,470 --> 00:27:42,130
So we're finally gonna be back to code.
557
00:27:42,130 --> 00:27:45,793
And so I can't wait to do that and to see you there.
41979
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.