Whitespace in Web Design: Why You Should Use It?

Question

Whitespace is a fundamental element of design and is commonly called "Negative Space". Why should we use whitespace for web design? Why does whitespace matter?

Answer 1

From the very well formulated article Myth #28: White space is wasted space, one can say that White Spaces is as important as other design elements, such as buttons fields, headres and navigation.

Allows for easier readability and scannability

Web Design Tuts’ tutorial on using white space effectively points out that the basic role of white space is to „reduce the amount of text visitors see all at once and makes reading much easier.” A cluttered page is unattractive and doesn’t make users want to read the content, especially when there’s no visual hierarchy within the text. A lab research conducted by Wichita State University showed that white space actually improves reading comprehension, although it may decrease reading speed.

Prioritizes user interface elements

Luke Wroblewski claims in Developing the Invisible that “for designers, white space is often as important as the content itself,” as such invisible elements of the interface help communicate „what’s most important, what’s related, and what needs attention.”

Guides users on a page

As white space can bring elements of the content into focus, it can “actually guide your eye from one point to another,” Carla Rose argues. A very important role of white space is to lead „the viewer around the page by the designer’s intent,” Jason Santa Maria discusses in his article on white space design.

Can create the feeling of sophistication and elegance

The generous use of white space can even contribute to the desired brand positioning. A List Apart has written a comprehensive article about white space which claims that it can “create a feeling of sophistication and elegance for upscale brands.” Cosmetics, for example, use usually extensive white space in their marketing material to tell they’re high quality products.

Is essential for a balanced, harmonious layout

“The empty space on a page can be every bit as important as the space occupied by imagery, because even empty space serves a purpose and supports the visual integrity of a layout,” according to Jason Santa Maria.

It creates a balanced design for web applications, and is one of the most important factors for good User Experience. Don't leave out white spaces!

Answer 2

Because when used effectively white-space has been empirically shown to improve key usability metrics.

Nielsen's 10 Usability Heuristics were evolved from reverse engineering a large sample of strong and poor tested UI's. The "Aesthetic and minimalist design" heuristic makes significant impact on usability, and you'd often use white-space to achieve this design aspect.

HOWEVER it is probably worth noting that white-space can be harmful too if it is abused. Neilsen flagged Windows 8 issue of low information density.

Answer 3

This blog illustrates the use of whitespace and provides examples

• http://blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-should-use-it

Here is the original article,

• http://alistapart.com/article/whitespace

Whitespace may not be just white but could be of any color but was left blank to create simple and elegant design.

Answer 4

White space is used to attract the attention of the user toward an element, and also is used for organizing meaningful chunks. See below two extracts from the book Designing Visual Interfaces by Kevin Mullet, Darrel Sano.

… white space is not wasted space – it is a powerful tool that allows the designer to direct the viewer’s attention to critical regions of the display.

…

Ensure spatial separation of independent units of independent units of information by adding extra white space between the chunks.