One of the challenges of website design is combining many disparate items like text, pictures, links and illustrations into a harmonious page. If a layout is not well thought out, even the most beautiful design elements will suffer from poor display.
Some websites succumb to the misconception that visitors must be given as much information as possible as soon as they land on a page, which leads to an attempt to cram too much stuf into a limited space. Studies have actually shown that people with fewer choices tend to pick one of them quickly, whereas those with too many choices may not pick anything at all. Consumers say they want choice, but the reality proves otherwise. They want direction. The items you present to visitors should be carefully pared down and displayed in a way that gives people's eyes a place to rest. Negative space plays a critical role in doing this successfully.
Negative space, also referred to as white space, is simply the area on any page (web or print) that is not occupied by a design element. Without white space, everything would run together and fight for the reader's attention. White space is often confused with minimalism, but it is not the same thing. While minimalist websites do employ large amounts of negative space, all sites need a good dose of white space to communicate effectively with visitors.
Utilizing negative space
White space exists on both a micro and macro level. It can be used in many subtle and overt ways to help guide visitors or highlight certain content within a page. Here are some areas to look at when reviewing your site:
1. Macro: The space between bigger design elements. Macro level items include things like pictures and blocks of text - the larger areas of content. The padding between these things, like text and images, or images and headlines, or even different columns of text should remain consistent throughout the page to create balance. Make sure there is ample room between all of the major parts of the page, or visitors might find the layout suffocating. It is hard to read text that runs right into other text or that butts up agains a picture. It also shows a lack of attention to detail that can be a turn-off.
2. Macro: The space between sections. Websites are generally sectioned into horizontal or vertical pieces. Horizontal separation is currently popular – these are sites that have different, screen-sized areas of content as you scroll down the page. Vertical separation is the more traditional method of placing content into a main area and one or more sidebars. Whichever method you choose, make sure the sections are clearly delineated with negative space. Headers, footers and featured content should all clearly stand out as such.
3. Micro: The space between lines of text. The space between lines of text is referred to as leading, or line-height in CSS speak, and it is very important for the sake of readability. When individual lines of text within a paragraph or bulleted list are too close together, the whole page becomes difficult to read. It is hard to distinguish one line from another. Reading on a screen puts more strain on the eyes than reading print, so you should make every effort to ease the burden on your visitors.
4. Micro: The space between letters. Letter spacing, or kerning, has become more of an issue with the proliferation of new web fonts. Back when only a few fonts were considered acceptable for use online, spacing between letters was generally handled well by default. Now, condensed fonts, handwriting fonts, display fonts, and more are all available for easy use. Some of them handle letter-spacing better than others. If you are using a non-traditional font, make sure to take a quick look at whether the kerning affects readability. Are your letters too close together or too far apart? If so, they can be adjusted.
Most people don't expend a lot of mental energy thinking about white space. When websites use it well, it goes unnoticed. Visitors are able to focus on the content and find the information they need; they don't have to give any thought as to how the layout is helping make that process easier. When negative space is not present, however, the result can be jarring. Text is difficult to read, there is no clear direction, and there is no easy way to process all the different pieces. The separation created by unfilled areas is necessary to help organize information and provide visual calm.