These guidlines will help you produce well designed college web pages that help potential students navigate to and find information quickly.

• Design Consistency
• Text Formatting for Design Consistnecy
• Home Page Design
• Web Page Layout
• Web Page Links
• Web Page Graphics
• Going Live with your Web Site

Design Consistency:

The primary goal of the college web site is to recruit new students.  Web page design consistency helps potential students with no knowledge of Fort Lewis College, move from one college web site to another without becoming confused or disoriented.  Design consistency also provides readers with trustworthiness in college web page information.

Text formatting for Design Consistency :

• Give each web page a primary headline 
• Format primary headlines to be: arial, size 3, bold
• Format secondary headlines to be: arial, size 2, bold or italic
• Format body text to be: arial, size 2, plain or italic
• Format photo captions to be: arial, size 1, plain or italic
• Page background color should always be white
• Font color should always be black

back to top

Home Page Design:
The home is the most visible area of your web site. The home page can be compared to a newspaper page — position matters and stories "above the fold" are much more visible than those below.  Take advantage of the high visibility of your home page; it's the most visited page of your site and is therefore ideal for posting news and important information about your web site. 

The biggest decision you will make about your home page is how heavily you will use graphics on the page. Although strong graphics can be effective at grabbing a browser's attention, large graphics impose long loading times for pages, especially for users linking to the Internet via modems or slow network connections. Even if the user is accessing your Web site at Ethernet speeds, graphic menus may still load many times slower than text-based lists of links.  Let your target audience determine the size and amount of graphics on your home page. 

back to top

Web Page Layout:
Tables can be used to organize text and graphic images on your web pages.  Use of cells in a table is the only way to achieve a layout incorporating side-by-side text and photos.  The best way to prepare a table for layout is create one table and split that table's cells as needed.  Try to avoid nesting tables within tables.

Use the following guidelines to create tables on college web pages:

• Table Width: 500 pixels
• Table Height:  Do no specify, let table content establish this dimension
• Borders: If the table is to be used to hold text and photos in place, do not use a border.  If the table is used to present complex information, use a border of light blue (OO66CC), dark blue (000066) or gold (FFCC33)
• Cell Padding: 5 pixels (this is the space between the inside border of a table cell and cell contents)
• Cell Spacing: 5 pixels (this is the space between cells 

Maximize the top of your web page:  In page layout the top of the page is always the most dominant location, but on web pages the upper page is especially important, because the top four inches of the page are all that is visible on the typical display screen. Use this space efficiently and effectively.

Beware of graphic embellishments:  Horizontal rules, graphic bullets, icons, and other visual markers have their occasional uses, but apply each sparingly (if at all) to avoid a patchy and confusing layout. The same consideration applies to the larger sizes of type on web pages. The tools of graphic emphasis are powerful and should be used only in small doses for maximum effect. Overuse of graphic emphasis leads to a "clown's pants" effect in which everything is garish and nothing is emphasized.

back to top

Web Page Links:
Always refer to the same link with the same name.  Using different names when referring to the same link will only confuse viewers.  Avoid creating link titles using "slang terms" that the average viewer may not understand.  As you create your design you will need to check frequently that all of your links work properly. Information changes quickly on the web, both in your site and in everyone else's. After the site is established you will need to check that your links are still working properly and that the content they supply remains relevant. 

back to top

Web Page Graphics:
Web page viewers will not tolerate long delays.  Research has shown that for most computing tasks the threshold of frustration is about ten seconds.  Web page graphics that load slowly will only frustrate your viewers. Therefore, it is a good idea to be conservative with web graphics.  Make sure that your graphics tell your story so try to use images that are cohesive and meaningful.  Make sure graphics and buttons are distinct.  Avoid graphics that look like buttons but are actually just graphics.

How to prepare images for display on your web site:

• Web site images are available from a variety of sources such as collections on CD that can be purchased and your own digital photos.  To modify these images for your web site however, you will need to install an image manipulation program on your computer such as Adobe Photoshop, Photoshop Elements, Corel Draw or Macromedia Fireworks.  Although it is easy to copy and paste images from other web sites, avoid using these images unless you have permission.
   
• To ensure that your graphic images load quickly, use as small a kilobyte graphic file as possible.  To do this, create your images as GIF or JPEG images at a resolution of 72 and size the image to the pixel width required for your web page layout. 
  
• Web page images should never have a width of more than 150 pixels.  Images larger than 150 pixels can overwhelm a web page layout and signifigantly slow page loading time and therefore annoy the viewer.

How to use GIF and JPEG files: 

• Use the GIF file format for images with large fields of homogeneous color (such as the Fort Lewis College logo).
  
• Use the JPEG file format for photographs and complex images that incorporate gradations or shading.

back to top

Going Live With Your Web Site:
Develop your site completely before going live.  Remember that "Under Construction" banners frustrate viewers so consider disabeling a web page until it is ready to go live.

back to top