News

Adding Artistry Design and Composition with CSS| Web Design Basics

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.

Take a second look

After you compose a page, but 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 feedback). 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 the balance? It means that the page isn’t top- or bottom-heavy and that the left side balances 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

Emphasizing an Object with Silhouetting

A useful technique called silhouetting helps break up symmetry by removing most or all of the background of a photo or drawing and then placing it off-center on the background color or space. When you clean away the existing background, the image’s foreground becomes more prominent. It provides an extra dimension, somewhat like adding shadows. The detail on the edge of the foreground is exposed and seems to thrust out of the page toward the viewer.

Trapping White Space

Sometimes white space can look bad. If you’ve surrounded a white area with text or graphics, you’ve managed to create what is called trapped white space. The problem is the distance between the H3 (the thin horizontal black line) on the right side and the text it describes. Headlines, captions, and other descriptive items should almost always be right next to the photo or paragraph they describe

Keeping It Appropriate

I conclude this chapter with a cautionary note for those designers who, now and then, neglect to think. I’m not talking about you, of course. I’m talking about some friend of yours that you might lend this book to.

Please do ensure that the symbols, shapes, clip art, and other focus elements you add make sense for your Web site’s content. The clip-art silhouette added is great for a dance studio’s Web site. It’s not so great for a site sponsored by Concerned Mothers against Filth on TV.

Last Word

I’d like to recommend some specific sites to illustrate the principles discussed in this chapter. However, Web sites change their content so often that any site I point out will likely have changed by the time you read this book. However, you can do a little surfing on your own and find Web pages that are visually compelling. (Or just look at magazine layouts or ads.) You’re likely to find at least some of this chapter’s principles illustrated in any good Web page.

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button