This is a poster from BMW spare parts advertisement campaign. 1
It says BWM instead of BMW. On the bottom, it says, "Use original parts". 2
You get the joke, right? 3
It's a very clever ad. But that's not the reason I'm showing it to you. 4
I want to demonstrate a huge design concept called Whitespace. Whitespace is empty space around elements 5
in this case around the BM... no BWM title. Whitespace draws attention to the object. 6
It's not just easier to see the object, but it becomes much more interesting and important. 7
That's Yahoo's home page. 8
There is not much whitespace here. 9
It's hard to tell what's important on this page. 10
This one, on the other hand, is a whole different story. 11
The importance of whitespace isn't just an attention and simplicity. 12
It's also, your design achieving its primary goal. 13
If you're a website primary goal is for people to search, then you better make sure all attention 14
is directed towards that. 15
When we arrive on Google, we instantly know where to click and where to direct our attention. 16
It's much less demanding to search on Google than on Yahoo. 17
And much more likely that we will achieve our goal on Google, than being distracted on Yahoo and forgetting 18
what we came for in the first place. 19
Whitespace doesn't have to be white. It can be any color. It's any unused space that is in between the 20
elements. 21
The word "white" is a leftover from the era, when graphic design used to take place only in print and 22
on a white piece of paper. 23
Let's have a look at this example. 24
Say you are working on a taxi app website. 25
You could put a photo as a background and there is nothing wrong with it at all. Or you can use whitespace 26
to bring more attention to the message and the button. 27
By the way, remember tinting with image overlays? 28
Sometimes you don't have to make the photo black and white. 29
You can keep the image colorful and still add color tint over it, like in this case. You know a long 30
time ago. 31
Before I knew anything about graphic design, I worked as a marketing manager. And as a marketeer you do 32
need to create a lot of graphic materials, design materials. Like flyers, booklets, magazines or posters, 33
advertisements on Facebook, or Google AdWords, or Facebook covers or whatnot. And I used to work with this 34
excellent graphic designer, who later became my design mentor basically. 35
And when we would sit down and I would look at his design iterations, I always had this comment. That 36
I would look at his whatever composition we were doing, sometimes it would be like a booklet for our 37
company and I would say "oh you know why don't you fill this space, there is like too much, too much empty 38
space". And I always and I never liked the empty space when he would make in the designs, and I would always 39
push him to try to fill that empty space with something. Because I felt it was empty. 40
Oh man, I had no idea back then. 41
This is quite a common reaction with beginner designers, or clients who don't have any design training, 42
but are looking at the work from a kind of sort of wearing a designer's hat or from a designer's perspective. 43
They have this insecurity about empty space and they always try to fill it with something. 44
For them it feels like, if it's empty space then it's not designed enough. 45
Keep this in mind. 46
No user will ever complain about too much empty space. 47
However, they will be annoyed with too much clutter on the page. 48
My personal portfolio site uses a lot of whitespace. 49
I wanted to bring all the attention to me first. 50
A person behind the work, so I removed all the distractions and pointed the entire focus towards me. 51
Apple always does this masterfully. Using a lot of whitespace is a very ballsy design. That MacBook looks 52
super important and much more valuable when it's displayed like that. Whitespace improves almost everything 53
Even on paragraphs. Remember what we learned about line spacing? Increasing line spacing is basically 54
adding more whitespace between the lines. And guess what? 55
Designing with a lot of whitespace is actually easier than designing without it. 56
Dieter Rams is this industrial designer and best known for his work for Braun. 57
He has coined these popular 10 Principles for Good Design. The closing 10th principle is this: 58
"Good design is as little design as possible". So don't be scared of whitespace and doing less. 59
That's just good design. 60
There is an exception with whitespace. For items that are related and are part of the same context, should 61
be closer to each other. 62
Putting whitespace between them will disconnect them and will feel like separate unrelated objects. 63
Like we learned in the lesson about proximity. 64
For example, the headline in the paragraph on this page. Whitespace will disconnect them from each other. 65
This does add more focus on the paragraph, but now it's an independent object. Adding to the amount 66
of elements, the viewer has to process. In the original version, 67
the headline in the paragraph looks connected due to the proximity. And will be perceived as a single 68
group. 69
Sort of like those links in the navigation bar. Because of their proximity and grouping, 70
they will be identified as a single group instantly. This sort of grouping makes it easy for a viewer 71
to process the elements on the page. And it's more organized and meaningful.