Web Site Design Principles

Here are some design principles that you can use to guide your own design process.

• Design for the target audience, not yourself. Consider such factors as age, sex, experience level, and user expectations when you design your site. You must also consider which Web browsers will be used by your target audience, so that you can manage the differences gracefully.
• The Web is not Paper! Embrace the differences, and go with the flow. Basically, you will find the easiest flow if you specify the widths of things, and allow the heights to be determined by the Web browser. Be aware that users can override many of your design decisions, too, which suggests the need for flexibility that is not needed on paper. The browser and computer environments for users vary so widely that you must take this into account. There is NO reason that a site can’t work well with all browsers. Pixel-perfection leads to madness.
• Create a clear visual hierarchy. In virtually all cases, the choices should be instantly apparent to people. People have expectations about what happens when they browse the Web, so don’t break conventions lightly. If you are determined to “break the rules”, at least understand them first. Do preliminary designs using a grid. Consider the white space as an element. Treat text as a graphical element.
• Take away the boxes. While the underlying layout is composed of a group of rectangular boxes, your layout does not have to look like it. You can make portions of images transparent. You can use images as backgrounds for any HTML element in the BODY of an HTML page. Use gradients to minimize blocks of smooth color. Don't use high-contrast backgrounds unless you want the block to stand out. Minimize the use of borders around boxes, since they emphasize the blockiness. Use rounded corners on boxes to smooth things out. Don’t position all of your elements on a symmetric grid (but there’s a fine line between looking artsy and looking amateurish or dumb, so be careful).
• Organize logically for the domain (not for historical reasons; your visitors will probably know the domain, but are unlikely to know the history): alphabetical; chronological; geographical; task-oriented; topical (hierarchy of topics); visitor-specific (i.e., men vs women); numerical (such as pricing data); continuum (according to a value scale or rank); existing standards (like ISBN).
• Pay attention to Navigation. Make your navigation consistent and visible (but not overwhelmingly so). Keep people oriented using breadcrumbs, site maps, descriptive links, titles, or whatever works—it’s easy to get “Lost in Hyperspace”!
• Usability: What will the intended users expect?
  • Follow conventions where it makes sense—don’t intentionally break common practice without reason.
  • Make it easy to read and scan.
  • Avoid long line lengths—no longer than 50-60 characters per line.
  • The most common layout on the Web today is a fixed-width box (usually 780-980 pixels wide) that is centered on the page.
  • Use the 7 plus-minus 2 principle, or not.
• Minimize (visual) noise (in most cases). Omit (unnecessary) words.
• Resist specifying heights. You’re almost always better off planning the horizontal space carefully, and letting vertical space expand or contract as needed. Fixing heights leads to errors when the content overflows the expected size (such as when the user enlarges the font size in their Web browser beyond what you expected). If you must specify the height, then specify what happens if the contents overflow the box (truncate; add scrollbars; overflow).
• Pay attention to use of Color. Colors have symbolic associations that contribute to the "feel" of a site. Some people are color-blind. Many color associations have a cultural basis, and the typical associations listed here probably reflect a Western bias.
  • Red: Vibrant, passionate, love, war. A very strong and attention-grabbing color, red is charged with emotions.
  • Violet: regal, sacred, sensual. In deep shades, violet is luxurious. When lightly tinted, it is aromatic and spiritual.
  • Blue: Cool, dependable, sophisticated, sky, water. Blue is full of depth, constant yet dynamic.
  • Green: Fresh, relaxing, earth. Green is very balanced and calm, a natural color.
  • Yellow: Sun, energy, warmth. Yellow is welcoming and full of life, a happy color.
  • Orange: Strong, vital, hot. Orange is the warmest of colors, a healing and playful hue.
• Symbolic meanings are attached to shapes (from Molly Holzschlag).
  • Rectangle: rectangles and squares typically represent authority, stability, and strength. Many designs attempting to convey reliability and consistency will use lines, rectangles, and squares.
  • Circle: circles and curves typically represent community, fluid movement, and the feminine.
  • Triangle: triangles represent action, movement, and direction, and are associated with the masculine.