"Man is the great pattern-maker and pattern perceiver.
No matter how primitive his situation, no matter how tormented,
he cannot live in a world of chaos."

Create a solid and logical structure

Use categories established in project design

Adobe
University of Arizona
Campus Health Center
The Architecture Project

Site organization

Yale Style Manual - sequence graphic
Yale Style Manual - Hierarchy graphic

Home page

The home page establishes the identity of a site.
(title, logos, graphic elements, colors, theme)

Organization of the home page should help the user create a mental map of the project.

Show general categories and, if needed, what is expected to be found within each category.

Create an attractive and functional home page that downloads fast.

Adobe
University of Arizona
Campus Health Center
The Biology Project
The Architecture Project

Graphics, logos, buttons, etc...

Follow lighting convention unless there is a reason to do otherwise

Frames
NYU
Marine Discovery
Buttons

UA
Prosp. Students

Subsequent pages

Design each page from the upper left-hand corner

Place identifier at the top

Identify sub categories or sections near the top and to the right of the document

Place title in the upper center

The Architecture Project
The Biology Project

Keep width of page within 500 pixels

Keep the location of the elements constant

Place or repeat menu options at the bottom of page (even if you have top or side menu bar)

Link all pages to your Home Page

BP, Human Genetics

Let people know at all time where they are within your project

Page Mill

Consider the orientation of the graphic when integrating text and graphics

head
urchin

Place footer at the bottom of each page.
(Footer should Identify your project, your institution, date of last modification, a contact person, URL for the project, and any copyright information you might have.)

BP, Human Genetics

Create uncluttered and readable pages

Displaying text - Studies show that reading on a screen is 25% slower than reading on paper.

To improve readability:

Use blank spaces liberally

Integrate graphics into your text, when appropriate

Breakup cluttered pages

Use upper - and lowercase versus all caps

Left-justify text , but do not right-justify it

Highlight important items: indent, color, bold, or present in blocks or lists

Avoid blinking or unecessary animated gif that distract from the content of the page

Human Repr.

Resources on Web Design

The Web Style Manual
by Patrick Lynch at the Yale Center for Advanced Instructional Media
http://info.med.yale.edu/caim/manual/contents.html

Jakob Nielsen's Usable Information Technology
http://www.useit.com/