Steve DeLassus asked me for some tips on design for a site he’s building. Since that’s fairly general-interest information, I figure I might as well make a post of it.
The most important thing to remember is that there are basic rules of design that you can follow and be a good designer, even if you have zero ability. Great designers know where to break the rules. (And for the record, if I were a great designer, I’d be an art director for some magazine somewhere. I’m not.)
Fonts. General rule: Serif fonts are easier to read on paper than sans-serif fonts. The opposite is usually true onscreen, which has lower resolution than paper. You can play it safe by specifying fonts like Verdana, Lucida, and Georgia, which are specially designed for screen displays.
Use Lucida or Verdana if you want to look modern. Use Georgia if you want to look traditional.
Specify Times as a secondary font for Georgia, and Helvetica and Arial as secondaries for Lucida or Verdana, but those fonts are so common that I’d avoid them for primary use. As an experiment in college, I stopped using Times and Arial on my papers and susbstituted other, less-common fonts. My grades improved. Being a little bit distinctive can help. I suspect Georgia and Verdana may one day become as common online as Times and Arial, but that day isn’t here yet.
Colors. Use a high-contrast scheme like black on white. People are used to light backgrounds and dark text, so be prepared for complaints if you use a dark background and light text, even if you believe (as I do) that dark backgrounds are easier on the eyes. People in their teens and 20s (and possibly early 30s) are likely to be more forgiving on this than people who are older.
I’ve run into people who are militantly opposed to dark backgrounds. I’ve never run into anyone militantly opposed to light ones. So play it safe.
Color schemes. Follow the rules of the color wheel unless you know better. And remember: Any color will look fine with black or white, and very nearly any color will look fine with some shade of gray. Limit funky color schemes to your navigation bar; keep your main body text close to the classic black and white.
Keep in mind what you want to convey. A funky, hip site might mix orange and blue or orange and green. A more conservative site will drift towards blue and yellow.
And a very safe choice: Black, white, and red. Anything you do with those three colors will look just fine.
An easy way to play with color schemes is to visit this site.
Backgrounds. The in thing seven years ago in Web design was to use a background pattern. Today that’s generally a no-no, at least if you’re overlaying text. Place your text against a solid color. Limit background usage to your margins. Busy backgrounds are distracting.
Think about it for a minute: Our most basic instinct is survival. And out in the wild, movement could mean a couple of things. Something that moved might be lunch. Or something that moved might think you’re lunch. So you naturally pay more attention to something that moves than to something that doesn’t.
On most professionally designed sites, the only thing that moves is the ads. There’s a big reason for that.
Existing media. If you have art you intend to use, make sure your site goes with it. Better yet, design your site around it. I designed this site around the montage of photos along the top. Steve had a family crest. It’s an elegant, attractive design. Almost as attractive and elegant as my family crest. Steve’s crest utilized a blue and a gray that seem to go really well together, so I suggested Steve use those colors as the principal colors in his site. The gray will be well-suited for the background of the text portion, so the natural place to use the blue is in his navigation bar.
Rule breakage. The exception to virtually every rule here is your page title. When you blow text up really big, you can get away with almost anything. So if you’re going to get daring, get daring on your page title. And even if you don’t get daring, most fonts look terrific really big. So blow your page title up really big.