Web Design Principle: Use “White Space” Effectively

American Web Works logo

One of the most common mistakes that amateur web designers make is to fill every inch of available space with text, images, links, icons, and animated graphics. This creates a cluttered look that is difficult to navigate. The viewer’s eye doesn’t know where to look, and it’s hard to find anything particular amid all the clutter.

Space is important. Here are three important ways to use space in web design:

Website Line Spacing

The space between text lines affects how easy the text is to read. Too little space creates cluttered text. The eye can accidentally skip a line, and letters can actually overlap those on lines above and below.

On the other hand, too much space between lines also makes it difficult for the eye to track from one line to the next. And it gives the text an unfocused appearance.

Often the default setting for line spacing on the web places the text too close together. You can increase it slightly by changing the “line-height” selector in the CSS code.

Padding

Elements on the page should not touch each other. For example, text should not run right up to images or even cross over image borders. The same is true for tables, graphics and all other page elements. There should be at least a small margin of space between these elements.

White Space

White space does not necessarily have to be white, especially if your page has a different background color. The terms simply refers to empty space.

Think of the office of the most powerful financial figure in the world? What do you see? Most likely you imagine a spacious office with a large desk surrounded by plenty of open space. White space makes things seem classy and refined.

On the web, white space – also known as negative space – gives a page balance, contrast and proportion. Used effectively, it guides the viewer’s eye from one important page element to the next, never allowing the user to get lost, while giving the viewer “breathing room”, not overwhelming him.

To learn more about the effective use of white space, take a look at a leading magazine like Time or Cosmopolitan. See how text and images are bordered by white space. Check out the ads. You’ll notice that the product is often featured prominently with a lot of empty space around it. This ensures that the eye focuses on the product and is not distracted.

***

Web design is not only about what we put in, but what we leave out. By thinking carefully about layout and space, you increase the visual appeal of your website and transmit your message more powerfully.

Comments are closed.