Original subtitles

Moving on in our design section,

our next topic is about border-radius

and roundness in general.

Now it might seem that border-radius

is a pretty insignificant detail,

however, actually it is pretty important

because the amount of border-radius that we give

to our elements has a big effect on the seriousness

or playfulness of any design.

So as I already hinted at here at the very beginning,

we can use border-radius to basically increase

the playfulness and fun of the design

by making it at the same time less serious.

So here's what I just said.

So the less border-radius we have,

the more serious or elegant a design can be perceived.

On the other hand, if we add a lot of border-radius

to our elements, then that design

will automatically look more playful and more fun.

And so I think that you can agree with the fact that

this design on the right side looks a lot more playful

and a lot less serious than one on the left side.

Now, of course, there are also other factors that play

into that perception like the topography and the colors

that are used on the left side,

but nonetheless, border-radius

is still a very important ingredient that we can use

to make any design look less serious

or on the other hand, if we simply don't use it,

we can make a design look more serious or more elegant.

Now, in order to actually choose

the amount of border-radius,

a good indicator of that is the typeface.

So the typeface that you choose will already have

a certain roundness.

And so you can kind of make the border-radius match

that roundness.

For example, in this design right here,

the typeface is pretty rant,

and so we have those rounded corners on the image,

we have the button also completely round actually,

and then we even have those icons wrapped inside of circles.

And by doing that,

the designer here really added a lot of roundness

to the overall design, not just in a typeface,

but also in these other design elements.

And therefore that takes away a lot of the elegance

and makes us all a little bit more playful

and more inviting at the end of the day as well.

Now, on the other hand, we have this very boxy typeface,

which is actually also inter,

so the one that we used in our current very small project.

And so in this example,

the designer edit just a tiny bit of border-radius

to these buttons in order to still add

a little bit of playfulness to the design.

Now, next up, let's talk about

where we can actually use border-radius

and the first elements that use border-radius the most,

I would say, are buttons.

And on buttons, we have to option

of adding only a small amount of border-radius,

just enough to kind of take away the hard edges there.

Or on the other hand, we can make the buttons

completely round like these first three here,

or we can even use some creativity

and make only some of the corners round

and leaving the other ones with their sharp edge.

Now another great candidate are images.

So it's pretty common to use border-radius on images

like we see here.

And if we take that to the extreme,

we can make them also completely round

like we have it here in the center.

Then around icons is also pretty common.

And here again, we have those two options

of only making them slightly round,

so taking off the edge there basically.

And then like I also showed you before,

we can make the icons completely enclosed

inside of a circle.

Next border-radius is also used on some sections

that we want to standout.

So a little bit like a shadow as well.

And finally, also some other kind of random elements

can always use some border-radius.

So here are just a couple of more elements that I found

when researching the course that use some border-radius

in some form or another.

And so I hope that these examples can help you

to find some inspiration along, of course,

with all the other ones that I showed you in this lecture.

And that's actually already enough for this lecture.

So in the next one, we will now learn

how to actually apply border-radius using CSS.