Does your content have enough space – or is it all squeezed in against the sides of your website’s design, just like the red car and the white car?
Your visitor can’t climb out the roof of your website
The driver of the red car managed to get out with an interesting tactic. But how about the white car’s driver? Not much chance, right? And I reckon the driver would be rather frustrated (giggle). Your website’s visitors are the drivers of your website – so let’s see how you can ensure you’ve given them the space their eyes need to be comfortable. Let’s compare two examples of space as an experiment.
The Space Experiment
Compare the following two boxes of content, and think about which one is easier for you to read (the text is just ‘dummy text’ for the sake of this experiment):
See how the text is squished up against the sides of the box? And see how the paragraph is one big long wall of text? It’s a lot like the two cars that fought over the one spot in the video – but nowhere near as funny.
Now check out this box:
In page layout, illustration and sculpture, white space is often referred to as negative space.
It is that portion of a page left unmarked:
- the space between graphics
- margin
- gutters
- space between columns
- space between lines of type or
- figures and objects drawn or depicted
The term arises from graphic design practice, where printing processes generally use white paper.
White space should not be considered merely ‘blank’ space — it is an important element of design which enables the objects in it to exist at all, the balance between positive (or non-white) and the use of negative spaces is key to aesthetic composition.
There’s a healthy dose of breathing space both outside the border of the box, and inside the border of the box. And the long block of content is broken down into very short paragraphs (one or two sentences long) and bullet points for the list. The important words are bolded, though this should be used only when absolutely necessary (less is more). It makes the text much faster and easier to read.
Get even or get out
You can see that the space is an even distance from the text on all sides. If the spaces are uneven, it looks like you slapped it together in a hurry.
In page layout, illustration and sculpture, white space is often referred to as negative space. It is that portion of a page left unmarked: the space between graphics, margins, gutters, space between columns, space between lines of type or figures and objects drawn or depicted.
The term arises from graphic design practice, where printing processes generally use white paper. White space should not be considered merely ‘blank’ space — it is an important element of design which enables the objects in it to exist at all, the balance between positive (or non-white) and the use of negative spaces is key to aesthetic composition.
These examples have yellow backgrounds, but the same is true for the main content area of any website – if there isn’t enough space around edges of the text, then it’s harder to read than it should be. Here is a real-life examples, and how I’d personally modify the design to make it more readable.
Re-thinking Space with a Real-life example
I found this website: www.mrbottles.com to use for this experiment – but please make sure you can turn down your speakers before you venture there, my brave friend. The website’s owner is definitely passionate about bottles, but the design is… (At this point I’ll remember what Thumper the bunny said in ‘Bambi’ about saying nice things.)
Before
Oh, my poor bleeding eyes!
After
I’d have really preferred a white background and some interesting headlines instead of just dates, but here’s some space and more readable text.
What do you think?
Do you agree with what I’ve said and done, or not? Can you spot the differences? Please leave a comment below, and I promise I’ll reply.
