facebook    
 

Information Technology

Building: Pennsylvania Hall
Phone: (717)337-6601
FAX: (717)337-6666
Office Hours: M-F 8:00-5:00
Campus Box: 2993

 

Organization/Departments


IT Committees
DataSystems
Instructional Tech/Training
Infrastructure & Computing
IT - Photo Gallery



Search


Web Page Design

Establish a Visual Hierarchy
The primary task of graphic design is to create a strong, consistent visual hierarchy, where important elements are emphasized, and content is organized logically and predictably.  Well-structured pages help you deliver ideas effectively and help the reader navigate through your site.

Direct the Reader's Eye

The upper part of web pages is especially important because the top four inches of a web page is all that is visible on a typical 14 to 16 inch computer monitor.


Graphic Distractions

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 applies to larger sizes of type.  Text on the page should be easy to read.  If you add a background to your web page, it should contrast with the text color.


Be Consistent

Establish a layout grid and a style for handling your text and graphics, then stick with it to build a consistent rhythm and unity across all the pages of your site.


Use Tables as a Layout Tool

Tables are currently the only HTML option to ensure proper page layout.  Get everything set up inside the table and remove the table border as your last step so that it does not appear as a table on your web page.

Make links context-sensitive and meaningful

Avoid "Click here for an HTML tutorial"
Use instead "See the NC State Computing Services' HTML tutorial"
Contextual links make your document more usable as printed material.


Give document information if especially long or image rich

See my really cool image page!
See my really cool image page [2800K]!


Use white (or grey) space

White space is even more important online than for paper documents; use paragraph tags and lists to break up online text. Source documents must also be easy to edit so use blank lines (they don't show up after all).


Use graphics carefully -- more isn't better

Use images that clarify or illustrate, while avoiding "image for image sake." Also consider client and server speed: an excessively long download time can be very annoying, especially if you wait 2 minutes only to find that someone decided to use their entire icon collection on one page.  Although graphics can make web pages more interesting, you should use graphics strategically.


Consider differences in browsers

Web pages may not look the same in different web browsers or even different versions of the same browser. It¿s a good idea to plan your web pages so they are viewable in most browsers and test your pages on all browsers you can.
 

Sign and timestamp your document

Give the date of the last modification and the name of who's in charge of the document on at least the first page. Also, since date representation is so varied around the world, use the name of the month.

(Last modified on 4/4/95 by rmn) could be August 4 or April 4.

(Last modified on August 4, 1995 by rmn) is preferred.


Document should be easily printed (or not)
This is a tough one. Should your document be formatted to print easily? Doing so would entail long, scrolling documents which are sometimes difficult to navigate online. And, if you want the document to be printed, why is it online in the first place? You probably need to evaluate what "need" your page is serving. If it might be beneficial to print for some folks, you should probably keep that in mind as you design your document.
 
 
Gettysburg College 300 North Washington Street · Gettysburg, PA 17325
P: 717.337.6300