Instructor: 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 is 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 the one on the left side.
Now of course, there are also other factors
that play into that perception,
like the typography 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 round.
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 the 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 added 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 the 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 stand out
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.