Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

White Open Spaces

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

v2 i17
Originally Published: November 2, 2006

Web page design is just like life. What you don't say is often more important than what you do say.

Take the matter of white space, or that space which is mistakenly thought of as empty, unused, and unimportant. Au contraire!! White space is a design element, created by accident or design, and, for many reasons, just might be the most important space on a web page.

White space is rarely, if ever, considered an integral design component among new web page designers. However, it should be as it serves many critical purposes:

  1. It provides importance to other design elements. The more white space surrounding text or images, the more important those elements become. When you go to a page which has a lot of white space surrounding an element (such as a headline or an image) doesn't that element stand out to you and say "Hey, look at me. I'm important?"

  2. It provides a resting space for our eyes. Web pages tend to be very packed with too much going on. White space is the oasis that our eyes need in a busy information space. If a web page were a city, white space could serve as Central Park.

  3. It provides guidance. Good use of white space will assist your users with moving from one part of your page to another.

White space is everywhere. It's not just surrounding text and images, it's the space between characters, words and lines.

Web page design is a lot like architecture , the art form I think of as our most important as it is the space in which our lives our lived. And that's just what I mean - space. Great architects know that it's not just the shapes, colors, textures, and materials that make a great building. It's the space between all of that which makes for great architecture. Indeed, it can be thought of as design itself - the organization - of white space.

White space is much like a frame around a great painting. You wouldn't take a puny little frame and stick it around a great work of art. Go look at the frame around the Mona Lisa. White space is also like a rest, or pause, in music. It's that moment between sounds that tells you, as the pause is coming to an end, "Pay attention, these next notes are important!"

Cascading Style Sheets is the language that allows web page designers to create and manage white space. Defining the space around elements using padding, border, and margin design properties is the start of how that is accomplished.

I took a little inspiration from "White space and web page layout/design" in doing today's Joy Gem.