- Worldstart's Tech Tips Newsletter - http://www.worldstart.com -
Reduce Visual Noise with Whitespace
Posted By Andrew On July 29, 2009 @ 11:56 AM In Web Design | Comments Disabled
If you have a web site or a blog you can enhance readability by giving enough white space between elements (content). If you use insufficient white space, your audience may have difficulty reading the content. Insufficient whitespace results in a phenomenon called visual noise.
What is Visual Noise?
Visual noise makes it difficult for users to digest information on web pages because everything is placed too closely. The best way to explain visual noise is by looking at the following example.
This site is a “News” site that oozes with visual noise. Even if the content is par excellence, odds are that only the most persevering of visitors would wade through it. There is just too much happening and not enough breathing space between elements. Whitespace to the rescue!!!
Reduce Visual Noise by Using Whitespace
White space enables the reader to breath and make sense of the different elements in the web page. Now, look at the following News Site:
Despite it being a News site, MSNBC has done a remarkable of segregating elements by provide white space between them. This leads to a site with reduced visual noise.
Reduce Visual Noise in Submenus
The usage of whitespace is not only limited to the layout of elements in the home page, but can also be applied to submenus. Take a look at the following submenu.
In this case, the designer has used white space to separate options in the submenu. This is the reason why the submenu looks uncluttered. A very thin dotted line would work too. The designer could have achieved the demarcation of submenu options by having a solid line after each option. However, by doing this, the submenu might look cluttered.
Your aim should be to reduce visual noise to a minimal. Even if you site has great content, you should use white space appropriately to reduce visual noise and enhance readability.
Article printed from Worldstart's Tech Tips Newsletter: http://www.worldstart.com
URL to article: http://www.worldstart.com/reduce-visual-noise-with-whitespace/