Original subtitles

1 1

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.