Iowa LTAP has moved from CTRE to the Institute for Transportation

Creating the look and feel

This is the fifth article in a series about web site development for local transportation agencies. The first four articles covered planning a web site, acquiring the tools for creating it, choosing and organizing content, and helping users navigate your site.

Design isn't just about making your web site look nice. In fact, by planning content, labels, and navigation systems, you've already begun the design process. Creating the look and feel of your web site is the next logical step in this process. Even if you decide to outsource some or all of your web site development, generating some ideas about what your site should look like will help the designer realize your vision of the site.

Following are some basic tips to help you get started:

Finding ideas

Examine your organization's existing print materials for design ideas. Does your agency have a consistent image in its print materials that you'd like to use on your web site? The print materials may suggest a color scheme. Your agency may have a logo you could incorporate as well.

If you haven't been surfing the Internet and looking at other agencies' web sites, now is the time to start. Think about the elements of other sites that you like and dislike. Borrowing design ideas and applying them to your own web site is perfectly acceptable, but of course downloading other sites' images and text and using them as your own is not.

Color

You don't need to use any images at all to make your web site colorful. Color can be used as background for a whole page while other colors can be used as backgrounds for small sections of pages to set them apart. Text and links can also be assigned different colors. The key to using color well is to have a high contrast between the background color and the text color. A plain white or other light colored background with black or other dark text will be easily readable. But light text on a dark background is hard to read.

Link colors

While it is possible to change the colors of links, it's not advisable. The web browser default colors for text links are blue for an unvisited link and purple for a visited link. Web users understand this, and new users learn this idea quickly. So it's a useful navigation and orientation tool for all users. These colors have almost become a standard, but many web designers don't use the default colors because they don't "go" with the rest of their design. Consequently web users can run into navigation problems on sites with non-standard link colors.

Backgrounds

Background images should be subtle or they'll overwhelm the text and users won't be able to read information. One popular use of a logo is to fade it to a pale version of itself, similar to a watermark on fine paper, and then use it as a tiled background. Tiling means that one small image is repeated across and down the page. Another popular background is to create a two-color image that looks like two columns, one narrow left-hand column and a wider right-hand column. The narrow column usually contains information that is repeated from page to page such as navigation bars and contact information.

Images

Logos, illustrations, and photos can enhance your site, but it's easy to go overboard and significantly increase the download time of a page. A very basic web page would incorporate an organization's logo, often in the top left corner of the page, and the rest would be well organized text. It's a good idea to use your logo (or your name if you have no logo) on every page because it lets web users know whose site they're visiting, especially if they enter the site from somewhere besides your home page.

Evaluate each image you'd like to use on your web site. Does it add something to the site's content, such as a map showing where your agency is located? Does it help users navigate your site? Graphical navigation bars are a common way to incorporate colorful yet simple images. Think hard before using images that are simply there to look pretty, especially if the images are large and take a long time to download. Try to make your images do double duty.

Animation

Animation is a fun gimmick for a few seconds. After that the continuous movement is distracting for web users who are simply looking for information. Considering that the main purpose of a local transportation agency's web site is to inform rather than entertain, animations may be inappropriate. Even the tiny and innocuous spinning "new" signs and letters stuffing themselves into envelopes to be emailed can be visually distracting. There are probably better, more professional ways to draw attention to specific parts of your site.

Final tips

In addition to using your logo or name on every page, include a way to contact your agency. You'd be surprised how hard it is to find this simple information on many web sites.

When deciding where to put your navigation bar, be consistent. The top and left side of the page are probably the most common places, and thus the places users frequently look. The bottom is a useful place for redundant text links for a graphic navigation bar.

The final article in this series will discuss creating web pages from scratch with html code. Copyright 1999, Center for Transportation Research and Education, Iowa State University. All rights reserved.

 

Contact Iowa LTAP
2711 S. Loop Drive, Suite 4700
Ames, IA 50010
Phone: 515-294-8103
FAX: 515-294-0467