Views:
PALMM Website Design Guidelines
KBA-01637-X5B1
Question
What are the PALMM Website Design Guidelines?
Answer

Purpose

PALMM website design guidelines are intended to encourage some consistency among PALMM websites in visual layout and navigation, while allowing each project or collection to express its own individuality. There are at least three advantages to following PALMM design guidelines: they help patrons use the websites, by ensuring consistent and predictable design features; they help to "brand" projects as part of a larger whole by giving them a common look and feel; and they help website designers follow commonly accepted principles.

General Guidelines

The use of frames is not recommended at this time.

Use of animation is not allowed.

Dark letters on light background is recommended.

Supported Browsers

PALMM sites should be tested with several common browsers. We recommend testing with:

 

Google Chrome (Windows)

Firefox 2.0+ (Windows, Mac, Linux)

Internet Explorer 6.0+ (Windows, Vista)

Safari 3.0+ (Mac)

 

Graphics

PALMM banner

A thin horizontal graphic intended to identify a website as participating in PALMM. The blue banner below can be used, or a custom banner can be made in any color in order to coordinate with the website.

PALMM Banner.gif (600×53)


PALMM icon

A small "square" graphic that may be used as a navigation tool in the header. The use of the icon in the right corner depends upon the individual project. Icons of sponsoring organizations can also be placed in the upper right corner of the header on the secondary pages.

PALMM icon.gif (80×62)


Small PALMM icon

A smaller version of the graphic used in the trailer as a navigation tool.

Small PALMM icon.gif (70×55)


Website Logo

A larger graphic unique to each project or collection. The logo dominates the look and feel of the homepage, and should be designed to communicate the identity and theme of the collection. Use of a professional graphics designer is encouraged.

 

Website icon

A small "square" graphic used as an icon identifying the project or collection. It should be a simple, uncomplicated graphic object that has some clear relation to the website logo. For example, the logo for the Florida Heritage Collection is a collage including many images including an orange bough. The orange bough alone is used as the icon for the project.

 

Home Page

 

The home page of a PALMM collection should follow the simple template described below.

The PALMM banner should appear horizontally along the top of the page. Under this, on the right and center of the screen, appears the websites' own logo. There are no constraints on logo design, apart from a guideline on approximate size and shape. If the name of the project is not included as part of the logo, it should appear immediately above or below the logo. The logo must be followed by a short description (one or two paragraphs) of the purpose and content of the project or collection. Optionally, important buttons (for example, to search the collection) may appear between the logo and the descriptive text. It is important that, when displayed in commonly-configured browsers, at least two lines of the descriptive text appear on the screen without requiring scrolling or paging down. This alerts the user to the presence of the description.

Running vertically down the left side of the page should be a sidebar column of important links, topically about or related to the website. When applicable, standard links should appear: About the Collection, Technical Aspects, Help using this Site, Related Sites, Copyright Information, Contacts and Credits. Use of other links relevant to the specific website are encouraged; for example, the Florida Heritage Collection has links to a Florida History Timeline.

More general links, e.g. to the SUS homepage or a University homepage, should appear in a horizontal list at the bottom of the website homepage.

 

Secondary Website Pages

 

Pages which are part of the website, for example, sidebar links such as "About the Collection", should follow these design guidelines:

 

Background:

A single background color and or texture should be chosen and used consistently on all website pages. Use of the same background on the homepage is not required, but a color and texture compatible with the homepage overall, and the website logo and icon specifically, is obviously a good idea. Lighter colors and subtle textures are recommended.

 

Header:

All website pages should have a header, with three elements, from left to right: the website icon, the name of the website (project or collection), the PALMM icon or the icon of the sponsoring organization. The website icon is a clickable link taking the user to the project homepage. The PALMM icon is a clickable link taking the user to the PALMM homepage. If the sponsoring organization is used, it is a clickable link taking the user to the home organization homepage.

 

Trailer:

All website pages should have the same trailer, with four elements centered on the page. From top to bottom these are: the website identification, the small PALMM icon linked to the PALMM homepage, a "Contact Us" mailto: link to palmm-mail@ufl.edu, and the last update date.

 

Navigation

Clicking the PALMM banner or PALMM icon, wherever it appears, returns the user to the list of all PALMM Collecitons at http://palmm.fcla.edu.

Clicking the website (project or collection) icon, wherever it appears, returns the user to the website homepage. The website icon always appears on the left-hand side of the header on website pages. It may also appear embedded within a page, for example, in a User's Manual, as a quick return to the homepage.

Additional Documentation
Environment