Grandma's House, Space and Good Web Design
By Rick Rutherford
Director, Creative Services
I'd like to share a story about my grandmother’s house I often visited during my childhood in Dallas. In the years after my grandparents retired they spent much of their traveling around the country collecting exotic-looking rocks and stones. Nothing rare or valuable…just extremely colorful and intriguing to the eye. My grandmother continued this hobby after my grandfather’s passing.
They did many creative things with the rocks they collected. Evidence of their passion for these beautiful stones could be found throughout their home. Every room was full of colorful and interesting collections to see and ask about, but frankly, it was uncomfortable in there. I was always being warned about not running into the collections and knocking them over. It was just too cluttered for this visitor. Don’t get me wrong. It wasn't that my grandmother did not keep an immaculate home; it was just too much stuff placed into each room making them feel small.
I see many, many websites that remind me of my grandmother’s house—crowded with images, animations, and overly large text. They look squeezed, unbalanced, and difficult to follow. My usual reaction is to leave…fast!
Simplicity in web page design can be a very powerful technique. This doesn't mean creating boring-looking pages; however, you should place each element on a page with a purpose in mind. As the architect of your website, you can choose to use white space on your pages making them light, when appropriate. Remember, it is often more true than not…less is more!
Get rid of the clutter
Well-conceived content involves planning. What is left out results not only in more space—but gives the information remaining more impact. Try this exercise in “tough love”: Take at a page you're working on, or one that you use regularly. Examine the elements—text, links, graphics, and so forth. What can you eliminate? Anything that doesn't “need” to be there should be deleted. Be ruthless.
Proximity, weight, and size
Proximity is the closeness of visual objects to one another in time and (in our case) space. Controlling the proximity of objects on a page, allows you to emphasize a specific object, direct the eye toward another object, and create a balance that is visually pleasing to the visitor.
An element's weight will draw the eye. Images that are too large in relation to other elements on a page can appear overbearing, much like large furniture in a small room. You can avoid this problem by using smaller images that more effectively relate to the other elements on the page.
The meaning of space
Space is the simply the absence of design. Yet it is an element of design—and design either succeeds or fails based on how space is used. It guides the eye, provides a cushion between hard edges, and it allows for a momentary pause before the mind absorbs more information. Space can be the guide for your visitor. It can frame the important content in such away to allow you take your visitor where “you” need them to go.
It is important to provide space because it puts breathing room into design. It provides our eyes that much needed comfortable cushion, that greatly desired guidance, the moment to pause and absorb the information and the beauty of what lies on the page.
How Much is Enough?
How do you know if you've got enough space? Your page will appear balanced, and the elements on the page will work in harmony. For example, the header graphic will capture your attention, but then lead the eye to the next item of interest—some text, or another image. Both the space and the elements are working together to create an integrated, visual experience.
Learning to work with space takes some practice, and the more you practice, the more you develop a confident eye. As with all things today, the Internet is an excellent reference source for examples of good-looking pages and websites.
It is important to note that the web browser itself creates a visual constraint, but that's not all it does. Web browsers eat up screen real estate. The toolbars and status bar of a browser will take up a certain amount of the vertical space. The sidebar and scroll bar consume horizontal space. While the end user can customize the toolbars on a browser and gain space, many simply leave their browsers on the default settings, which soak up the maximum space allowed.
According to the W3C, the most common monitor resolution used today (51%) is 1024 x 768. On the surface they may seem to provide justification to design pages based on this size; however, 34% still use 800 x 600 as their resolution. The higher the numeric value of a resolution, the crisper and clearer the images will appear on a monitor. By creating pages based on 800x600 standard you will present well designed pages for 86% of your viewers.
Keep in mind that like most surveys, statistics can be misleading. You cannot rely solely on statistics. Polling your members with a technology survey is a great way to achieve a clear picture of your audience.
Back to Grandma’s House
If you have a small room with no windows, how do you make it look bigger? The easiest, most effective option is paint it white, or a light color. Removing the clutter and furnishing it sparsely, will give the room a bigger feel. Here are a few ideas to make a web pages appear “bigger” and avoid visual clutter:
- Avoid adding unnecessary elements to a page's content.
- Balance the size and weight of the text, and images on your page.
- Have you sponsors conform their ads to tight, consistent specifications
- Make sure there's ample white space between text and images.
- Be aware of your readers' screen resolution.
- Use borders within table layouts sparingly.
- Avoid bordered frames.
- Use borders around images only where appropriate in a design. A better choice would be to find an interesting edge effect.
Following these simple guidelines, will prevent your website visitors from feeling cramped and unwelcome as I did in those rooms of interesting rocks. Instead, I’ll bet they will want to stay and visit for a while.