Role of White Spaces in Web Design

By calder, 30 July, 2015
Role of White Spaces in Web Design

When Columbus discovered America every one belittled and mocked him. Discovery was not considered very intellectual or important, but actually it needs profound intelligence and creativity to discover what's already present and is in front of every one's scope. Thoughtful! Indeed.

Creativity is not every one's cup of tea!

Similarly, white spaces were present in our web pages, but no one knew how to utilize them in order to get returns, unless researchers found out that they can play a pivotal role in a websites engagement quotient.

People think that a good web design is must for good aesthetics but they fail to realize that it goes beyond as it involves science which is more important to create an indelible imprint on the users.

Whether to keep the items close or far away, all this is based on Gestalt psychology which is defined in the Law of Proximity. This was derived from a study which was concerned on where to place the items and what effect it will make on brains or how a human brain will perceive these items. The white space between these items plays a crucial role on how brain reacts to objects you have placed on your web page. This was explained by several scientific laws of vision, one of them was Law of Proximity.

Now, in the above figure you will not consider this image as a set of 72 dots as your brain will look this as a set 36,12, 12, 12 . This is all because the way brain perceives images due to the white spaces in between. Thus You need to keep proper spacing while designing your contact us form or any other web page form.

When utilized properly white spaces can play a crucial role in communicating what you wish to your customers. They further helps you to easily depict which all features are to be highlighted. Moreover, they are also create a clear and lucid display for your website and a very pleasant layout which helps in making your users stay for a longer period of time, wherefore decreasing the bounce rate of your website. It guess it the parsing part was enough and now we should delve into how to utilize them in order to make your website with a long lasting impression.

How to not thrust Call to Actions ?

As per the Canadian journal mentioned above, white spaces reinforces what you want to say and have a much deeper impact on human brain's comprehension as it was noted that the data surrounded by white space were comprehended better than other data which was surrounded by some random elements. There are various websites where it seems that they are thrusting call to actions on the users. Wherein, this works negatively for them as you need to make your Call to Actions appear very genuine. This is where you can utilize white spaces properly in order to guide your users to click on your Call to Action button on your web page. This further increases your conversion rate as the users tend to believe that your's is a genuine site.

Make Way for white space

We are well aware of the fact that white spaces are those space of the web pages which are not occupied by any element and thus are refereed as white spaces. However, this is on the web designers to utilize these free spaces in an innovative component so as to make your pages more comprehendable and clear to your users. white spaces are further categorized into two following categories :

  • Active white Space : Those spaces which are knowingly left white to give a better layout to a web page and lay emphasis on some special content fields.
  • Passive white Space : They are a result of poor web design and these are those spaces which are left blank between the content and other parts of a web page.

How to utilize white space around text for better comprehension ?

As discussed earlier white spaces are of two types one which are deliberately left blank and other which are an outcome of poor design. Passive white spaces can have pernicious effects of your web design as they look extremely unpleasant.

In the picture given above we can clearly see two forms of white spaces the former one is a result of poor web design and the latter one is properly formatted. Here we can clearly see that how much important these white spaces are for making the content of your website more legible. Moreover, who would read the text which is in bad form and thus this dips your engagement quotient.

Caveat !

Creativity is the most customizable and restriction free thing as far as my knowledge is concerned. However, one thing you need to keep in mind here is to know where is the fold of your web page lies in order to place your white spaces aptly. Moreover, you should use an intelligent way to present your content rather than putting it in a monolithic and mundane format.

How Columbus reacted to people who chided him ?

At the beginning we were talking about Columbus who was chided for his achievement. He asked the person who was mocking him to make a egg stand straight on a wooden table kept in front of them. After trying for a few minutes that man gave up. Then Columbus look a blade and made a hole on the table and placed the egg which stood vertically straight on the table. Moral : It's only your creativity which can change the game !

Author Biography : Jack Calder follows exuberant approach and extensive principles in web designing. He is currently working as psd to html service provider in markupcloud. He follows some certain rules in web development industry and has shared his thoughts on the use of white spaces.