White Space

December 28, 2011

I’m back. I know, I took over a month off! I’ve been to Las Vegas, got laid off from my job, and got a nice sunburn (yes, in that order) – I’m like an entirely different person! But back to why you actually read this blog….

I figured I’d jump back in with a post about white space, aka negative space. Like most designers, I’m incredibly defensive of my white space. If you aren’t entirely sure about white space, Noupe.com recently defined it like this:

“There are two kinds of space in design: positive space and negative space. Positive space is that which is occupied by design elements. Negative space (also called “white space”) is the area that’s left over. The relationship between positive and negative space has a strong influence on how the design is perceived. Lots of negative space can give a piece a light, open feeling. A lack of negative space can leave a design feeling cluttered and too busy, especially if the designer is careless.” – Noupe.com

Obviously, white space is vital in designing any web page; however, it’s really vital if you are going for the popular “clean” or “fresh” feelings so many people like. Below are three websites to illustrate how white space has been diminished or increased in order to fit their image.


You can look up basically any news site you like and find almost the same use of white space as Foxnews.com has: almost none. The different Divs (design boxes that make up the page – for example, the main picture and the words underneath would be one “Div”) are set fairly close to each other. Of course, this is good for a news website; they are trying to fill the page with news because they are “printing all the news fit to print”.

fox news webiste


Instead of using white space to direct your eyes, Fox News uses the head bars (dark blue) and pictures to keep you on task. Very common among news sites.

Image Spark

Not all websites are focused on making you think they know everything. Image Spark is a beautiful website made with ample white space. The links on top exude white space (which, by the way, isn’t always white). The link titles are small and unobtrusive. The solid font, coupled with the color scheme and white space convince you almost immediately that this website is refined and professional at whatever it does.

image spark website

Just like white space doesn’t always have to be white, it also doesn’t have to be completely empty to achieve the effect. The “page” that surrounds the main content on this page can be labeled as white space even though it has multiple shadows, definition, and even a border because your eye skips right over that. It fades to the background, like the lines on a paper when you’re reading the text. In fact, the shading actually becomes quite vital when your website has a copious amount of white space. Without proper shading, it can end up looking half-designed.

Urban Landscape Lab

If you want to talk about white, white space, Urban Landscape Lab has got you covered. They pulled it off a little differently then image spark. Remember how I said you need shading so you don’t end up with a website that looks unfinished? Urban Landscape Lab proved me wrong…this time. They used a ton of literal white space to focus your eye on their name and who they are.

urban landscape website

So how did they get away with the abundance of white space? Texture above and below. The large fonts for the links don’t hurt either.


White space, often referred to as negative space, might seem like empty emptiness, but its power in web design is undeniable. So, the next time you’re building a website, don’t underestimate the power of a little (or a lot!) of white space. It might just be the secret ingredient that takes your design to the next level.

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>