Negative space, often referred to as white space, is the unused portion of your web page. When you look at a website, your eyes are always drawn somewhere…but where? Depending on the way the designer laid the page out, it’s usually the logo we are so attracted to. Next up is the body and header of the page, which are where most people tend to make their sites look like an art collage gone wrong. Some designers look at negative space as extra, unused space that leaves room for more pictures and text. This is far from the truth!
Consider your computer’s desktop: if you need to find an icon and forgot where it was, it’s much easier to find and less frustrating when you have a small number of icons. If you have a desktop filled to the max with shortcuts, folders, and programs, you get irritated. Your wallpaper is, in this case, considered the “negative space”. Keep in mind, white space does not have to be white; it can be blue, black, or any other color that’s merely there to hold the space.
Using Negative Space
The true use of negative space is to draw your eyes to a particular point of the page. This point is generally the highlight of what you do. For example, a graphic designer, photographer, or any other digital picture website may want you to focus on an example of their work. Think about it: when you see a website with a long block of text, do you really feel like reading it? What about if there’s only a paragraph, but looks like only half of a paragraph due to spacing? Negative space is just one of the many ways to keep the reader interested and navigate them through your website.
How to Use Negative Space
Negative space can be used around pictures, images, videos, and text. Look at your website and see how much unused space there is on your homepage. What do you want to stand out the most? Most websites choose 1 picture/slider and one small block of text (generally a column) to grab the attention of their visitors. Those interested, move on, while the rest leave the website. Unfortunately, there are no exact numbers that you should use to insert this whitespace; you’ll just have to eyeball it. Once you choose what you want to stand out on your own website, make some negative space around it until you feel that it has substantially stood out among the rest. In many cases, your highlighted region is one of the few pieces visible on the page until scrolling down. If you want your header to be what stands out, make it larger, and use your negative space to fill in the rest. One good tip for those who wish to attract users to an image on a page is to use similarly colored fonts. A readable, but subtle color, such as light-medium gray font on a white background, is perfect for allowing readability when they decide to look further, but not quite grab their attention immediately upon landing on the site.
Negative space is used to guide users to certain elements of a page and can in turn be used to navigate them through the website in a particular fashion/order. It is the unused space, but not necessarily “white”, that is placed around a region that is meant to grab the attention of visitors. Similarly colored fonts can help emphasize that region, especially when it is an image. One of the best examples in history is Google. Their search box and homepage image are not the only thing on the page: there’s also the footer and header links. With the use of negative space, your eyes are drawn to that search box. If implemented effectively on your website, whitespace can give your visitors a positive experience that gave them what they came for.
Author Bio: Ryan Gavin is an associate of Ignition72, a corporate web design company. He loves finding well-designed websites and looks to help improve poorly-designed websites.