Home › Graphic Identity Program › Web sites

Web sites

• Guidelines
• Top banner
• Footer
• Page Titles
• Downloads
• Colors and Fonts

The following guidelines apply to all UMass Amherst Web pages, except for personal pages.

Guidelines

• Following the guidlines in this Graphic Identity guide will keep your site distinctive while also branding it as part of the UMass Amherst family of sites.

• Don’t duplicate the look of the UMass Amherst Gateway (www.umass.edu) at the top of your Web pages, or make the top of your Web pages look too similar to the top of the UMass Amherst top-level pages. Users will get confused if your Web pages are not clearly identified as belonging to your organization.
• When designing your site, keep standard Web design practices in mind for usability and ease of use.

Questions or need help? Contact Nina Sossen at 577-4741 or via email.

Top Banner (New Version: October 2006)

All UMass Amherst Web pages, other than personal pages, must include one of the versions of the standard top-banner strip, like the maroon strip at the top of this page.

This banner serves two functions: It clearly brands the site, showing it to be part of UMass Amherst, while still allowing for a unique design in all other aspects of the page. It also links to the UMass Amherst homepage and the site search.

Create a top banner in a color scheme of your choice:

Color scheme: Maroon on Gray White on Maroon White on Black

Code:

Note: The code created by the generator can then be placed directly into your site. The code includes links to the graphics on the main umass.edu site and the graphics will appear correctly when your site is viewed live. This makes it easy to update or change the graphics across all the campus sites if this should become necessary. Please do not copy the graphics from the top banner into your own site.

Examples of top banners in place:

• Department of Computer Science
• Department of Chemical Engineering
• UMass Amherst Foundation
• In the Loop
• Student-Athlete Services
• Vice Chancellor for University Advancement

Footer

All UMass Amherst Web sites should have a two-line footer at the bottom of each page. The standard format is:

© 2006 University of Massachusetts Amherst. Site Policies. This site is maintained by School/College/Department.

"University of Massachusetts Amherst" should link to the UMass Amherst home page at http://umass.edu.

On the second line, replace "School/College/Department" with the name of the group responsible for the content and maintenance of the page. This should link to either a Web page with clear contact information, including at least an email address, for the person or people to whom questions or comments about this site can be addressed, or be a direct link to the contact person's email.

"Site Policies" should link to http://umass.edu/umhome/policies/

The UMass Amherst seal can be placed either to the right or left of the two-line footer as shown. The seal can appear in maroon, black, white, or gray, at the discretion of the designer. NOTE: If the UMass Amherst seal appears prominently elsewhere on the Web page, placement of the seal in the footer is optional.

Page Title

The page title displayed in the top edge of Web page is determined by the title tag code. It is important that pages be clearly marked as originating from UMass Amherst. The words in a page title is also important when search engines index and display pages. In order to clearly brand pages both when viewed on the UMass Amherst site and to optimize UMass Amherst pages in search results, the following guildelines should be followed:


Guidelines

• All UMass Amherst Web pages, except personal pages, should have a title tag of the following format:

<title>UMass Amherst: Name of Department or Program or Whatever</title>

OR

<title>University of Massachusetts Amherst Department of Whatever</title>

Replace "Name of Whatever" with the official name of the department, program or entity.

Tips

• Titles should contain no more than 66 characters, to take full advantage of Google's display capabilities.

• Do NOT use just "University of Massachusetts Amherst" or "UMass Amherst" without a further defining site name.

Examples. (click on images for larger view)





Downloads

Below are GIF files for download in both ZIP and StuffIt (SIT) format of the campus Seal, the combination form of the Wordmark and Seal and the formal Wordmark without the Seal. Each download file contains a variety of sizes in the same color.

To use other marks or other sizes on Web pages, go to the Seals, Logos, & Other Marks section of this site and download TIFF or EPS versions, which can be scaled as needed.

		Maroon Seal: includes 200, 150, 100, 70 and 50 pixel sizes. ZIP | SIT
		Black Seal: includes 200, 150, 100, 70 and 50 pixel sizes, plus grey seal in 50 pixel size. ZIP | SIT
		Combination Mark: includes 350, 200 and 100 pixel sizes. ZIP | SIT
		Formal Wordmark: includes 350, 200 and 100 pixel sizes. ZIP | SIT

 

Colors and Fonts

The university's official color, UMass maroon is a central component of the Graphic Identity Program for Web applications. On the Web, this shade of maroon is coded as #881C1C. You may use other colors in the design of your page. Including the top banner, campus seal, footer and other marks will brand your page as part of UMass Amherst.

"Verdana, Geneva Arial, Helvetica, sans-serif" is the recommended font setting for HTML text in Web pages, and is used throughout this site. Similar defaults found in your Web editor are also acceptable.

Graphic elements such as headers and buttons can be created using Sabon, Centaur or Frutiger. Since these intended to be used when fonts are displayed in graphics, or as designed graphic elements, you should not use them for HTML text.

For designed graphic elements, use either Sabon as the serif font. For designed sans serif font, use Frutiger. Correct and consistent use of UMass Amherst's official colors and typefaces helps reinforce the campus identity.

Web Colors

Maroon and Gray:
	000000	666666	666666	999999	CCCCCC	FFFFFF	881C1C
	881C1C	CC3333	FF6666	FF9999	FFCCCC	FFFFFF	881C1C
Warm Colors:
	993333	CC6666	FF9999	663333	996666	CC9999	881C1C
	CC6633	FF9966	FFCC99	996633	CC9966	FFCC99	881C1C
	993300	FFCC33	FFCC66	FFFF66	FFFF99	FFFFCC	881C1C
Cool Colors:
	333300	666600	999933	666633	999966	CCCC99	881C1C
	003333	006666	339999	336666	669999	99CCCC	881C1C
	333399	6666CC	9999FF	666699	9999CC	CCCCFF	881C1C