Hi. I'm Wendy. I've been a graphic artist for eleven years, first at a print shop doing menus and church bulletins, and for the last five as a freelancer doing logos, brochures and, more and more, web pages. I spend a lot of my day looking at home pages, and I'm going to be honest with you: most of them hurt. Not because the people who made them aren't smart, but because nobody ever told them the handful of things that designers know and everyone else has to guess at.

So here they are. This page is friendly, free, and a little bit opinionated. You are allowed to ignore all of it. But if your visitors keep e-mailing you to say they can't read your text, start here.

On this page: Pick two colors · Backgrounds · Animated GIFs · Image size and load time · Make an 88x31 button · The GeoCities.us clip art library · Hall of Shame

Two. Not seven. Pick one dark color for text and headings and one bright color for links and accents, and use them on every page of your site. Black or a very dark blue or brown for the text; something with some life in it for the links. This page is dark slate and a medium blue, with one orange for the "you clicked it" flash, and that's it. You have already noticed that it looks calmer than most of what you see. That's the whole trick.

The reason it works: when everything is a different color, nothing stands out. When only the links are blue, your eye finds the links. Color is for telling people where to look, not for decorating.

A few pairs that always work: navy and gold. Forest green and cream. Dark brown and sky blue. Charcoal and red. Purple and pale yellow if you're feeling brave. What doesn't work: red text on blue, green text on red, anything on black except white or light gray, and yellow text on white, which nobody can read and everybody tries.

And your background color should be light and quiet if your text is dark, or dark and quiet if your text is light. The text has to contrast with what's behind it. Squint at your page. If the words disappear, so will your visitors.

I know. The tiling star field is beautiful. The gingham is adorable. The bricks are very brick-like. But the minute you put a paragraph on top of a pattern, the pattern wins and the paragraph loses. Your reader's eye can't tell the letters from the lines behind them.

The fix is easy and everybody who does this well does the same thing: put your text inside a table with a solid background color (white or cream on a light page, black or dark gray on a dark page) and let the pattern show around the edges. You get the pretty tile and readable words. Look at how the family pages and the recipe pages on GeoCities.us do it: gingham on the outside, white boxes on the inside. That's right. Here's the bones of it:

Two more rules for backgrounds. Always set a bgcolor too, close to the color of your tile, so the page doesn't flash white (or gray) while the tile loads over a modem. And test your tile's edges: if you can see the seam where one copy meets the next, so can everyone else, and it's all they'll see.

Patterns that are pale and low-contrast (a soft marble, faint paw prints, light clouds) can go under text in a pinch. Anything with lines, stripes, bricks, checks, stars, or wood grain: white box. No exceptions. Not even for you.

One animated thing on a page is charming. A mailbox with a letter popping out next to your e-mail link: charming. A little spinning globe by your "other places" list: fine. But the eye goes to whatever is moving, and if six things are moving, the eye gives up and the reader leaves. I have seen pages with a dancing baby, a flaming divider, a rotating "NEW," a marching construction worker, three twinkling bullets and a scrolling marquee, all at once. I had to lie down.

So: one or two, and put them where you want people to look. If your page is "under construction," one sign at the top says so; you don't need a whole road crew. And retire the animations once the page is done. They were funny in 1996. They're still funny. Just not six at a time.

(A <marquee> counts as an animation. A <blink> counts as two. And it only works in Netscape anyway.)

Here is the number to remember: over a 28.8 modem, a 30K image takes about ten seconds. That's on a good night. A lot of people are still on 28.8 or a flaky 33.6, and even a 56K connection rarely gets what it says on the box. So a page with six 30K images is a minute of staring at a gray box before anything shows up, and the average visitor gives you about fifteen seconds before they hit Back.

Some rules of thumb I use for client sites and for my own:

• Whole page, everything included, under 50K if you can, under 100K at most. Your browser will tell you how big an image is (right-click, Properties).
• GIF for clip art, logos, buttons and anything with flat color. JPEG for photographs. A photo saved as a GIF is huge and looks grainy; a logo saved as a JPEG is blurry around the edges. Right tool, right job.
• Fewer colors, smaller GIF. Most clip art looks fine at 16 or 32 colors instead of 256. Try it in Paint Shop Pro and watch the file size drop.
• Never use HTML to shrink a big image. If you scan a photo at 1200 pixels wide and set width="300", the visitor still downloads all 1200 pixels. Resize it in your paint program first, then put it on the page.
• Always put width and height on your <img> tags. The browser can then lay out the text right away and fill the pictures in as they arrive, instead of shuffling everything around six times. It makes a slow page feel fast.
• Always write an alt. People with images turned off (to save time over that 28.8) will see the words instead of a broken icon.

Those little rectangles at the bottom of everybody's page ("Best viewed in 800x600," "Made with Notepad," WebRing badges) are all one size: 88 pixels wide by 31 pixels tall. It's a standard nobody wrote down; it just happened. If you want one for your own site so other people can link to you, here's how, in Paint Shop Pro or any paint program that can save a GIF (Windows Paint can, in 98):

1. File, New. Width 88, height 31, 256 colors or fewer, white background.
2. Zoom in. Way in, 400% or more. You're going to be working on a postage stamp.
3. Fill the background with one of your two colors.
4. Draw a one-pixel border in the other color, all the way around. A button without a border looks like a smudge on a white page.
5. Type your site's name. Use a small, plain font (Arial or Verdana at 8 or 9 points, or one of the tiny pixel fonts), no anti-aliasing, so the letters stay crisp and don't turn into a blur. You have room for about twelve characters, so "Wendy's Corner" fits and "Wendy's Clip Art Corner and Graphics Emporium" does not.
6. Add one tiny picture if you must. A star, a dot, a little arrow. Keep it in your two colors.
7. Save as GIF. It should be about 1K. If it's 10K, you left it at 16 million colors; go back and reduce it.
8. Put it on your page with width="88" height="31" and an alt that says your site's name. Then tell people they're welcome to copy it.

Please don't animate it. I'm begging.

If you have a home page here, you already have a whole shelf of free, small, well-made graphics waiting for you at the GeoCities.us Clip Art Library. Little 32x32 icons (a book, a car, a coffee cup, a flower), tiling backgrounds, dividers, 88x31 buttons, an odometer-style counter set, and yes, the construction signs. They all load fast, the colors are clean, and they're already on the server, so you just point at them:

A few I use all the time, so you can see what I mean about small and clean:

The right way to use them: one icon per section, next to the heading, as a signpost. Not one after every sentence. Not a row of eleven of them as a divider. A single little coffee cup next to "Recipes" tells the reader what's there before they read a word. That's what clip art is for.

The rainbow bar makes a fine divider if you use it as a table cell background six pixels tall, not stretched across the page as a picture. And that big rainbow "UNDER CONSTRUCTION" banner is 416 pixels wide, which is about as wide as anything on your page should be, ever, since some of your visitors are still at 640x480.

No names and no links. I'm not here to embarrass anybody, and every one of these people was doing their best with what they had. But I have seen, with my own eyes, in 1999, the following. Learn from them.

• The Star Field. Black background tiled with twinkling stars. Navy blue text. Navy. On black. Under stars. There may have been a poem. I will never know.
• The Rainbow Page. Every heading a different color, every paragraph a different font, and a rainbow-colored horizontal rule between each one. It looked like a bag of jelly beans had exploded on a church bulletin.
• The Slideshow. Fourteen scanned photographs, each about 200K, on the home page. I timed it on my 56K: four and a half minutes. The photos were of a cat. The cat was very nice.
• The Circus. Nine animated GIFs above the fold, including two different construction workers who appeared to be arguing, and a marquee that scrolled the words "WELCOME TO MY PAGE" past all of it. Also a MIDI file, which I could not turn off.
• The Stretch. A 100-pixel-wide clip art flower with width="600" on it. It looked like a flower seen through a screen door in the rain.
• The Wallpaper. A photograph of the owner's own face, tiled as the body background. Forty little faces, smiling, behind every word. I closed the browser and went for a walk.
• The Mystery. White text. White background. I only found the words by selecting everything with the mouse. It was a list of the owner's favorite bands. Some were good.

The common thread: every one of these was more. More colors, more pictures, more motion, more everything. Good design is almost always less. Two colors. One or two animations. Text in a quiet box. Small pictures that load fast. Then get out of the way and let people read what you wrote, because that's why they came.

Want me to look at your page? E-mail me the address. I can't promise to answer everybody (I do have to make a living), but if I have a minute I'll send you two or three things to fix, and I promise to be nicer about it than I am on this page.

Coming soon: a page on scanning photos for the web (resolution, cropping, and why your 4x6 print does not need to be 2000 pixels wide), and a short one on choosing fonts, which will be short because the answer is "Verdana, Arial, or Georgia, pick one."

Neighbors worth a visit: Ad Nauseam, a copywriter's page about commercials, which proves my point about fewer words; Charcoal & Coffee, an art student's sketchbook; and The Darkroom Diary for photography.