Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,270 --> 00:00:03,240
Now before we can learn about
2
00:00:03,240 --> 00:00:06,150
the different web design rules one by one,
3
00:00:06,150 --> 00:00:08,240
we need to start by talking about
4
00:00:08,240 --> 00:00:12,650
what web design actually is, why it's so important,
5
00:00:12,650 --> 00:00:17,313
and also why and how everyone can learn good web design.
6
00:00:19,570 --> 00:00:20,900
So, first of all,
7
00:00:20,900 --> 00:00:23,450
we need to distinguish between web design
8
00:00:23,450 --> 00:00:25,530
and web development.
9
00:00:25,530 --> 00:00:28,950
So basically web designers are who create
10
00:00:28,950 --> 00:00:32,370
the overall look and feel of websites.
11
00:00:32,370 --> 00:00:33,850
While on the other hand,
12
00:00:33,850 --> 00:00:37,900
web developers are the ones who then implement the design
13
00:00:37,900 --> 00:00:42,590
using HTML, CSS, and JavaScript code.
14
00:00:42,590 --> 00:00:43,950
Now, back in the day,
15
00:00:43,950 --> 00:00:48,200
designers only designed using some web design program,
16
00:00:48,200 --> 00:00:52,290
such as Sketch, Figma, or Photoshop.
17
00:00:52,290 --> 00:00:55,040
The developer would then take that design,
18
00:00:55,040 --> 00:00:58,570
and implement it in code using some software
19
00:00:58,570 --> 00:01:01,200
such as VSCode, so that in the end,
20
00:01:01,200 --> 00:01:05,610
the website could be displayed for the user in a browser.
21
00:01:05,610 --> 00:01:08,820
However, nowadays there are also many designers
22
00:01:08,820 --> 00:01:12,530
who code and many developers who design.
23
00:01:12,530 --> 00:01:14,730
And so the goal of this section
24
00:01:14,730 --> 00:01:18,550
is to transform you to a developer who also designs.
25
00:01:18,550 --> 00:01:23,200
So that basically you can become a designer and a developer
26
00:01:23,200 --> 00:01:25,260
who can write, and build,
27
00:01:25,260 --> 00:01:29,120
and design websites only using code.
28
00:01:29,120 --> 00:01:31,470
So our focus in this course
29
00:01:31,470 --> 00:01:35,270
will of course be learning HTML and CSS,
30
00:01:35,270 --> 00:01:37,600
so basically writing code,
31
00:01:37,600 --> 00:01:38,780
but in my opinion,
32
00:01:38,780 --> 00:01:41,540
a modern web developer should also be able
33
00:01:41,540 --> 00:01:45,090
to create simple and good looking designs.
34
00:01:45,090 --> 00:01:47,840
And so that's what I want to teach you in this section.
35
00:01:49,060 --> 00:01:51,170
But first let's explore a little bit
36
00:01:51,170 --> 00:01:54,800
why design is actually so important.
37
00:01:54,800 --> 00:01:58,460
So, when a user visits a well-designed website
38
00:01:58,460 --> 00:02:00,240
or web application,
39
00:02:00,240 --> 00:02:03,060
then that good design immediately creates
40
00:02:03,060 --> 00:02:06,940
a lasting good impression of the brand or the product
41
00:02:06,940 --> 00:02:09,430
that is behind that website.
42
00:02:09,430 --> 00:02:12,400
However, if the site was badly designed,
43
00:02:12,400 --> 00:02:14,550
then the user would believe that the brand
44
00:02:14,550 --> 00:02:17,580
doesn't really care about the product or the service
45
00:02:17,580 --> 00:02:19,190
that they're offering.
46
00:02:19,190 --> 00:02:22,160
And so when you build a website, of course,
47
00:02:22,160 --> 00:02:26,210
you do not want to create that impression, right?
48
00:02:26,210 --> 00:02:30,790
Also good design makes the user trust the brand right away.
49
00:02:30,790 --> 00:02:32,160
While on the other hand,
50
00:02:32,160 --> 00:02:35,840
a website with bad design makes the user insecure
51
00:02:35,840 --> 00:02:39,820
about even trusting that company or the brand.
52
00:02:39,820 --> 00:02:43,270
Another really important reason for investing a lot of time
53
00:02:43,270 --> 00:02:46,310
and effort into a well-designed product
54
00:02:46,310 --> 00:02:50,090
is that good design increases the perceived value
55
00:02:50,090 --> 00:02:54,360
of the brand or the product that the user is visiting
56
00:02:54,360 --> 00:02:58,620
while bad design simply makes the brand look kind of cheap.
57
00:02:58,620 --> 00:03:01,460
And I'm sure you have experienced this yourself,
58
00:03:01,460 --> 00:03:02,920
when you, for example,
59
00:03:02,920 --> 00:03:07,810
checkout two competing websites of two competing products.
60
00:03:07,810 --> 00:03:11,500
So probably you get a better impression of the product
61
00:03:11,500 --> 00:03:13,550
that has the good looking website,
62
00:03:13,550 --> 00:03:15,850
and you also trust the brand more,
63
00:03:15,850 --> 00:03:20,200
and kind of feel that that product is worth more.
64
00:03:20,200 --> 00:03:23,010
At least for me, it sure works like this.
65
00:03:23,010 --> 00:03:25,760
And there's a lot of research indicating
66
00:03:25,760 --> 00:03:28,670
that this is how it works for the general users.
67
00:03:28,670 --> 00:03:31,180
And so again, it's really, really important
68
00:03:31,180 --> 00:03:35,590
that you, or your company, or whoever you're working for
69
00:03:35,590 --> 00:03:38,430
invest in really good design for their websites
70
00:03:38,430 --> 00:03:40,760
and web applications.
71
00:03:40,760 --> 00:03:43,570
Finally, good design also gives users
72
00:03:43,570 --> 00:03:46,410
exactly what they were actually looking for
73
00:03:46,410 --> 00:03:50,160
when they decided to come to the site in the first place.
74
00:03:50,160 --> 00:03:53,900
For example, let's say you're looking to buy a TV.
75
00:03:53,900 --> 00:03:54,990
So in that case,
76
00:03:54,990 --> 00:03:57,540
you want that webpage for the TV
77
00:03:57,540 --> 00:04:01,130
to give you all the information as fast as possible.
78
00:04:01,130 --> 00:04:03,350
And so for that, it's important that the page
79
00:04:03,350 --> 00:04:05,070
is well designed.
80
00:04:05,070 --> 00:04:08,330
You don't want to be confused, and have to leave the page,
81
00:04:08,330 --> 00:04:11,170
because you cannot reach your goal, right?
82
00:04:11,170 --> 00:04:15,980
And that's what would happen if the page was badly designed.
83
00:04:15,980 --> 00:04:17,880
Okay, and I hope that with this,
84
00:04:17,880 --> 00:04:20,200
I could convince you that design
85
00:04:20,200 --> 00:04:22,450
can not just be an afterthought.
86
00:04:22,450 --> 00:04:25,670
It needs to be central to building any product,
87
00:04:25,670 --> 00:04:28,713
so any website or any web application.
88
00:04:31,100 --> 00:04:33,330
Now, many people are already aware
89
00:04:33,330 --> 00:04:36,000
about how important web design is.
90
00:04:36,000 --> 00:04:38,580
However, they will say something like,
91
00:04:38,580 --> 00:04:43,210
oh, I'm not creative, or well, I'm not an artist,
92
00:04:43,210 --> 00:04:46,300
and so I could never learn design.
93
00:04:46,300 --> 00:04:49,860
However, in my opinion, that is not really true,
94
00:04:49,860 --> 00:04:54,010
because good web design is actually not subjective,
95
00:04:54,010 --> 00:04:57,390
and has not much to do with creativity.
96
00:04:57,390 --> 00:04:59,100
For example, I, myself,
97
00:04:59,100 --> 00:05:02,220
couldn't be any further from being an artist,
98
00:05:02,220 --> 00:05:05,150
and I'm also not particularly creative,
99
00:05:05,150 --> 00:05:08,710
but still I can design a decent looking interface
100
00:05:08,710 --> 00:05:12,170
by following a simple framework or a system
101
00:05:12,170 --> 00:05:15,650
such as the one that I want to teach you in this course.
102
00:05:15,650 --> 00:05:18,180
And so I really believe that anyone
103
00:05:18,180 --> 00:05:20,140
can learn good web design.
104
00:05:20,140 --> 00:05:21,740
You don't need to be creative,
105
00:05:21,740 --> 00:05:23,880
and you don't need to be an artist.
106
00:05:23,880 --> 00:05:26,390
All you need to do is to learn some rules
107
00:05:26,390 --> 00:05:29,870
and some guidelines along with some system
108
00:05:29,870 --> 00:05:32,530
that you then need to follow in order to build
109
00:05:32,530 --> 00:05:35,993
a nice looking interface for your own projects.
110
00:05:36,860 --> 00:05:39,240
Now, what kind of framework or system
111
00:05:39,240 --> 00:05:42,513
will I actually teach you, and how am I gonna do that?
112
00:05:43,370 --> 00:05:47,870
Well, what I did was to analyze hundreds or maybe thousands
113
00:05:47,870 --> 00:05:50,940
of really well-designed websites.
114
00:05:50,940 --> 00:05:54,900
So I carefully analyzed and deconstructed the design
115
00:05:54,900 --> 00:05:56,670
of all these websites,
116
00:05:56,670 --> 00:05:59,510
and then distilled everything that I learned
117
00:05:59,510 --> 00:06:03,220
into a couple of rules that are easy for you to learn,
118
00:06:03,220 --> 00:06:07,050
and even more importantly, easy to apply.
119
00:06:07,050 --> 00:06:10,820
Now, these rules are divided into nine different areas
120
00:06:10,820 --> 00:06:14,740
of web design, which I call the ingredients.
121
00:06:14,740 --> 00:06:18,720
And you will see what the ingredients are in a minute.
122
00:06:18,720 --> 00:06:22,150
But what matters is that there are many different rules
123
00:06:22,150 --> 00:06:24,130
for each of these ingredients,
124
00:06:24,130 --> 00:06:26,090
and once you have the rules,
125
00:06:26,090 --> 00:06:29,440
you will then be able to apply them to any website
126
00:06:29,440 --> 00:06:33,760
based on something that I call the website personality,
127
00:06:33,760 --> 00:06:37,320
but more about that also a bit later in this lecture.
128
00:06:37,320 --> 00:06:39,860
For now, let's take a look at what I call
129
00:06:39,860 --> 00:06:42,313
the ingredients of web design.
130
00:06:43,890 --> 00:06:48,410
So web design ingredients probably sounded a bit abstract.
131
00:06:48,410 --> 00:06:50,970
And so let me now show you what I'm talking about
132
00:06:50,970 --> 00:06:53,860
in this well-designed website.
133
00:06:53,860 --> 00:06:56,800
So the first ingredient is typography,
134
00:06:56,800 --> 00:07:00,083
which is all about formatting and designing text.
135
00:07:00,920 --> 00:07:05,220
Then the next one is colors, which is another crucial part.
136
00:07:05,220 --> 00:07:09,410
And then we're gonna talk about images and illustrations,
137
00:07:09,410 --> 00:07:12,120
which are another fundamental aspect
138
00:07:12,120 --> 00:07:15,170
that any website cannot miss.
139
00:07:15,170 --> 00:07:18,390
So there can not be a website without images.
140
00:07:18,390 --> 00:07:22,140
And so there are rules about how we can actually use images
141
00:07:22,140 --> 00:07:24,070
in an effective way.
142
00:07:24,070 --> 00:07:27,410
Also many modern websites have icons,
143
00:07:27,410 --> 00:07:30,520
and so we also need to talk about that,
144
00:07:30,520 --> 00:07:34,403
as well as about shadows and border radius.
145
00:07:35,340 --> 00:07:36,890
Now border radius,
146
00:07:36,890 --> 00:07:39,470
which is basically the general roundness
147
00:07:39,470 --> 00:07:41,650
of the elements on the page
148
00:07:41,650 --> 00:07:44,300
might seem a little bit insignificant,
149
00:07:44,300 --> 00:07:46,640
but actually it's not.
150
00:07:46,640 --> 00:07:50,070
So a different border radius actually give a website
151
00:07:50,070 --> 00:07:52,093
completely different looks and feels.
152
00:07:52,940 --> 00:07:55,670
Next up, we will talk about white space,
153
00:07:55,670 --> 00:07:58,610
and also to the very closely related topic,
154
00:07:58,610 --> 00:08:01,250
that is visual hierarchy.
155
00:08:01,250 --> 00:08:05,230
Finally, we will also have a lecture on user experience,
156
00:08:05,230 --> 00:08:08,570
and also about components and layouts.
157
00:08:08,570 --> 00:08:10,750
So basically we're gonna learn
158
00:08:10,750 --> 00:08:14,430
how you can use different components and types of layouts
159
00:08:14,430 --> 00:08:17,430
to represent different kinds of information.
160
00:08:17,430 --> 00:08:20,170
And here we're gonna have a lot of different examples,
161
00:08:20,170 --> 00:08:22,890
and different types of components.
162
00:08:22,890 --> 00:08:24,430
And this lecture actually,
163
00:08:24,430 --> 00:08:26,660
we're gonna leave for the next section,
164
00:08:26,660 --> 00:08:29,420
because this is a special kind of ingredient
165
00:08:29,420 --> 00:08:31,740
where there aren't really any rules,
166
00:08:31,740 --> 00:08:35,370
but it's still affected by the website personality.
167
00:08:35,370 --> 00:08:38,010
And so I'm listing that here as well.
168
00:08:38,010 --> 00:08:40,970
And speaking about the website personality,
169
00:08:40,970 --> 00:08:43,730
this is a concept that I came up with,
170
00:08:43,730 --> 00:08:45,293
and it will make it so
171
00:08:45,293 --> 00:08:47,630
that we will take the design decisions
172
00:08:47,630 --> 00:08:49,720
for each of these ingredients
173
00:08:49,720 --> 00:08:53,220
based on that website personality.
174
00:08:53,220 --> 00:08:56,890
Now, there is a whole lecture about website personalities
175
00:08:56,890 --> 00:08:59,000
at the end of this section,
176
00:08:59,000 --> 00:09:01,190
but for now let's finish this lecture
177
00:09:01,190 --> 00:09:04,650
by getting an overview about each of the seven
178
00:09:04,650 --> 00:09:06,603
different website personalities.
179
00:09:08,280 --> 00:09:13,110
The first personality is the serious or elegant personality,
180
00:09:13,110 --> 00:09:17,350
which we can use to convey luxury and elegance.
181
00:09:17,350 --> 00:09:20,960
And we do that by using thin serif typefaces,
182
00:09:20,960 --> 00:09:25,433
golden or pastel colors, and high big quality images.
183
00:09:27,070 --> 00:09:29,090
Next up there is the minimalist
184
00:09:29,090 --> 00:09:31,980
or simple website personality.
185
00:09:31,980 --> 00:09:36,160
And this one focuses mainly on the important text content,
186
00:09:36,160 --> 00:09:40,720
and uses small or medium-sized black text.
187
00:09:40,720 --> 00:09:43,590
Many times it uses some lines as well,
188
00:09:43,590 --> 00:09:46,460
and very few images and icons.
189
00:09:46,460 --> 00:09:49,063
And if they have icons, they are very small.
190
00:09:49,980 --> 00:09:53,460
Next, there is the plain or neutral personality,
191
00:09:53,460 --> 00:09:55,080
which is used many times
192
00:09:55,080 --> 00:09:58,150
in big and well established corporations,
193
00:09:58,150 --> 00:10:01,100
such as Microsoft or Adobe.
194
00:10:01,100 --> 00:10:04,440
And in this personality, the design gets out of the way
195
00:10:04,440 --> 00:10:07,440
by using neutral and small typefaces,
196
00:10:07,440 --> 00:10:09,623
and a very structured layout.
197
00:10:10,660 --> 00:10:14,330
Then we have the bold or confident personality,
198
00:10:14,330 --> 00:10:19,130
which makes an impact by featuring big and bold typography
199
00:10:19,130 --> 00:10:22,590
together with bright and big color blocks
200
00:10:22,590 --> 00:10:25,393
like the ones you see here on this page.
201
00:10:26,240 --> 00:10:30,230
Now personality number five is the opposite of this one,
202
00:10:30,230 --> 00:10:33,510
which is calm and peaceful.
203
00:10:33,510 --> 00:10:37,420
So this one is used many times for products and services
204
00:10:37,420 --> 00:10:39,120
that try to convey the idea
205
00:10:39,120 --> 00:10:41,270
that they care about the consumer.
206
00:10:41,270 --> 00:10:44,570
And they do this by using calming pastel colors,
207
00:10:44,570 --> 00:10:47,760
like these background colors on this page,
208
00:10:47,760 --> 00:10:50,820
and also soft serif headings together
209
00:10:50,820 --> 00:10:53,020
with images and illustrations
210
00:10:53,020 --> 00:10:57,020
that match the typeface or the colors.
211
00:10:57,020 --> 00:10:59,560
Now next up there is the very important
212
00:10:59,560 --> 00:11:02,660
start-up and upbeat personality.
213
00:11:02,660 --> 00:11:03,940
And as the name says,
214
00:11:03,940 --> 00:11:07,400
this one is used a lot in startup companies.
215
00:11:07,400 --> 00:11:09,550
And this website personality
216
00:11:09,550 --> 00:11:13,110
uses modern looking sans-serif typefaces,
217
00:11:13,110 --> 00:11:16,420
light grey text and backgrounds together
218
00:11:16,420 --> 00:11:18,930
with rounded elements.
219
00:11:18,930 --> 00:11:23,930
Finally, to finish there is the playful or fun personality,
220
00:11:24,370 --> 00:11:27,990
which consists of colorful and round designs,
221
00:11:27,990 --> 00:11:32,240
which are created basically by using creative elements,
222
00:11:32,240 --> 00:11:35,790
such as hand-drawn icons or illustrations,
223
00:11:35,790 --> 00:11:37,580
lots of animations,
224
00:11:37,580 --> 00:11:40,540
and also the language of the content itself
225
00:11:40,540 --> 00:11:44,950
helps to convey the playful or fun personality.
226
00:11:44,950 --> 00:11:47,500
Okay, so this was just an overview
227
00:11:47,500 --> 00:11:50,440
of the different website personalities,
228
00:11:50,440 --> 00:11:54,240
but again, the idea is that different design decisions,
229
00:11:54,240 --> 00:11:57,200
for example, in colors, or typography,
230
00:11:57,200 --> 00:11:59,870
or images that are gonna be used
231
00:11:59,870 --> 00:12:03,670
will depend on what website personality you want
232
00:12:03,670 --> 00:12:05,370
for your design.
233
00:12:05,370 --> 00:12:08,560
Because as you hopefully got from this overview,
234
00:12:08,560 --> 00:12:11,470
different types of products or websites
235
00:12:11,470 --> 00:12:15,370
require completely different website personalities.
236
00:12:15,370 --> 00:12:18,020
So we will have to keep that in mind,
237
00:12:18,020 --> 00:12:20,920
but again, we will talk later about this.
238
00:12:20,920 --> 00:12:24,240
So for now we want to study the rules for each
239
00:12:24,240 --> 00:12:27,730
of the design ingredients that we learned about earlier.
240
00:12:27,730 --> 00:12:30,990
And so let's now go do that in the next lecture,
241
00:12:30,990 --> 00:12:33,033
starting with typography.
18374
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.