When you have to fill up the rest of the page…

Question

I've noticed that I often run into the same problem in many projects I work on: It seems like I always end up having that extra space that I have nothing to fill up with. Here's a quick sample:

See the "oh crap!" part? that's how it usually ends up, with an additional space that I have absolutely nothing useful I could put in.

What would you do in this case? would you just put whatever comes to mind just to fill up the empty space? or would you restructure the page so there are no empty spaces?

Appreciate your input.

Answer 1

Any time that this happens, I find that there are generally three ways of approaching it:

• Add more to the design
• Re-structure the design
• Remove something from the design

It's extremely tempting to go with the first option since it's often the easiest. However, this often results in a page that's more cluttered and has information that's simply unnecessary. You shouldn't dilute and overcomplicate a design for the sake of balancing a particular layout.

If you really need all of the elements in the design, then re-structuring it is the way to go. Layouts are generally flexible, so in the example above, you could perhaps make the Offers span two columns. Information can also be represented in a number of ways, so you could combine some elements.

Sometimes this problem can be a blessing in disguise, because it forces you to reconsider if each element is really necessary for the design. Removing sections of a design can be difficult and tricky to justify to stakeholders, but if you strive for simplicity over complexity, you'll often end up with a better result.

Answer 2

One trick I use to go around this sort of problem is thinking about the amount of space I want to dedicate to different tasks in the design abstractly first - and then use that as a guideline for how I design.

I sometimes use little bar charts like this...

to show the relative importance of different messages/content areas for pages. Using these as the basis for how much screen real-estate I dedicate to the visual layout stops me focusing on the layout aesthetics too much.

Answer 3

1. Make "Offers" span the whole width.
2. Create another template that's three chunks wide. So now you have a layout for an odd number of chunks and one for an even number. (Or, if you have a lot of chunks, three- and four-column templates let you arrange things without leaving an orphan - uh, except in some cases, like 13.)
3. Stick a lousy ad in "Oh Crap."

Answer 4

Keeping it simple: If you are doing super low fidelity, then don't even bother with boxes, just make bullet points under the label of "content". If you are doing medium fidelity, where layout is starting to come together, then you need to redo the layout to have room for your content and no empty spots. You can always put in "placeholder" as one of the boxes.

Answer 5

Depends on content a great deal. It would be tempting to have navigation take up 25% of the space, allowing three other quarters to live happily around it.