Voiceover: Let's talk about 2 2
another very important aspect of visual design: 3 3
How to design a layout using whitespace. 4 4
Every piece of good design uses whitespace well. 5 5
In fact, if you want to make a web site that looks designed, 6 6
you need a lot of whitespace in 7 7
the correct places on your site. 8 8
So, what is whitespace? 9 9
Whitespace is just space where there isn't any stuff. 10 10
Easy. 11 11
Whitespace absolutely is the key to create 12 12
a clean and simple look and feel. 13 13
This web site uses whitespace quite well. 14 14
Look at the space between the icons and the text, 15 15
the space between sections, between the section's headings 16 16
and its content, and between paragraphs. 17 17
This makes the web site look clean and inviting, 18 18
all because it uses whitespace in a well-executed way. 19 19
And this is the same web site, but without whitespace. 20 20
Do you see the big difference? 21 21
There is like no room to breathe here. 22 22
Everything looks bulky and unthoughtful. 23 23
Definitely not what we want. 24 24
So based on this, the first guidelines are quite simple, 25 25
and it's actually easier than it may sound. 26 26
Just put whitespace between your elements. 27 27
Put whitespace between your groups of elements. 28 28
Put whitespace between your web site's sections. 29 29
But don't exaggerate because when elements 30 30
are spaced out too much, they may lose 31 31
the relationships to one another. 32 32
So don't use too much whitespace. 33 33
You have to be careful with this. 34 34
And with this, you will see how your web site 35 35
will look nice and clean, professionally designed. 36 36
Now with the whitespace that you add, 37 37
you describe invisible relationships 38 38
between the elements of your web site. 39 39
You communicate how the pieces of information relate 40 40
to one another, and this is very important. 41 41
So whitespace is closely related 42 42
to something we call visual hierarchy. 43 43
This is the organization of your content. 44 44
Let's go back to our previous web site example. 45 45
Again, the text here is very small, 46 46
but that's not what matters here. 47 47
Just look at the way whitespace is used on 48 48
this web site to define the different sections. 49 49
We can clearly see where each section begins, 50 50
just through the correct use of whitespace. 51 51
And that's what hierarchy is all about, actually. 52 52
So again, whitespace is really powerful. 53 53
Hierarchies give your web site order, 54 54
and so it's kind of important that you get it right. 55 55
And how do you do it? 56 56
Just design with having three simple guidelines in mind, 57 57
and you should be fine. 58 58
First, define where you want your audience to look first. 59 59
Also, establish a flow that corresponds 60 60
to your content's message. 61 61
Because hierarchy is exactly that. 62 62
It guides the user from one element to the next. 63 63
And then, use whitespace to build that exact flow. 64 64
So concluding, in this lecture, we learned that whitespace 65 65
is a powerful tool to create well-defined content hierarchy. 66 66
Using whitespace right can make 67 67
a web site look clean and simple. 68 68
So this was quite an important lecture.