Dead space can be a real problem when dealing with design problems in the real world. In the real world, things are messy, especially on the web. With print design (which of course has its own problems that I, thankfully, don’t have to deal with) one does at least have the luxury of only designing for what goes on the page. The content is prepared, then it’s positioned, then it’s printed. Someone looking at it can’t resize bits of text, they can’t add comments or perform searches. When you’re designing for the web, you have to anticipate a lot of things like this.
Dead space can be a problem in print design too, of course, but I think it’s more easily fixable. Essentially, dead space is space that just seems wrong—that doesn’t fit. Here’s an example.
See that space above the login/register link? That’s dead space. The logotype was meant to go there, but there were two problems: the menu column was made smaller (decreasing the available space) and it was decided to make the site name bigger and more prominent. The title actually goes further right than in this example image, further disrupting the layout (for obvious reasons, I can’t use the actual name or content, which is why only the ‘Home’ tab has a label).
Dead space is wasted space, space between elements that wasn’t meant to be there. White space allows a design to breathe; dead space is a chink in the armour. This design looks broken up, shambolic, and the space below the title sucks the life out of it. This raises two questions: what’s actually wrong, and how can it be fixed? The answer to the first part is that the perameters of the design have changed; the reasons I had for making the decisions I did are different. It’s time to re-evaluate, and when there’s a layout problem, the answer is generally to move things around.
An associated problem is low information density. Now that space isn’t being used for anything, it’s just eating up a place that could be used for an element. So that’s going to be my first move: getting rid of the dead space. I’m going to do that by moving a bunch of menu options there. This raises the number of elements “above the fold” and ought to make navigation easier. It makes things a bit more crowded up there, but hopefully I can stop it from being suffocating by moving the title to the right, and increasing the overall height of the header. Here’s a rough mockup of what things will look like; the actual header will of course be at least half as tall again, and you’ll be able to see the whole logotype.
Whenever I design a site, I try to crash-test it. I resize text, test it in different browsers, add in oversize images and different-sized chunks of text. Essentially, I try to anticipate potential problems when the site’s out there, having stuff put into it by people who aren’t me. Of course, all this is futile if the design suffers from problems (such as this one) that are entirely my responsibility. Fixing them—pruning dead space—will make the design cohere better visually. Hopefully, it will end up as a better and more useable site.
