how to add a portion of "white space"

Today, as part of our design series of articles, we look at the concept of “white space”. White spaces can be found everywhere - a blank piece of paper, the untouched canvass of a painter, white space in a web page. Why is white space so important, what does it actually mean, and how can you add a portion of it to your design?

 

White space is often mistakenly thought of as unused or unimportant space. Think again! White space is an integral part to any online or offline design. Amongst the most important graphic and web design principles, such as alignment, consistency, balance, contrast, or proximity; white space is an important layout technique. Without an adequate amount of white space, text would be unreadable, graphics would lose their emphasis, and there would be no balance between the elements on a page. So what is “white space”? Broadly speaking, “white space” or “negative space” is a design term that refers to space that isn't occupied by text, images, graphics, or other visible page elements. More specifically, the space between major elements in a composition is “macro white space”, whereas “micro white space”, is the space between smaller elements: between a caption and an image, or the space between words and letters. White space isn't white, literally, unless your paper or background is white. It can even be any solid background color, but for the viewer it is still a white, blank, refreshing space. So if the background colour is green, the 'white space' is green. White space is simply put 'empty space', yet very important space.

 

Just why is white space so important? Well, part of the reason is psychological, and part of it is physical: any text needs room to breathe. When text crowds a page, it leaves us feeling cramped, it just makes us somewhat feel uncomfortable being confronted with just too much information at once. White space provides our brains with much-needed breathing room to absorb the information displayed in front of our eyes. White space helps us relax, read and absorb information. White space serves several purposes: (1) It provides importance to specific design elements. The more white space is applied surrounding text or images, the more important those elements become; the more those elements tend to stand out. (2) It provides a resting space for our eyes, also called “passive white space”. Web pages tend to be very packed with too much going on and can even create a feeling of information overload. White space is the oasis that our eyes need in a busy information space. (3) It provides guidance. Good use of white space will assist your visitors moving from one part of your page to another, also called “active white space.”

 

Designers use white space to create a feeling of sophistication and elegance. Coupled with a clever use of typography and imagery, generous white space can in fact be seen all over luxury markets. In newspaper design, information is very dense. Sometimes, as in web design, it's difficult to add white space because of content requirements. Newspapers often deal with this by setting their body content in a light typeface with plenty of white space within and around the characters. White space is even more important on a website because reading from the web is hard on the eyes.

 

Unassuming, clean, crisp, timeless, calming, simple, balanced, harmonious, elegant, sophisticated, luxurious design; all can be achieved by simply adding 'a portion of white space'.

 

How do you add 'a portion of white space' to a design? (1) Less is more. When it comes to website design, designers are often pressured to get as much information as possible on one page. Information overload is never a good thing. This is where a little white space can save the day and will go a long way to getting your information read. This does not mean you should gut your page, but each element - be it text, graphics, containers - each should be placed with a very specific purpose in mind. (2) Design Feng-shui. Just as you were to make space on your desk or clear out the office, you would naturally remove any unnecessary items you don't really need to use or are just crowding your workspace. Anything that doesn't need to be there, shouldn't be there. White space makes the contents of the page easier to digest, it creates 'space', and draws a visitor or reader to the 'rich content', the important bits. White space balances colors, lets the design breathe and can make a large site feel less complex. If a customer is not overwhelmed, they will stay at your site longer. (3) De-clutter. There are a lot of websites with too much information cluttering up the screen; yet you could make your design “room” more spacious. Clutter can have several negative impacts on visitors. Most importantly, visitors have a hard time focusing on the most important elements on a page, or they might even exit your website to move to a more friendly page altogether. Just remember, on the web the competition is just one click away…

 

How do you know if enough white space is applied? The page will appear balanced; the elements on the page will work in harmony and style. In a world of utter complexity, a little simplicity will go a long way.

 

Coming up soon as part of our design article series: “The chameleon of the web”, let's take a look at colour; and finally, “The anatomy of font” where we take a closer look at typography.

 

If you need any help with your marketing or web design, please do not hesitate to ask, even if it's just some advice you need. Simplicity would be happy to help. Interested to learn how we can help? View our services; or simply contact us to discuss your we can help.

 

Here are some related articles which you might find interesting:

A guide to file formats. Read this article...

Demystifying email statistics. Read this article...

What is e-Marketing? Read this article...

 

Download PDF version of this article (click here)

Who? Simplicity is a small web design and creative marketing company. For whom? We specialise in working with small, medium and start-up businesses. Why? Small feet, big shoes; just because you’re a small business does not mean you don’t need to get your message out there in a big way. What’s it all about? We help make your marketing and design matter, be known, be heard, be found; and make the pieces fit. It's not just about your products and sevices, it's about the whole experience. What’s the difference? Personal. We strongly believe in the personal approach to doing business. Creative. We fuse strategy & creativity into one compelling voice. No fuzz. We are practical & hands-on; passionate about what we do; and practice what we preach. Focus. We specialise in working with small companies and start-ups. Ideas. Ideas are the currency of our business. Ideas can have the power to change minds, transform brands and even make a difference to the bottom line. How much? Because we’re a small company without the high set-up costs of larger marketing firms and the fancy London postcode, we don’t charge London rates and are able to pass on some cost savings to our clients. What’s in the mix? [The Roadmap] Marketing Planning & Strategy: Get your marketing up and running. [Image Works] Branding & Brand Identity: Define who you are, what you can see, touch, feel, hear and watch. [A Box Of Chocolates] Demand Generation & Integrated Marketing Campaigns: Integrated marketing in harmony & style. The ideal blend of marketing initiatives. [The Bigger Picture] Website Design: Every website tells a story. Let your website do the work for you. [A Refreshing Change] Website Re-Design: Give your website an inspiring facelift. [The Perfect Pitch] Collateral Design: You don’t get a second chance to make a first impression. What is the concept? Simple. The concept behind Simplicity is to simplify complex matters and make the pieces fit. Simplicity, where ideas come to life.