Conventional wisdom says that “you need to think positive, in order to accomplish an important goal.” But, often too much positive thinking can disappoint.

While it’s true that pessimists (and skeptics) have served as driving forces behind the betterment of the human race, but negative thinking is the biggest reason behind our survival in the world – that helps ward off any danger. The same is true in case of web design.

Wondering how?

Well, a lot of you (ideally web designers) will agree with me that while working on any web design, we tend to become overwhelmed with positive web design elements (like navigation, content, images, etc.) so much that we end up making our design stuffed with unnecessary bloat. However, negative space can help separate the elements in a web design, thereby making the design look more structured and understandable to users.

Negative space also referred to as white space, is an important visual component of web design – that helps in increasing its usability. A good web design makes use of negative space for creating distance between the web design elements. Thus, negative space is equally important to your website content. After all, no one like to read text in paragraphs – that are squeezed in a little space.

However, using the right amount of white space helps add beauty to a web design, by creating a fine balance in the elements and content of the design.

What Exactly is Negative Space in Web Design?

Negative space is, basically, spaces without any content in a webpage. To be more specific, negative space is – the spacing between text, images and other objects that avoids them to overlap with one another. Even though, it is called as white space, but negative space doesn’t necessarily have to be white, rather it can be of any color.

Although, negative space is an important design factor, but is often overlooked by web designers. The basic purpose behind negative space is that it helps in adding symmetry to a webpage layout, and thus help in making the layout clean and easy for visitors to scan.

Significance of Negative Space in Web Design

Negative space can play a crucial role in the success and failure of your web design. Below are a few examples that will demonstrate how “negative space matters in a web design”:

#Example 1 – Clear Visual Hierarchy

At times when you’ll look at a website that you find to be attractive, you might feel as if something is missing. The site may have interactive graphics, great colors, and good content, but it still might appear bland to you. This problem could be due to lack of visual hierarchy in the design layout.

Not being able to establish a clear hierarchy in your visual design can make it difficult for viewers to read the information on the page. On the other hand, a visual design with a clear hierarchy of information and graphics can prompt your viewers’ to follow the desired path – the one you have set for your users.

In order to maintain visual hierarchy, you’ll have to structure your message, which requires you to focus on the fonts you’re using for displaying the text on your web pages. Most importantly, you need to consider making use of the correct white space around the elements of your web design.

Negative space (or white space) helps in increasing the visibility of specific elements on the page, and avoids those elements from being crammed together. This not only make the graphics and the content of the web design organized, but also help make the most important element stand out (against less important ones) in the overall visual composition.

For example: The “Hobson Bernardino + Davis LLP” website uses white space effectively – be it in the center of the page, in the logo, navigation, etc. This helps make the website layout features a clear visual hierarchy, which immediately bring the focus on the most important elements of the site and improves readability.

Effective use of white space in ‘Hobson Bernardino + Davis LLP‘ website.

#Example 2 – Create a Balanced Layout

Maintaining visual balance is important for adding an elegant look to your web design. Besides, a balanced layout makes the web design simple to use and enhances UX (user experience). Negative space is considered to be one of the most effective ways that can help in achieving balance.

For example: The “Enterprise Foundation” website uses negative space that helps create a perfect balance between key components of the site, including heading, content areas and footer. Despite the text blocks are tight, but not in a crowded way, because of the proper use of negative space in the overall layout – that makes the design aesthetically balanced.

Negative space in Enterprise Foundation website.

Furthermore, the alternating (and the right contrast) color scheme used in the background and text also create a feeling of a spacious and roomy design. The middle content areas in the homepage design for Enterprise Foundation look broad, since it utilizes plenty of extra space in the form of padding. This extra space helps differentiate the content areas.

You might not be able to notice proper negative space in a web design, but in case if it’s missing – the crammed page sections and content areas would surely make you notice the absence of negative space.

In a nutshell, balance isn’t something that “can be seen with your bare eyes”, because it is more of an abstract feeling. Therefore, if negative space is not used properly in your website layout, it will look unsteady and uneven to your viewers – that makes reading difficult for them.

#Example 3 – Create Effective Typography

Over the past couple of years, typography has emerged out as one of the hottest trends. According to The Aesthetics of Reading, a paper written by Rosalind Picard (MIT) and Kevin Larson (Microsoft), “typography influence a reader’s mood and cognitive performance”.

Simply put: an effective typographic design can help you make an good impression on your users.

Negative space plays a vital part in producing good typography. Remember that a great typographic design does not only need large-size letters, but also require you to apply the proper space to create a sense of distinction between letters and words.

In fact, typography also ensures in maintaining the content hierarchy. Your web page headers are required to be easily recognized as the “ruling” components of the content of your page. And, the headers must be capable of immediately capturing users’ attention, as they help determine what the content is about.

Further, the text blocks or paragraphs below headers must be placed closer proximity to the header, so to as to help readers understand the relationship between them both, and so on.

For example: “HDLive 2012” showcase an excellent use of enlarged and properly spaced typography. As you scroll down the website or access the inner pages, you’ll notice that the text within the web pages contains plenty of line height and subtle contrasting colors against the page background. This is important for facilitating users with an enhanced reading experience.

Properly spaced typography in HDLive 2012 website.

Designing typography with well-spaced items create natural rhythm, making it easier for your visitors to have a pleasant reading experience – regardless of the size of your web page.

How You Should Use Negative Space in Design?

To make the correct use of negative space in a web design, you’ll have to become familiar with the two different types of negative space, namely: micro and macro negative space.

Micro Negative Space

It is the space within the smaller (page) elements, such as the margins (left or right) around the elements of a web page or the space between words, letters and characters. For instance: The space provided between an image and its caption is micro negative space.

Micro negative space is used in typographic design, and helps in improving legibility and readability of the text. When applying micro negative space, you need to ensure that the space between your content blocks must be tight, but it shouldn’t make them crowded. This can be achieved, by ensuring that you’re not adding too much line height between your heading and paragraphs. But, at the same time ensure that it the line height must not be underdone as well.

A great example of micro negative space is W3Avenue’s website below. The site contains a lot of content (with several articles placed in different categories), but the layout doesn’t confuse users. The appropriate space in the header, and properly spaced items in the content in the middle and in the sidebar ads, makes the website layout clean and structured.

Micro negative space in W3Avenue website.

Macro Negative Space

This type of negative space creates a distance between the major web design elements. These spaces are wider compared to micro negative spaces, and thus becomes immediately apparent. The margins between the header, navigation, content and footer areas is called as macro negative space. Plus, the space provided in between the sidebars, background and other parts of the web page is a macro negative space.

These spaces might provide plentiful space between the design elements (compared to micro negative space), but it still doesn’t provide more room to breathe in.

Space is primarily used to separate, as well as, connect web design elements. However, often many designs comprise of boxes (in the form of borders) – that are used for separating and connecting elements. But, though boxes prove useful in separating things, they might fail to maintain unity across the design. This is where macro space come to your rescue.

Using macro negative space rather than boxes can help separate and connect all the elements in your web design effectively. While the larger space helps in separating the elements, narrower space will help connect them, which helps in maintaining the unity of the page.

Note: The majority of web designs containing macro negative space is symmetrical – with a rhythmic and repeating pattern.

Stripe Connect landing page, is a perfect example of using macro negative space in a web design.

Macro negative space in Stripe Connect landing page.

Right from the navigational items placed within the header, and a considerable amount of negative space around the call-to-actions, makes the Stripe landing page stand out.

Summing Up!

Negative space or whitespace can make or break your web design. You may spend time in creating a visually appealing design with tons of exciting features, but as you may know too much of anything is not good. And so, for creating a good website, you must ensure using proper negative space in your web design.

Applying negative space in the right manner helps create easy-to-understand visual hierarchy, balanced layout and produces effective typography – all these factors are crucial for the success of a web design. In addition to this, there are two different types of negative space that you need to understand, so as to make the correct use of negative space, called as: micro and macro negative space. Both of these concepts are important and helps in maintaining a healthy balance in a web design.

Hope that reading this post will help you give a better idea of how thinking negatively (in context of space) can be good in a web design.