Organizing with White Space .....................................................................
Some rules are obvious, and yet you’d be surprised how often they’re ignored.
Effective use of “white space” is essential to most Web pages. White space
need not be actually white: It can be a background color or a texture. It merely
refers to the necessity of including areas on the page that contain no text or
vivid graphics (a pale background graphic is sometimes OK). In other words,
white space is the blank area between images and text.
Your Web sites should avoid alarming people with crowded, text-heavy
pages. Users don’t want to read all that text. They’re not in school: They’re
surfing the Web. They don’t want an assignmentfrom you. They want an invit-
ing Web site that promises them entertaining and useful information.
You can make a page attractive and inviting to the reader in many ways. Your
primary elements on a Web page are headlines, graphics, text blocks, and
white space. Where you position these elements on the page, and their rela-
tive sizes, has a major impact on the page’s visual appeal. Use these building
blocks effectively and you’re more than halfway to creating a document that
people will want to spend some time looking at.
Take a second look ............................................................................
After you compose a page, put the page aside for a few days and then look
at the page with a cold, objective eye (or ask some friends to give you feed-
back). Check to see if your page has balance, contrast, variety, and the other
qualities discussed in this chapter. Also check for some rule violations:
crowding, hidden or floating headlines, tombstones (parallel headlines in
adjacent columns), or widows or orphans (stranded lines or fragments of
text).
Getting on balance ............................................................................
Your primary design goal should be to balance your page. What’s balance?
It means that the page isn’t top- or bottom-heavy, and that the left side bal-
ances the right side. In other words, you divide the page into quarters and
see if the “weight” is roughly evenly proportioned. What’s “weight?” It’s not
simply the amount of darkness (text is gray, headlines are darker, some
graphics are very nearly black, empty space is “white” even if it’s a pale color
or texture). Instead, think about whether your page holds together visually
because you’ve arranged the elements effectively.
An effective arrangement is not completely symmetrical. Few documents look
good when perfectly symmetrically balanced. True, a completely symmetrical
156 Part III: Adding Artistry: Design and Composition with CSS
