Positive Negative Space: Minimalistic Design

Back in June, Matt wrote about Color and Your Website. For my very first post on our blog (woohoo!), I’d like to address the opposite of that.

THE NOT-COLOR WHITE

White represents the good between good and evil, it’s the yang in yin and yang and elicits a feeling of tranquility and balance. I personally love white as it has a calming magic about it. Just think about a snowy day you’ve experienced and how it made you feel. That’s rare for us here in Austin, Texas and the only time I really enjoy the winter season! You could also be germaphobic like me and gravitate toward white because it’s clean and fresh, LOL.

Now, let’s take all of these things white stands for and apply it to design.

WHITE SPACE

As designers, we each have our own style. My preferred style is minimalism, where the subject is stripped down to its necessary elements. Less is more, resulting in more negative space, also referred to as white space.  It’s like if you’re a cheese pizza lover and you’re given a slice of supreme.  You end up picking off all the extra toppings to maximize the taste of the cheese.

In web design, white space doesn’t refer to color (or lack of) but is the negative area of your website not containing any content, the space between and around each different element of design. Sometimes “less is more” isn’t always the case as websites can be packed with content. If used correctly in any situation, white space can enhance the performance of a website, improve readability and make a great first impression.

INFORMATION HIERARCHY

White space helps better emphasize and structure information. What is the most important piece of information on your website? Information hierarchy can be accomplished using margins and enhance a website’s performance. Margin (not margarine, although I would never deny myself any of that) is the space around a particular element in design. The more important it is the more margin it has because you are isolating it from the rest of the content. Be careful not to use too much margin, however, as it can cause a disconnect between the information on your website.  Apple’s home page does an excellent job taking advantage of margin.

LETTER SPACING AND LINE HEIGHT

Having little breathing room within or around text on a website can overwhelm and frustrate visitors, even urge them to go elsewhere for the information they seek. If I were a letter in a body of text and got shoved into a tiny room with a bunch of other letters, on top of getting a little claustrophobic and sweaty, finding me with all the other letters pushed up against me would be a tough task. Adjusting the white space between letters and between lines in a paragraph makes scanning a website so much easier, improving readability, just what D Bnonn Tennant so well does.

CLUTTER-FREE AND PROFESSIONAL

By using large amounts of white space, you’re saying your content is far more important than the screen real estate it rests on. With extra margin, letter spacing and line height, the content there is organized and easy to read. Displacing clutter with white space will produce an aesthetic, clean and fresh, professional website.  Now that you’ve learned some of my phobias, one thing I’m not scared about is NOT having a nice looking website because I know how to effectively use white space!

RESOURCES

“Whitespace: The Underutilized Design Element” [http://webdesignledger.com]
“Whitespace” [http://www.alistapart.com]
“Using White Space Effectively In Web Design” [http://webdesigntuts.com]

Be Sociable, Share!

• 

Donna Dong

Originally from Austin, Donna Dong has been a designer for 10+ years and with Affiniscape for 6 years. When she's not working, you can probably find her at a live concert, eating somewhere, at the movies, on the tennis court, at the gym or in bed.

More Posts - Website