Saturday, July 26, 2008

Planning Your Website, Part Two: Design Factors

If you read the last article, you should have also gone through this tutorial from Xavier University of Louisiana, about planning your web site. At this point, you should have the content for your site outlined, so this article will expand on the factors that influence design choices.

Back in the first article, I stressed deciding what "message" you want to present. Keep that message in mind while you weigh your choices for page layout, site colors, fonts and graphics--the look of your site.

Page Layout

There are lots of ways to fancy it up, but, in the end, there are only so many ways to arrange your site. The below graphic points out some of the standards:

If you want to get a look at how these can be used, click on over to Open Source Web Design (OSWD). This is also a good place to get templates, but watch the license agreements--some of them are "non commercial use only".


The colors you choose for your site say a lot. I recommend taking a tour of Claudia Cortes' Color In Motion flash film to get an idea of what associations different colors carry.

Also, while you were over as OSWD, did you notice that most of the sites have a limited color palette? Some good rules of thumb on color schemes are:

  • At most, only use three colors for background: one for your header, one to put text on and one to look fancy off to the sides
  • Make sure your font colors have a high contrast with your background colors. Examples: black and white, violet and cream, burgundy and blush
  • Pick up to four text colors: body text, visited link text, unvisited link text, and heading text.
  • Use complementary colors for your headings and your body text. Using a different color helps set off the headings, but you don't want to lose readability.
  • Use mildly contrasting colors for your link texts and your body text.


Fontography on the web sucks. No matter how many fonts are available for print, there's a bare handful that you can count on being installed on your viewer's computer. If the font isn't on their computer, then whatever they set as the default for that font family comes through. All in all, that means your best bet is working with that bare handful of fonts, or just specifying the font families.

This post is getting long and the graphics are probably going to take as long, so that'll be the next article.

No comments: