Original subtitles

Welcome to the topic of whitespace.

Now whitespace 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 whitespace is basically simply space between elements,

but the right amount of whitespace 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 whitespace 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 this space.

However, fortunately,

it is very easy to fix this simply by adding

some whitespace 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 whitespace so important?

Well, whitespace automatically communicates

how the different pieces of information in our layout

are related to one another.

And so by doing this whitespace 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 whitespace is

and why it's so important,

let's quickly learn how to use it.

So, first of all,

we should use a ton of whitespace between our sections.

And going back to our previous example here,

we can see that the designer did indeed add

a lot of whitespace between the 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.

At the same in this other design example here,

where again, there is a lot of whitespace

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 whitespace

in all of your designs.

Okay?

Now the next place where you need to use whitespace

is between groups of elements.

So use a lot of whitespace there as well,

but of course not as much whitespace 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 whitespace, of course,

and it is not little whitespace.

So we have 96 there between the heading

and then that 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 this 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 whitespace,

but it's important to also think about

horizontal whitespace,

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 whitespace

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 whitespace

in the form of margin for example, in CSS.

Now next up, of course,

we also need whitespace simply between the smaller elements.

So going back here to all our three previous examples,

you have some whitespace here,

as you can see by these arrows,

then also a lot of whitespace 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 whitespace

on every well-designed website that you visit.

So it's something that every website

that has a decent design we'll use a lot.

Now, another guideline that I can give you is that

inside of groups of elements,

you should always try to use whitespace instead of lines.

So using lines might look something like this,

and this is actually a mistake

that many beginner 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 these 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 whitespace,

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 have 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 whitespace 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 whitespace.

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 form right here,

which has some ambiguous spacing.

So here on the left side,

these 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 removed the whitespace

and placed 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 whitespace,

which is basically to start with too much whitespace

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 whitespace

looks detached while having too little whitespace,

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 whitespace,

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 whitespace,

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 whitespace for your design is

that you should try to match all the other design choices

when it comes to whitespace.

So for example, if you have big texts or big icons

for example, then you will need more whitespace.

So just like in this first example,

here the text is huge

and so we see there's actually a lot of blank space

here on this page and also between the groups of elements

there is quiet some whitespace 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 whitespace between them.

That just wouldn't feel right.

Okay?

And so again,

you need to a little bit try to adjust your whitespace

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 specially 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 2 and 4 and 8 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 the 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 the 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.