Do you need white space in a website? Read on to find out why having and using white space can enhance the attractiveness of your website design!

We are bombarded with website designs of so many kinds and of complex designs on a daily basis. One of the consequences of that is that we forget to ignore, one very vital component of a website, which can make a lot of difference to the impact it makes on the viewer. That is the white space.

White space forms part of the five critical elements of web design: typography, colour, photography and illustration.

Space in general is an important part of website. However, it remains an underestimated part. Many potential hosts of websites are not very sure about the importance of whitespace. They believe in the adage that, “the more, the better” with respect to content. White space or negative space refers to that volume of website space, which is left behind following the incorporation of page elements. Thus, it is the space surrounding the headers, the banners, between the posts and so on; now you must have got what that means.

White space is thus not used for placing any content. It is used for optimisation of the page elements’ order. White space creates a balance between positive and negative space. It does not necessarily mean being white. It could be coloured but it should lack any of the website elements. There are different ways to define and delineate white space: Macro whitespace and micro whitespace. Macro whitespace is the space between the larger web page elements of features. Micro whitespace is the space between the smaller features of the webpage such as the space between the lines of text or the space between the text and the image.

Many people may consider white space as irrelevant and useless but that is a wrong attitude. Experts testify that white space is a critical component of web designing and cannot be ignored. It is not simply a background matter or simply a remnant of the original web space. Cramming too many design elements into a website in the hope of grabbing your viewer/reader’s attention by excess is not exactly going to pay dividends for you.

Many times, the best web designs are often the most simplest and elegant. They are minimal and the effect they generate is due to the effective use of white space. The use of white space in an effective way helps to make the website design more readable and understandable, White space serves several purposes. It can really raise the aesthetic quality of your website. It can also improve and enhance its functionality.

Readability

The most important purpose of your website is to showcase your content to your target audience. Your graphics, images, colours may be good but if your content is not visible, legible or readable, you have made a hash of it. Many experts say that the use of white space is necessary to even out the text so that it does not appear too much for the viewer. Thus, it is necessary for improved readability. Presenting excess of text, without any spacing, would repel even the most motivated reader. What is the use of having quality text, then?

Intelligent use of white space can help avoid this problem. Text which is tightly packed together and text distributed over the web space with sufficient space in between the text elements, will have drastic difference in readability. Thus, here the use of macro and micro white space comes in handy. By increasing the amount of micro white space between the lines in a text and to the individual characters, a feeling of lightness can be generated, thus making the content more readable, and legible. Adding of more macro whitespace to the major elements can also lead to better distribution of text. Spiekermann used this strategy for redesigning the website of the Economist.

Use of whitespace between paragraphs and even, where needed between lines can make it more enjoyable for the readers and it reduces the stress of plodding painfully through the crowded and dense lines, packed together. Some research indicates that the use of whitespace in this fashion, increases reading comprehension by nearly 20%.

Content prioritization and engagement

Effective use of white space also reduces the distractions from distracting your viewers. It helps them to focus on what you have presented as the text. IT prevents them from being distracted \by other features that may slow them down and this in fact helps them to focus on the text. White space, thus, helps to promote engagement and interaction with the audience, which is what, should be the aim of your website.

The use of padding around text areas help to increase the visibility of specific part of the content that you want to highlight. The traditional technique would have been to increase the size of the font of the text or to use different versions of the font to highlight those parts; use of white space avoids this. It can be very effective to make special parts of your page visible.

White space can also be used to make the important parts of the website which are used to direct the viewers to take particular action such as the call to action buttons, click to download, purchase links etc.

Enhances presentation and quality of the website

Whitespace is neither empty space nor is it dead space or redundant. It has a definite purpose and that is to make your website stand out in terms of its presentation and appearance.

It may look rather undistinguished as compared to the text fonts, the typeface and graphics but it does not mean that it is of no use. Addition of white space and use of it in interesting ways, would allow people to view websites in an easy and more convenient way. If your website is to be effective in pulling in visitors, it should be designed so that the content can be scanned quickly.

The more time it takes for the viewer to see and understand your content, the less engaging it would be for them. Use of white space in suitable places on the web page and in creative ways, gives rest to the eye; the eye can take in the textual content in a more relaxed way.

Use white space in those little spaces, which were previously ignored; such as the edges of the text, boundaries, margins, gutters, and the space around the letters and between the lines.

Layout

Efficient use of white space can be better enabled by the use of interesting and well planned layouts. The layout should allow the whitespace to be leveraged. The use of white space or negative space helps in increasing the visibility of brands, their images on the website and hence they are very important for brand exposure. They can help to enhance and add value to your brand positioning efforts. Simple and elegant use of white space creates a distinguished feeling about the product or brand being promoted on the website. As an example, take a look at the apple.com homepage.

80-90% of the home page is devoted to white space. Fonts used are in white against a black background and restricted to the top of the page, in a thin layer. The item to be promoted (iPad) in this case is kept at the centre of the home page, surrounded by the sheer, white emptiness. There are just a few lines, used to create excitement in the viewer about the impending new version of iPad to be released. There is a healthy space between the two lines, in this image and even between the words. What does the viewer feel on seeing this? He experiences it like a breath of fresh air. He breathes and immerses in the visual experience. He is engaged. Their eyes are entirely focussed on the product without additional distractions. This is what it should be about.

The layout and the elements are very simply arranged. The user can easily go to different sections displayed on the top of the page. Each click would open a similar page. Hence, in terms of usability it is very effective and the users can easily navigate without encountering distracting elements and unnecessary and excess text.

In short, it is simple, minimalistic, elegant, sophisticated; just the qualities which are associated with any Apple product.-Quality and class. The designer has done a great job, making superb use of the white space, to create the “aura” associated with an Apple product, which can be experienced, both online and offline. Thus, this helps in promoting the brand and maintaining its global reputation. The design and the text are merged in such a way that a harmony is created- in part, due to the extensive use of white space. In this case, it is more specifically an excellent use of Macro whitespace. Google’s homepage is another example of compelling use of macro whitespace.

While the use of macro whitespace can add focus on the brand and its image, the use of micro whitespace can help render the text to be readable. This is particularly important for websites, which are in the business of dealing with lots of content such as texts and images, as for instance, newspaper websites. As this example demonstrates, the first image shows a cluttered up piece of text. There is no space between the headline and the first line of the paragraph. The subsequent lines follow one after another. The lines and the words seem to be cramped together. The reader gets a feeling of tension on viewing it and would feel inclined to skip this or not pay much attention to the matter. The purpose of creating the content is defeated as there is too much congestion of text in a small space.

In the neighbouring image, some remedial measures have been taken and the viewer can see the difference it makes in the readability of the text. White space has been introduced between the lines and between the different set of lines. It has been introduced between the headline and the first line. This kind of distribution of the space has improved the presentation, the appearance and the look of the content dramatically. As this post is a textual post and is not about a brand image, the use of macro whitespace is less relevant here.

Some of the misconceptions which have lead to many doubting the value of whitespace in web design revolves around assumptions on scrolling behaviour. It is believed that users do not scroll down the entire length of a webpage and hence, the use of whitespace is a waste. This results in designers cluttering the page with tightly jam-packed text. Research disproved this. Users often do fully check out the entire webpage. There is no reason, hence, not to use whitespace effectively in web design.

Live Examples

Below are some of the examples of websites taking advantage of whitespace and that provide layouts which explore space between text, images, margins, menus and other elements.

Made by Sofa

Nudge

Philip House

NV Interactive

By Association Only

Squarespace

Handiemail

Type/Code

Diehl Group Architects

Jac in a Box