Design details of Yale page grid

The Yale page grid and interface elements in more detail:

Core elements of the page grid

Yale page headers

Web page headers establish the identity and broad navigation of a site. Yale page headers are designed to follow widely-adopted conventions for the design of web page headers, particularly in the placement of University identity, search features, and general University navigation:

The Yale header program further elaborates these basic features, adding optional elements that can be useful for signaling department relationships, and in general site navigation through the use of header links, folder tabs, or pop-up menus. Many of these features are optional, and Yale sites seldom require the entire vocabulary of header elements.

Within this basic design program a wide variety of visual "look-and-feel" options are available, as reflected in these examples, which all follow incorporate the Yale core design elements:

Yale page footers and the Yale logo

Yale page footers must always incorporate the Yale logo, using spacing and color design consonant with Yale's general web identity program. The logo should always be linked to the Yale home page, www.yale.edu.

Yale page footers also carry important copyright, date, and policy information. A link to the general Yale privacy statement is mandatory if you use any form of client-side (Google Analytics) or server-side web analytics.

See the Office of the University Printer site for further references on use of the Yale logo.

School design programs

School web design programs will likely differ from "core" Yale administrative and business sites. For example, the Yale Medical School web design program achieves a very distinctive school identity that is also firmly bound to the general Yale web identity.

Note that although some interface details are different, the color, typography, page grid, and the identity details all establish a unique YSM identity that still retains a strong visual and interface bond to the general Yale web "look-and-feel."

 

Design examples, XHTML & CSS, and example templates

Blue site design guidelines

A PDF of highly detailed design specifications for the Blue Site (Yale front door site, www.yale.edu),
from the Office of the University Printer.

WhiteSite: Yale page template grids

Detailed XHTML and CSS page grids for typical Yale pages, by Victor Velt of Web Publishing services.

Web standards for Yale pages

Please see our current reference standards for XHTML and Cascading Style Sheet (CSS) markup for Yale web pages.