eTapestry

Last week I brought up the question: “Who is the audience for your website?” This week we are diving into “how should I organize information on my website in a way that’s easy for constituents to obtain?”

Building a website is one part technical know-how (coding), one part information architecture (graphic design), and one part art (that subjective bit that strikes an emotional chord with the audience). It can be difficult to precisely define what the artistic part of web design is and your site can be serviced by many different styles. However there are definitive guidelines that should be followed when developing your website’s look and feel:

1.  Practice good typography. Typography is the art and technique of arranging type, the words on your website. Though this may seem like a fairly simple practice, there is an actual science to it and it’s easy to discern between a site with good typography and one with bad typography. A website using good typography is both legible (a reader can easily make out the words) and readable (a reader’s eye can move through a block of text and his brain can easily comprehend what he’s seeing).  For examples of good typography in website design, take a look at this link.

The amount of space between lines (this is called leading [pronounced ledding]) affects how readable text is. Too little space makes the eye spill from one line to the next. Too much and the eyes gets lost. Find that happy medium. The amount of space between text and other elements is called padding. Always have space between text and other items. There can be exceptions but putting plenty of space between text and other items or the edge of the page makes it infinitely more readable.

Don’t be afraid of white space. It doesn’t even have to be white! In Victorian times, every piece of space on a printed page was filled with a graphic. But we’re living in the 21st century now where the ideas of balance, proportion and contrast have been well studied and documented. A lot of white space gives a feeling of elegance… check out any architectural site.

When it comes to the choice of font, generally a sans-serif is ideal for text. The elegant beauty of a serifed font is lost when it’s shrunk below 14 points and it makes the page look cluttered. The cleanliness of a sans-serif, like Helvetica, leads to readability.

Oh… and don’t… use excessive… ellipses… or more than one exclamation mark!!!!!! And only use “quote marks” when you’re actually attributing text to something someone said; don’t use quotes in your taglines.

2.  Use appropriate colors. There’s really no such thing as “bad” colors but there are inappropriate color choices. For example, be certain that the colors used on your site aren’t simply the Pantone colors from your printed materials. Colors used in print are much darker than screen colors and this can cause a discrepancy between how the finished product appears and how it should appear.

A site should also use color in a way that guides the eye through the experience. Be wary of using overly bright colors throughout the entire site. A good website, like a good photograph, has a mixture of light and dark tones. If you are to desaturate your website (remove all the color) a person should still be able to navigate it in monochrome grays.

The color red can be your friend or your enemy. Red is the most eye-catching color in the visual spectrum. The human brain immediately responds to it. This is why red is used in street signage as well as highlights in design. Highlighting an important area on your website, such as a donate button, in red will immediately pull the site visitor to this section. However over-use of this technique leaves the viewer feeling confused and even uncomfortable.

In most cases black text on a white (or near white) background is ideal is it’s the easiest to read. Colored text is fine for links and page titles but red type on a black background is a recipe for visual disaster.

3.  Use professional-caliber photography and graphics. Nothing sinks a well-designed website faster than photography that looks like it was taken with a disposable camera. Well, that and ugly sponsor logos but we will hit that in an upcoming blog. A capable designer can often salvage some photography by manipulating it in Photoshop but images washed out by improper exposure scream “amateur.”  If your organization can’t afford or coerce the services of a professional photographer, look into investing in stock photography, especially if the images are for illustrative rather than journalistic purposes. However, be certain that the images you do select aren’t obviously cheesy or posed, like the traditional multi-ethnic boardroom gathering shot.  Don’t be afraid to fake it if necessary but do avoid misleading your potential donors. Like in marriage, fake it ‘till you make it.

4.  Avoid the sleaze element. Ever been to a website that uses pop-up windows? Annoying, aren’t they? Don’t shanghai your viewers’ browers and submit them to this type of activity unless it’s absolutely unavoidable. And be aware that most browsers have pop-up blockers so if you have an important message that you’re conveying through a pop-up, it may be lost to security protocols.

Don’t use blinking or scrolling text. It’s not fun to read a stock-ticker board or a junior high electronic cafeteria menu so why appropriate this annoying technique? Let the user scroll through your content at his own pace.

We have a saying at eTapestry: Animated content is wasted content. Image slideshows can be a powerful tool to spread your message but only if they’re used in the proper way. Most visitors aren’t willing to sit for three minutes and watch the same photos flash by. However, if you set up a slide show so that a new photo simply appears every time the page is refreshed or revisited this gives your site the illusion of freshness with each new visit. This can also be effective with quotes and other text graphics. And one last note when it comes to animation, the introductory Flash animation of the mid-1990s is as dead as the dodo. It serves no purpose other than to show off and delays your site visitor from getting the information he wants. As Flash isn’t compatible with screen readers for the vision impaired, avoid using them whenever possible, be it for a menu, graphic or the entire website.

More next week, True Believers!