Some people confuse negative space as unused space, but the space where you don’t place text or images actually has a purpose all its own. Negative space gives objects “breathing room” and helps balance the overall visual appearance of a design.
Negative space has an impact on how well your overall design composition is viewed. People make a decision about your website in about 1/10th of a second. First impressions do matter. How you utilize the white space on your site to create an impression and to balance the page will have a big impact on site visitors.
Fortunately, there are some key things you can look at when it comes to negative space that will help your overall design be more successful.
1. Separating Objects
One key element of negative space is that it can be used to separate different objects on your page. One key example would be images and text. You don’t want to run these two elements together as it could cause the text to become difficult to read.
At the same time, you want a similar amount of white space between these objects. Using different spacing can throw off the overall look of your design. There is a rule of thumb many designers use where they keep some blank space around content.
One good example of this type of design can be found on the site Hanno. Even though they completely fill the page with a page-wide background image, the image is faded out so it becomes the negative space on the page. Other elements are thus surrounded by the negative space of the faded background image.
2. Using Negative Space to Show Another Image
Negative space can also be used against a solid positive space to create an additional image. This can help with overall branding of your company. There are many famous examples of this type of use of negative space, including the NBC television logo and Apple’s logo — the bite out of an apple).
Take a step back and think about how you can create dueling images with both the negative and positive space in your design. Figuring out how to create two images, depending upon which space the viewer focuses on, requires practice and artistic skill.
3. Getting Creative
Negative space can almost take on a life of its own. Instead of seeing negative space as a static, white nothingness, consider what might be lurking there that could tie into your overall design and images.
One example of this type of use of white space can be found in artist Tang Yau Hoong’s portfolio of illustrations. In particular, “Beware of Those Hands” depicts a silhouette of a city with a white background. The white background stretches down between the buildings and turns into hands, which grab vehicles and pull them up toward the negative space.
How can you pull the negative space into the rest of your illustrations? Examples like Hoong’s illustrations show that negative and positive space must work together as an organic whole.
4. Extreme White Space
Although we’ve already talked about balance, you can also break that rule. Try to create a design that has more white space. This can pull a tiny image into focus or show that the thing being depicted is small. You do have to be cautious with this technique. You’ll give up a lot of prime real estate where you could share content. However, when used occasionally, this technique is quite powerful.
Google is one of the best examples of using white space to put the central focus on an object. Since Google is primarily a search engine, searching is your goal when on the homepage. When you go to Google.com, you will see a page with a lot of white and the logo and a search box right in the center of the page.
Overall, the search box and logo take up only a small fraction of the page compared to all the negative space.
5. Responsive Design
With more and more people accessing the Internet on their smart phones at least part of the time, the use of negative space has become even more vital. Around 95% of Americans own a cell phone and 77% own smartphones. It makes sense to ensure websites are able to respond and still appear the same across multiple device platforms.
Adding additional negative space around objects allows a responsive design to more easily adapt between desktop PC and smartphone screen sizes without elements overlapping or becoming unreadable.
Some might argue that negative space is just as important as positive space. You can use negative space to draw the viewer’s eye where you want and to highlight specific features of a page, ad, logo or other design.
So there’s no need to be negative toward negative space. Use it to your advantage for a successful design.Buffer