All language subtitles for 087 Web Design Rules #0 - Part 1_ Elements and Components.en_US
Afrikaans
Albanian
Amharic
Arabic
Armenian
Azerbaijani
Basque
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Cebuano
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Filipino
Finnish
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hausa
Hawaiian
Hebrew
Hindi
Hmong
Hungarian
Icelandic
Igbo
Indonesian
Irish
Italian
Japanese
Javanese
Kannada
Kazakh
Khmer
Korean
Kurdish (Kurmanji)
Kyrgyz
Lao
Latin
Latvian
Lithuanian
Luxembourgish
Macedonian
Malagasy
Malay
Malayalam
Maltese
Maori
Marathi
Mongolian
Myanmar (Burmese)
Nepali
Norwegian
Pashto
Persian
Polish
Portuguese
Punjabi
Romanian
Russian
Samoan
Scots Gaelic
Serbian
Sesotho
Shona
Sindhi
Sinhala
Slovak
Slovenian
Somali
Spanish
Sundanese
Swahili
Swedish
Tajik
Tamil
Telugu
Thai
Turkish
Ukrainian
Urdu
Uzbek
Vietnamese
Welsh
Xhosa
Yiddish
Yoruba
Zulu
Odia (Oriya)
Kinyarwanda
Turkmen
Tatar
Uyghur
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.