Today I’d like to discuss something most of us take for granted – space. Perhaps you’ve noticed that big, crowded cities tend to create greater tensions and stress while, broad open spaces tend to sooth and calm people’s nerves. Perhaps you’ve also experienced that strange sensation of repulsion after picking up a flier and finding yourself staring down at lots of crowded black print. This all has to do with our subject for the day – space, aka ‘whitespace’ or ‘negative space’.
This overlooked element affects the reader’s response in a critical way. On the one hand, it influences the attractiveness of the page, makes it easier for the reader to concentrate, makes pages dense with text less intimidating and more legible. On the other hand, our pre-determined subconscious social code makes us associate space with elegance, richness and quality.
Here’s a fun exercise you can try if you don’t believe me. Grab a few advertisements. Choose a few ads for upscale, luxury products and a few ads for cheap, popular products. Can you see the differences?
Let’s divide the subject into several categories:
Macro Whitespace vs. Micro Whitespace.
Macro whitespace is the space between the major or basic elements in your free Flash template design. Micro whitespace is the spacing between the minor elements of your web design. This may include spacing between pictures, as can be seen in illustration 1, or between letters, words, sentences, menu items and that sort of thing. The font you use may influence the minor whitespace, the size of the lettering, whether you use bold or not and other decisions of this type.
Passive Whitespace vs. Active Whitespace
Up till now, all we’ve been talking about are passive whitespaces. These are the overlooked ‘negative’ spaces we commonly use to avoid going blind. This could include, for example, the spacing between sentences. Illustration 2 shows the clear difference between texts lacking passive space (which in this case consists of micro-spaces) between the sentences and texts with spaces that contribute to the balance and allow the eye some breathing room.
To support the text’s legibility I added margins and spaces between each of the sentences. I also split the text into paragraphs. The result is clear. Illustration 3.
The second type of white space is called active whitespace. Active whitespace is used to emphasize and/or structure the information transferred. For example, if I have a quote in the middle of my text which I would like to emphasize, I can use active whitespace to lead the reader’s eyes where I want.
What I did was add some extra whitespace between my quote and the sentences above and below it. Then I reduced the whitespace between the sentences and letters in the quote itself, by using Bold. The result invites the eye to read my quote. Illustration 4
Whitespace is a very important and very overlooked element in design in general and web design in particular. As you customize your free Flash template, while you’re considering the media that is to go into your website, the effects, the videos etc, try to remember that sometimes, less is more. Sometimes you can achieve the exact result you were aiming at by simply paying more attention to the non-elements on your Flash template design. Bolstering the empty spaces and breathing room in your free Flash template will make your site friendlier to the eye, and will also transmit whole lot of information about you and your product.
Stay tuned to part two.
Read also:
Web Design – Getting Started
How to Make Your Website Popular
Did you add your site to our free open Directory?
