Basic design principles

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.

Animation. I have animation turned off in all of my Web browsers. Animation is distracting. You can look very professional if you never use animated GIFs, Flash, or Javascript. It is extraordinarily difficult to use animated GIFs, Flash, and gratuitous Javascript and not look amateurish.

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.

4 thoughts on “Basic design principles

  • November 14, 2002 at 8:38 am
    Permalink

    http://www.U2.com has an animated intro which is very slick. But seeing how the rest of us are not the media giants that U2 is, we should definitely avoid animations. The rest of their animations tend to be anoying once in their site. Eric Meyer’s css edge site has serveral examples of using backgrounds behind text. http://www.meyerweb.com/eric/css/edge/complexspiral/demo2.html
    Both of these are good examples of when it is okay to break the rules, but only because the rule breaking is not annoying or distracting from the users experience.

  • November 14, 2002 at 12:11 pm
    Permalink

    Note how Eric Meyer uses the image–it extends only about 12 characters into the text, and it’s blended way into the background color. It’s a very, very far cry from a GIF background in FrontPage.

    If you have Eric Meyer’s skills, then by all means go for it and beautify your site. If your skills are limited to what FrontPage will let you do, you’re a whole lot better off sticking to solid colors.

    As far as the U2 site, I can’t visit it since I don’t have Flash installed and don’t want it installed. One-time Flash intros are slick, but that’s exactly what they are. Slick. They don’t really add value to the site. Other than a slick intro, does U2’s site offer anything the typical fan-run U2 site doesn’t? I last visited their site a year or two ago and if I remember right they had a few photos posted from the set where they shot their “Beautiful Day” video, and I think you could watch one of their music videos in one of the popular streaming media formats. But if you were after a band biography, interviews, and song listings, you’d have been much better off going to a fan site. So I don’t know how many repeat visits they actually get. I doubt it’s a lot.

    Thanks for the examples.

  • November 15, 2002 at 4:35 pm
    Permalink

    Yeah their site is broken w/ mozilla, you have to access it with ie, go figure. The do have complete song listings as well as lyrics, quite a few videos, and some images. Couldn’t find a bio, but didn’t look to hard. Probably will only visit, if I want to look up lyrics. BTW I am reading an interesting book about the spiritual journey of U2, it is Walk On by Steve Stockman.

Comments are closed.

%d bloggers like this:
WordPress Appliance - Powered by TurnKey Linux