Basic principles of good web design

Here are a few principles to follow when designing your Web site and content. A lot of these suggestions will apply to print materials as well.

The designer’s favorite acronym*:

C Contrast creates visual interest and indicates relationships (or lack thereof) between content. Emphasize differences between unrelated content by making it really different — for example, use a large, fancy font for the title of your page, and a simpler, more straightforward one for page text. Small differences between separate items — like two slightly different fonts on the same page — ends up looking like a mistake rather than a design feature.
A Alignment of design elements on a page creates a strong vertical line that encourages the user’s eye to move through the document in exactly the way you want it to. Every item on the page should be aligned with other items: The left edge of your paragraph heading should be aligned with the left margin of the text, with the left edge of a photo or graphic, etc.
R Repetition lets users know at a glance that they are (still) on your site. Repeat design features like navigation, colors, text alignments, and graphic elements across your pages, and keep them in the same place on every page.
P Proximity helps users know what information is related to each other. Group related information together — for example, the date and time of an event should be next to or directly below the event name, not in another area of the page. Keep sections of text close to their headings, and use more space between the end of one section and the heading for the next.

* This acronym is credited to — and conveyed a bit differently by — the great Santa Fe designer Robin Williams. Read her books, they will help you.

Get people to read your content!

  • Don’t center text unless you have a good reason to, and definitely never center an entire paragraph; left-aligned text is much easier to read, and left-aligned headings over left-aligned paragraphs is a modern, sophisticated style.
  • Use bulleted lists, and keep your items as short as possible.
  • If you have a longer item or paragraph of text, emphasize significant words and phrases. This information will draw the user’s eye and help them determine if the paragraph contains the information they’re looking for.
  • Use short, descriptive paragraph and list headings. Take advantage of the html h1, h2 etc. heading tags to help both users and search engines identify the content of your documents.
  • Leave plenty of white space. Don’t feel like you have to fill up every square inch of the page; documents with adequate white space are more appealing to look at and easier to read.

Pay attention to what others are doing — and not doing

Like every other area of life, there are fashions and fads in Web design – and certain elements went out in the 1990s. Using any of the following (unless you have a very good reason) will make your site look dated and amateurish.

  • Content that flashes or moves, including text headings, marquee (scrolling) text, and animated GIFs.
  • Brightly colored text on a brightly colored background. Not only is it outdated, it’s hard to read too.
  • Overly cluttered pages. Don’t incorporate too many gadgets into your site — do your users really need the local weather, your industry news feed, and AP headlines on your home page? Limit your content to relevant information that helps users do what they came to your site to do, and don’t distract them with extraneous bits of unrelated information.
  • Too much personal information. Unless it’s a personal site, skip the family photo album, your favorite hobbies, and a list of links to all your friends’ sites. Limit links and info to things that are directly relevant to your organization or business.
  • Flash “splash” pages. You may think it’s fancy and cutting edge, but a Flash landing page just means your users have to wait and click an extra time to reach your site’s content. Do you really want to take the chance they may decide to spend that time searching for your competitors instead?
  • Music or video that autoplays. Most users find this annoying, especially anyone who is surreptitiously surfing at work. They will not look kindly upon your site if it outs them to the boss by playing your favorite tune at full volume while they scramble to find the volume control.

Photos and Your Web Site

Photographs on the Web are different from photographs for printing, either as snapshots or within a publication like a brochure.  Photos for printing usually require at least 300 pixels per inch for quality results; screen resolution, however, is a maximum of 72 pixels per inch.  This is why it can be difficult to get a good quality print from photos saved to your computer by right-clicking within a web browser.

Therefore, when you’re sending photos to me for placement on your website, you can usually reduce their size with photo editing software to make uploading quicker.  Picasa is a free photo editor available from Google.

You must have the legal right to use photos you place on your website. This usually means you have taken them yourself or obtained them from their legal owner. By emailing me a photo you are certifying that you are legally permitted to use it on your Web site.

Stock photography is another good source of photographs. Morguefile.com is a source of royalty-free photos; these may not be the highest quality but you can usually find very serviceable photographs there, especially of people. Two good sources to buy reasonably-priced professional photographs are iStockphoto.com and Shutterfly.com. I have accounts with both of these sites and can obtain photos for you usually for around $15 per photo.