Instructor: Welcome to the topic of white space.
Now, white space is technically invisible,
but it's still actually one of the easiest
and fastest ways of drastically improving your designs.
So let's now go ahead and learn how to do that.
So white space is, basically, simply space between elements,
but the right amount of white space
can make our designs look clean, modern and polished,
and even more important, easy for the user to understand.
Just look at this design, which has very little
to no white space at all.
So the entire content here looks very cramped,
and it doesn't look clean at all, and our eyes
do not really know how to navigate this page
due to the lack of all the space.
However, fortunately, it is very easy to fix this
simply by adding some white space to the design.
So now it does look quite modern and polished,
and we can feel that somehow the design
has some space to breathe.
So this is, in fact, a dramatic improvement
over the first version on the left side.
But why exactly is white space so important?
Well, white space automatically communicates
how the different pieces of information in our layout
are related to one another.
And so by doing this, white space creates
invisible relationships between the elements of the layout,
which automatically makes it easy for the user
to navigate that layout completely, intuitively.
Okay, and so now that we know what white space is
and why it's important, let's quickly learn how to use it.
So, first of all, we should use
a ton of white space between our sections.
And going back to our previous example here,
we can see that the designer did indeed add
a lot of white space between these sections.
So 192 pixels is a lot of space,
but it is actually not too much.
I think it does look quite right like this.
And the same in this other design example here,
where, again, there is a lot of white space
between the sections.
In this case, it's just 140 and 160 pixels,
but of course, this will depend on many different aspects.
You cannot just, like, fix a number
and then use that value of white space
in all of your designs, okay?
Now, the next place where you need to use white space
is between groups of elements.
So use a lot of white space there as well,
but of course, not as much white space as between sections.
So here, for example, we have these different groups
of elements, which we can clearly outline,
and so between these,
there is some white space, of course.
And it is not little white space.
So we have 96 there between the heading,
and then at first block of content,
and then there is 152 pixels between these two rows.
So it looks like it's a lot of space,
but again, this is actually exactly the space
that is needed to make this look clean and polished.
And going now to our other example, here again,
we can easily see the different pieces of content,
so, like these groups of elements
where there are 24 pixels between all of them.
So a little bit less here, but of course,
once again, this will depend on many different factors.
Now we usually focus more on vertical white space,
but it's important to also think
about horizontal white space, for example,
like, between these columns here.
So usually, vertically, we need
a lot more space than horizontally
as a general guideline, all right?
Now here, I actually have another example,
which is this one.
And again, we can easily distinguish
between the different groups of elements,
and so of course, there has got to be some white space
between them, and the same here in this other example.
So again, two groups of elements here,
and then we need to separate them visually,
simply by adding some white space in the form of margin,
for example, in CSS.
Now next step, of course, we also need white space
simply between the smaller elements.
So going back here to all of three previous examples,
you have some white space here,
as you can see by these arrows,
then also a lot of white space visible in this example,
and finally, it's also easy to see here in this final one.
And once you're aware of this, you will start seeing
this white space on every well-designed website
that you visit.
So it's something that every website
that has a decent design will use a lot.
Now another guideline that I can give you
is that inside of groups of elements,
you should always try to use white space instead of lines.
So using lines might look something like this,
and this is actually a mistake
that many designers tend to make.
So they think that in order to basically distinguish
between elements, they need to add some visual lines.
So just like in this example.
While, actually, it looks way better
and way more modern and more clean
to simply add some space between the elements.
Right?
So here, you can still clearly see
which elements belong together
but all without using this ugly-looking lines.
And so if you're trying to create a modern-looking design,
then this is always the way to go.
Okay, so now you know
where you should actually use white space,
but how much should you use?
Well, let's find out with some more guidelines here.
So basically, elements that belong together
should be closer together in our interface.
So half less spacing between them
because that will distinguish them
from other surrounding elements or groups of elements.
And what I just described
actually has something like an official name,
which is the law of proximity.
All right?
Now, on the other hand, of course,
if elements are not closely related to one another,
then they should be further apart
so that the user intuitively perceives
that a certain element or groups of elements
are unrelated to another group of elements.
So again, all of this is the law of proximity,
and this should be the guiding principle
when you define how much white space you're going to use
between elements or groups of elements.
So of course, there are some examples here.
And here, we have way too little white space.
So this is all packed together very closely,
and the relationship between these elements
is not really visible.
But on the other hand, here it is,
much better.
So the title and the text kind of belong together,
and so the spacing between them
is a lot less than the space
that's between the icon and the title.
And so this is the law of proximity in action.
Now another example is this forum right here,
which has some ambiguous spacing.
So here on the left side, this text labels
are kind of in between two input fields, right?
And so, like this, the user has a hard time of knowing
which input field actually each label belongs to.
However, if we remove the white space
and place the label close to the input field
that it actually belongs to, we can remove that ambiguity,
and therefore, help the user navigate this contact form.
And since this is so important, let's check out
another example right here.
So on the left side, it doesn't really make sense
why this Learn More button is so far away
from that text that it is actually about.
So for some reason, it's closer to those links
down there at the bottom, but again,
that doesn't make much sense.
And so why should that button be closer to that
and not be closer to the text that it's actually about?
And so fixing that is very simple
like we did here on the right side.
So now the Learn More button is closer
to what it belongs to, and so like this,
it looks more natural and makes it all easier to understand.
Now, next up, there is a guideline
that many beginners find helpful when designing white space,
which is basically to start with too much white space,
and then from there, remove some space until it looks right.
And again, of course, by doing that,
we need to have the guiding principle
of the law of proximity, and we also need to be aware
that too much white space looks detached,
while having too little white space
of course makes the design look cramped.
So here, in this example, we actually tried that.
And so we added way too much space.
And actually, right now,
everything looks kind of detached.
So this is not good.
And so in order to fix that,
let's say that we actually removed most of the white space,
but then it looked way too cramped,
and we can also say that it even looks uninviting
to read this text in the first place.
So it looks like just a wall of text,
which many times users do not like to read.
But then after experimenting around a little bit
and adding back some of the white space,
we may end up with a result like this,
which looks just right.
So here, we can feel that the design can breathe,
and everything is not too detached but also not too cramped.
So like this, it's perfect.
And next, another guideline that might help you choose
just the right amount of white space for your design
is that you should try to match all the other design choices
when it comes to white space.
So for example, if you have big text or big icons,
for example, then you will need more white space.
So just like in this first example,
here, the text is huge.
And so we see, there is actually a lot of blank space here
on this page, and also between the groups of elements,
there is quite some white space there.
Now if you compare this to the design on the right side,
here, the text and the images are all quite small,
and so therefore, there is also a lot less space.
So it would certainly look kind of unnatural
if with this small content, you would add
a lot of white space between them.
That just wouldn't feel right. Okay?
And so, again, you need to a little bit try
to adjust your white space to all the other design choices
that you already took.
And now, finally, when it comes
to actually choosing the values for your white space in CSS,
you can try to follow a hard rule
just like we have been doing with the font sizes.
Now, of course, you should not use the same rule
as we used in typography because that one
is especially adapted for text, but instead,
you can use a rule like this one, which only uses multiples
of 16 pixels for all the margins and paddings
that we apply on a page.
Now you will also need to add some smaller values
like two, and four, and eight, and 12 pixels,
but in general, from there on,
all the other values are multiples of 16 pixels,
and some of them are even skipped
just in order to limit your choices.
So it's the same idea as before with the font sizes
where I mentioned that limiting your choices
is actually a good idea.
So it sounds like a limitation, but it's actually great,
because having to constantly think about what spacing
we want to use can be really tiring.
But if we have a system like this in place,
then we can just choose a value,
and if that one doesn't fit, then we go for the next one.
And this one, believe me,
will be even easier to use than the one for font sizes.
So this makes designing much, much easier and faster,
especially for beginners.
And so we will use exactly this rule in our big project,
and actually, also in one that we are doing in this section.
However, before we go doing that,
we will have another lecture
in which we're gonna talk about visual hierarchy.
And so let's move there right now.