Reasons Why White Spaces are Good in Web Designing

In the context of web designing, white space is referred to the space between different design elements. The area between text, paragraphs, images, links and footers etc. are referred as white space. White space is not necessarily “white” it is essentially a blank space.

Use of white space helps in scanning different sections of websites and web pages. While designing web site template designers are often found to underrate the importance of white space. It reduces the amount of text that a visitor is required to scan at one go. Visual separation of different designing elements can be effectively done by using white space. A web site template using white space effectively appears clean, uncluttered and fresh. Let us explore several aspects of white space (also referred as negative space) that are relevant to web designing.

Reasons Why White Spaces are Good in Web Designing

Focus

While designing a web site template white space is used by designers for organizing text, graphics creating contrast, highlighting and guiding readers’ eyes from one topic to another. This increases the scope of scanning and readability. Positive space – the space where images and text are positioned, can be highlighted appropriately with negative space. White space is also used to create a sophisticated elegance for highly valued brands. White space is associated with something that is expensive and high quality.

Types of white space

There are two types of white spaces in web designing. Active white space is the space intentionally left out for a better structure and layout. It is also used for emphasizing the content. Empty space around the page or blank areas within the content are left blank as by product of layout process during web site designing. This area is called passive white space.

Line spacing

web site template is more readable and easy to scan when there is enough space between lines. If lines are pushed too close, scanning becomes difficult. When the lines are too far apart the words are virtually disconnected from each other and the visitors feel confused. Optimum line spacing can be achieved with the help of CSS.

Space between the lines is also referred as – leading. This is usually set at 120-150% of the point size of type or font. As such, for type of 10pts a leading of 12-15pt is considered optimum. Leading that is smaller than this may not make the copy more legible or scannable. Larger leading may lead the eyes of visitors to wonder around the content and coherency is lost.

Margins

This is the space around a particular element while designing a web site template. It can be controlled by using CSS margins. Try to maintain a consistent margin throughout the layout. With a consistent spacing, a web site template looks more organized and professional. Think of vertical and horizontal separation while planning about the margin.

Too large margin creates a feel of disconnection. While designing a web site template you should be careful about the pixels that can fit on the screen. It is not desirable to waste too much real estate of screen on margin.

While designing web site template you need to ensure that text is not pressed up against images, sidebars, navigation bars, headers. Use necessary margins to give your readers a breathing space. A site is designed to fit within the common screen resolution 800×600 pixels. This has been expanded to 1024×768 over time.

Headings

Headings are great ways for separating content into manageable portions. There are different types of headings H1, H2, H3 etc. that highlight different sections of content. The white space used below and above a heading is very useful for separating relevant portions of content.

Balancing the layout

White space is used for creating a balanced layout. Without ample white space viewers can’t rest their eyes. A web site template should try to maintain a balance of open space and content. Online marketing agencies have found out that too much white space in wrong areas like just above footer may misguide the users. They may leave the page thinking it has ended. People expect less white space in web content than in print medium.

Designing web site template with white or negative space has gained attention in recent time. Its presence or use is not defined by the amount but by the way it is distributed on a website. Some users see too much wide space as an indication that the site is void of sufficient content.

White space is increasingly gaining desired importance in designing web site templates. It is now treated as an integral part of designing rather than just as a background. Several template designers are using it for highlighting content, making web pages readable and balancing the layout of a website. Conventions and customs are being replaced with innovations and creativity. While balanced use of negative space helps in achieving desired results, getting overboard may ruin its benefits.

Image from gardena.com

The above article has been written by RP, who is associated with many online blogs and sites as their freelance writer. She is currently involved with various number of projects based on template and web designing including a project of Template Kingdom, one of the best sites providing wordpress themes.

Newsletter

9 Comments
  1. Design That Rocks Jul 6, 8:05 pm

    I 100% agree with the use of white space as a design element. It doesnt work in every situation, but this is some good food for thought.

    Nice post.

    Reply
    0
  2. David Jul 6, 8:56 pm

    Without the use of white space, pages would look similar to the aftermath of an earthquake. Great article.

    Reply
    0
  3. alex Jul 6, 10:12 pm

    I think it depends on the amount of light in the image. In this case white has the same role as black (focus). Useful article. Thanks.

    Reply
    0
  4. Dzinepress Jul 7, 9:30 am

    useful writing but should care about negative spaces for make more professional designs.

    Reply
    0
  5. Laura McKee Jul 8, 3:35 pm

    I agree, on the importance of leaving ‘white spaces’ throughout a website/design page/board. When presenting a project (specifically in my case: architecture), it’s more important to draw attention to the project itself. With excess clutter comes confusion, and sometimes makes the viewer lost–in turn unable to interpret.

    I say simplicity with clarity is the best way to go. Visit my site: http://www.lauramckee.net (you will find it does this well).

    Reply
    0
  6. Thomas Dobner Jul 10, 3:51 pm

    Good articel! You are right leaving white spaces. Gives a structured and ckean design!

    Reply
    0
  7. Adriana Jul 12, 2:18 pm

    Roxanne, I just loved this article! I also think that white spaces are very important in web design and can make the world of difference. :)

    Reply
    0
  8. Paul Brown Jul 25, 11:27 am

    Great article. White space is so often seen as a lack of effort but in reality it’s a finer balancing act as anything on the page/screen is in greater focus. Less clutter is good but only if it’s applied to the right project – it certainly doesn’t suit every situation.

    Reply
    0
  9. fazreen Aug 19, 7:49 pm

    thanks. it makes me realize that white spaces are important in every design. thanks for sharing.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters