Web Design: the good use of white space

Tweet

White space in web design is, in my opinion very important. The correct use of it can really make a difference.
In this short article, I would like to share my ideas on the good use of white space in web design. What I write here is my personal opinion, and it comes from years of web design. I may have read the following things somewhere in the past, but I truly don't remember where and when. So, if you find something that you have already read somewhere, please remember the above.
Now, follow me, and don't forget to share your thoughts.

Page elements

First of all, I would like to state that elements on a web page have different level of importance. However, we should remember that every element has its own space. The space is determined by what surrounds the element giving it the appropriate importance. Every element has its own boundaries which give the element its space and position.
Generally speaking, when we want to make something stand out, we normally increase its border thickness. Think about a drawing, for example. A portrait is much clearer when its boundaries are well defined. At the same time, when the background is confused, we have more difficulties in focusing on the main object of the portrait (which can be a face or something else).
In painting, this is a very well known technique: the artist normally guides the viewer with different approaches, making him/her see what he really wants the viewer to see.
So, the boundaries of a web element are very important and they define the element itself.

Let the element stand out

How can we make an element stand out? The first and simpler thing to do is to increase the contrast between the element and the rest of the page. And we can do it easily by increasing the white space around the element itself.
Imagine a box with a border and text inside. If we increase the white space around it, the box will automatically be more visible.
On the contrary, a packed row of elements will make all the elements equally important and generates confusion in the visitors.

What if some elements are equally important?

Elements on a web page have different levels of importance. It is not true that we cannot choose the right degree of importance for each displayed element. However we have to understand that if we have too many elements, we might have more difficulties in creating a top list of importance.
At the same time, it's not true in my opinion that elements with more white space are always more important than elements with less white space.
The right balance of white space is just given by personal taste and, in my opinion, it hasn't got a fixed rule to follow.

No general rules, but one

However, there's just one rule we should take care of. Follow it and you will never fail.
Do not stuff your page with too many elements, especially your home page.
That is my personal first rule. When I finish a web design, I always take my time to remove things. And I always find bits and pieces that I don't really need and that can be removed or moved somewhere else.

The same goes with text

The same ideas can be applied to text. If you read the above keeping that in mind, you will find that the same ideas work with texts. In reality, white space in text is even more important.
I know that may web designers have spent hours in talking about the use of white space with text, so I won't get into it more.

Ok, that is all for today.
Please, let me know what you think about the above using the comments section below.
For the rest, happy coding... as usual.