Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,340 --> 00:00:04,040
Moving on in our design section,
2
00:00:04,040 --> 00:00:06,780
our next topic is about border-radius
3
00:00:06,780 --> 00:00:09,080
and roundness in general.
4
00:00:09,080 --> 00:00:11,560
Now it might seem that border-radius
5
00:00:11,560 --> 00:00:14,750
is a pretty insignificant detail,
6
00:00:14,750 --> 00:00:18,270
however, actually it is pretty important
7
00:00:18,270 --> 00:00:21,240
because the amount of border-radius that we give
8
00:00:21,240 --> 00:00:25,270
to our elements has a big effect on the seriousness
9
00:00:25,270 --> 00:00:28,083
or playfulness of any design.
10
00:00:30,430 --> 00:00:34,040
So as I already hinted at here at the very beginning,
11
00:00:34,040 --> 00:00:37,130
we can use border-radius to basically increase
12
00:00:37,130 --> 00:00:40,480
the playfulness and fun of the design
13
00:00:40,480 --> 00:00:43,513
by making it at the same time less serious.
14
00:00:44,400 --> 00:00:46,450
So here's what I just said.
15
00:00:46,450 --> 00:00:48,920
So the less border-radius we have,
16
00:00:48,920 --> 00:00:53,070
the more serious or elegant a design can be perceived.
17
00:00:53,070 --> 00:00:56,480
On the other hand, if we add a lot of border-radius
18
00:00:56,480 --> 00:00:58,940
to our elements, then that design
19
00:00:58,940 --> 00:01:02,900
will automatically look more playful and more fun.
20
00:01:02,900 --> 00:01:06,080
And so I think that you can agree with the fact that
21
00:01:06,080 --> 00:01:10,040
this design on the right side looks a lot more playful
22
00:01:10,040 --> 00:01:14,380
and a lot less serious than one on the left side.
23
00:01:14,380 --> 00:01:17,500
Now, of course, there are also other factors that play
24
00:01:17,500 --> 00:01:22,480
into that perception like the topography and the colors
25
00:01:22,480 --> 00:01:24,750
that are used on the left side,
26
00:01:24,750 --> 00:01:27,250
but nonetheless, border-radius
27
00:01:27,250 --> 00:01:30,450
is still a very important ingredient that we can use
28
00:01:30,450 --> 00:01:33,470
to make any design look less serious
29
00:01:33,470 --> 00:01:36,840
or on the other hand, if we simply don't use it,
30
00:01:36,840 --> 00:01:41,390
we can make a design look more serious or more elegant.
31
00:01:41,390 --> 00:01:43,050
Now, in order to actually choose
32
00:01:43,050 --> 00:01:44,950
the amount of border-radius,
33
00:01:44,950 --> 00:01:48,700
a good indicator of that is the typeface.
34
00:01:48,700 --> 00:01:51,340
So the typeface that you choose will already have
35
00:01:51,340 --> 00:01:52,900
a certain roundness.
36
00:01:52,900 --> 00:01:56,260
And so you can kind of make the border-radius match
37
00:01:56,260 --> 00:01:57,680
that roundness.
38
00:01:57,680 --> 00:02:00,380
For example, in this design right here,
39
00:02:00,380 --> 00:02:02,690
the typeface is pretty rant,
40
00:02:02,690 --> 00:02:06,110
and so we have those rounded corners on the image,
41
00:02:06,110 --> 00:02:10,270
we have the button also completely round actually,
42
00:02:10,270 --> 00:02:14,280
and then we even have those icons wrapped inside of circles.
43
00:02:14,280 --> 00:02:15,510
And by doing that,
44
00:02:15,510 --> 00:02:18,510
the designer here really added a lot of roundness
45
00:02:18,510 --> 00:02:21,600
to the overall design, not just in a typeface,
46
00:02:21,600 --> 00:02:24,377
but also in these other design elements.
47
00:02:24,377 --> 00:02:27,810
And therefore that takes away a lot of the elegance
48
00:02:27,810 --> 00:02:30,720
and makes us all a little bit more playful
49
00:02:30,720 --> 00:02:33,910
and more inviting at the end of the day as well.
50
00:02:33,910 --> 00:02:37,810
Now, on the other hand, we have this very boxy typeface,
51
00:02:37,810 --> 00:02:40,190
which is actually also inter,
52
00:02:40,190 --> 00:02:44,730
so the one that we used in our current very small project.
53
00:02:44,730 --> 00:02:46,270
And so in this example,
54
00:02:46,270 --> 00:02:49,450
the designer edit just a tiny bit of border-radius
55
00:02:49,450 --> 00:02:52,290
to these buttons in order to still add
56
00:02:52,290 --> 00:02:55,600
a little bit of playfulness to the design.
57
00:02:55,600 --> 00:02:57,500
Now, next up, let's talk about
58
00:02:57,500 --> 00:03:00,457
where we can actually use border-radius
59
00:03:00,457 --> 00:03:03,980
and the first elements that use border-radius the most,
60
00:03:03,980 --> 00:03:06,610
I would say, are buttons.
61
00:03:06,610 --> 00:03:09,030
And on buttons, we have to option
62
00:03:09,030 --> 00:03:12,500
of adding only a small amount of border-radius,
63
00:03:12,500 --> 00:03:16,890
just enough to kind of take away the hard edges there.
64
00:03:16,890 --> 00:03:19,380
Or on the other hand, we can make the buttons
65
00:03:19,380 --> 00:03:23,530
completely round like these first three here,
66
00:03:23,530 --> 00:03:25,960
or we can even use some creativity
67
00:03:25,960 --> 00:03:28,740
and make only some of the corners round
68
00:03:28,740 --> 00:03:32,410
and leaving the other ones with their sharp edge.
69
00:03:32,410 --> 00:03:35,360
Now another great candidate are images.
70
00:03:35,360 --> 00:03:38,840
So it's pretty common to use border-radius on images
71
00:03:38,840 --> 00:03:40,330
like we see here.
72
00:03:40,330 --> 00:03:42,320
And if we take that to the extreme,
73
00:03:42,320 --> 00:03:44,860
we can make them also completely round
74
00:03:44,860 --> 00:03:47,343
like we have it here in the center.
75
00:03:48,300 --> 00:03:51,550
Then around icons is also pretty common.
76
00:03:51,550 --> 00:03:53,446
And here again, we have those two options
77
00:03:53,446 --> 00:03:56,500
of only making them slightly round,
78
00:03:56,500 --> 00:03:59,740
so taking off the edge there basically.
79
00:03:59,740 --> 00:04:02,640
And then like I also showed you before,
80
00:04:02,640 --> 00:04:05,250
we can make the icons completely enclosed
81
00:04:05,250 --> 00:04:07,043
inside of a circle.
82
00:04:08,380 --> 00:04:11,920
Next border-radius is also used on some sections
83
00:04:11,920 --> 00:04:13,800
that we want to standout.
84
00:04:13,800 --> 00:04:17,570
So a little bit like a shadow as well.
85
00:04:17,570 --> 00:04:21,080
And finally, also some other kind of random elements
86
00:04:21,080 --> 00:04:23,950
can always use some border-radius.
87
00:04:23,950 --> 00:04:26,854
So here are just a couple of more elements that I found
88
00:04:26,854 --> 00:04:30,700
when researching the course that use some border-radius
89
00:04:30,700 --> 00:04:32,750
in some form or another.
90
00:04:32,750 --> 00:04:35,470
And so I hope that these examples can help you
91
00:04:35,470 --> 00:04:38,420
to find some inspiration along, of course,
92
00:04:38,420 --> 00:04:41,740
with all the other ones that I showed you in this lecture.
93
00:04:41,740 --> 00:04:45,650
And that's actually already enough for this lecture.
94
00:04:45,650 --> 00:04:47,680
So in the next one, we will now learn
95
00:04:47,680 --> 00:04:51,093
how to actually apply border-radius using CSS.
7221
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.