Nothing is Something: Why Negative Space is Essential to Good Web Design

“Why’s there so much empty space on the page?”

This is a question that does not cease to get brought up time and time again when reviewing design concepts with peers, coworkers, and clients alike – and for valid reason. The idea is strange. Why should you waste empty space on a page when it can be utilized for something else, like moving up additional information that’s toward the bottom of a page, or using the additional space to promote more products and/or services. The reasons designers don’t cram any and all elements on a page as closely as possible is because:

1. Content needs to be easily digestible. You want the users visiting your site to be able to consume content or find what they need to without giving them any added frustration.
2. Most of the time, users are scanning your website. With the exception to blog posts and news articles in which users are intentionally reading large blocks of text, users scan through headings, subheadings, and images on pages to find what they’re looking for.

With all of the content on any given page (this is “positive space” – your text, images, videos, and what have you), it’s vital that designers critically think about the negative space (aka “white space” or “empty space” – basically all of the blank, unused space on a page), as well to break things up. In design, negative space is absolutely critical to achieving the two points mentioned above. But in order to truly understand why it’s necessary in good design, we need to first talk about the design principle negative space goes hand-in-hand with: proximity.

Design Principle of Proximity

Proximity is one of the five Gestalt principles in design. Without getting too far down the rabbit hole, the Gestalt Principles are the culminative work of psychologists Max Wertheimer, Wolfgang Kohler, and Kurt Koffka in the 1920s. In its simplest form in relation to these principles, proximity is the grouping of related elements which are brought together, while elements that are unrelated are placed further away. The idea is that humans have a cognitive tendency to presume that objects and elements that are close to one another are related to some capacity, and that we do this seemingly instantaneously before we realize it. This is best demonstrated by the diagram by Andy Rutledge shown below.

Taking this a step further, the diagram below exemplifies the principle of proximity to be overpowering when additional distinguishable features are thrown into the mix, such as color. Although the diagram on the right depicts both orange and black dots, human nature discerns two different groups based on their proximity, not their color.

Ultimately, how does the principle of proximity translate to web design? Well for one, by understanding this principle designers are then able to organize and put together designs for an optimal user experience. Grouping blocks of text together, or placing related captions next to an image – these are all simple variations of the proximity principle being put into play as you’re designing.

As web designers and those who work in user experience design, it’s important to have some applicable knowledge of how the human brain naturally makes decisions. By having a solid baseline understand of this can only make you a stronger designer as you’re able to make an optimal experience for your users. Now that you know about the design principle of proximity, let’s go back to our main topic, negative space, and the importance it plays in modern web design.

 

 

 

Negative Space Used the Right Way in Web Design

In web design, negative is a positive. As we’ve discussed already, negative space is necessary in allowing users to scan and digest content on a page as seamlessly as possible. So, it’s the designer’s responsibility to think about and utilize negative space as thoughtfully as they would with the positive space on a page. Here are a few tips on how to handle negative space in your next project:

Group related items together.

This has been mentioned multiple times already, but negative space can be utilized to break up elements on a page to bring related elements together, and different elements away from one another. There will be times when there is a lot of information on a page. Negative space can help break all of that information to be easier to digest.

Footers are typically a good representation of how proximity and negative space is utilized in web design. Here is the footer of Beats by Dre’s website. Each block of text is a grouping of related links. Sure, the titles above each block tell which category is which. But if you were to take away those titles above each block of text, the principle of proximity suggests that users’ cognitive tendencies would have them assume each block of text is grouped together for their similarities anyway.

Create visual hierarchy.

Understanding hierarchy is very important when it comes to designing the composition of a webpage. The visual hierarchy of a page simply refers to the order you intend users to notice elements on a page. In design, there are a number of different factors that go into creating visual hierarchy (such as color, scale, or shape, but the one we’re focusing on is proximity, and negative space can be used as a tool to help support that.

The hero section on Grammarly’s homepage does a good job of showcasing hierarchy by spacing elements on a page accordingly, as it’s an easy top-to-bottom breakdown of importance. First, you take in the heading and sub-heading to gather some context as to what Grammarly is. Next, you’re presented with a gif as to how Grammarly works. And finally, you’re presented with a conversion point for users to engage with.

Draw the user’s eye to a conversion point on the page.

This goes hand-in-hand with the previous two point I just made. But essentially, as you strategically think about the visual hierarchy on a page you ultimately want to get users to convert on a certain area or element on a page. Well, negative space can assist you in doing so by isolating whatever it is you want your users to convert on to make it much more noticeable than anything else on a page.

Google is the ultimate example of this, as the page is so bare-boned and only requires what’s necessary. Dead-center on the page is the search bar, the main conversion point of the page. All of the links in the top left and right of the page are all secondary, as negative space has been utilized as a tool to draw the user’s eyes and put most of the emphasis on the search bar on the page.

Closing Thoughts

When it comes down to it, negative space can the make or break element on page without actually being on the page. Negative space is a vital tool when it comes to good design, and should be approached with just as much meticulousness and thoughtfulness as any other element you wish to include on your next web design project.