Style Guide: Web Sites
The main, graduate, and undergraduate Web sites of Dietrich School of Arts and Sciences were developed through a cooperative effort of the faculty and staff of the school and the Department of University Marketing Communications (UMC). UMC worked with the school’s communications director to develop the graphic identity for Dietrich School and built it into the Web sites. UMC can provide assistance to individual departments creating or maintaining Web sites that support the established graphic identity.
The graphic identity begins with the graphic bar that appears at the top of each Web page. The white graphic bar with the blue and gold Pitt signature is the approved bar for Dietrich School Undergraduate Web site. No other version of the graphic bar is approved.
Note about the Pitt Seal and Logotype (Signature)
The Pitt seal and logotype is under the oversight of University Marketing Communications, and UMC staff is available to answer any questions regarding proper usage. University policy provides for UMC to approve all artwork that includes any University trademarks—including the seal and logotype.
For additional information about correctly using the seal, contact Bill Young at 412-624-4209 or email@example.com.
If you choose to construct a site, UMC can provide a template for your use. This template will include a style sheet that specifies fonts and pixel sizes. Do not choose colors, fonts, or formatting (like underlining or italics) that differ from the style sheet. Adding inline fonts and styles will compromise the established identity and is not permitted.
Photographs, even if they are for a print publication, should be taken with the Web site format in mind. This is because the constraints for the Web are stricter than for print usage, and if you ever want to reuse the images on your Web site, you will have a greater chance of success.
Web editors should provide photographers with the specified pixel heights and widths. Provide the photographers with a printout of the Web site page(s) so that they can match the style used for the Web site.
Specifics for Web site photos:
Dietrich School of Arts and Sciences
Undergraduate Web Site General Photos
Index (home) page icon
If you plan to use a photo for both the Web and publications, make sure it is shot in high resolution (300 dots per inch [dpi] or better). Photos that look acceptable on screen may not be acceptable in print, based on the dpi.
Photographs must be cropped and sized correctly prior to uploading.
Photographs on the site have styles that should be maintained. Refer to the table on this page for department-specific photos and general photos dimensions.
Professional photography is highly recommended. If you need photographs taken for your Web site or publication, contact University Marketing Communications or the Center for Instructional Development and Distance Education (CIDDE) at 412-648-9870 or www.cidde.pitt.edu/photo/.
In addition to the main navigation links, results of usability studies conducted by UMC suggest a “home” link on all the second level pages that will return visitors to the departmental or school home page.
Links in the top bar on all pages should be the University of Pittsburgh seal, Pitt Home, and Dietrich School. The navigation along the bottom of each site page includes a copyright notice, the date of last update, Pitt Home, Dietrich School, and Contact Us. Note that the ampersand is permissible when labeling site navigation.
One very important concept to remember is that your site’s main navigation should not include links that will take your visitors to external sites. The main navigation should take visitors to pages inside your site only.
Update the Content
Department Web editors should regularly update news and events. News is updated on Dietrich School sites as appropriate. Please contact Carol Mullen at firstname.lastname@example.org or call her at 412-624-2136 if you have a suggestion for a feature.
Do not use MS FrontPage to maintain this Web site. Adobe Contribute will work for basic edits and Adobe Dreamweaver can be used for more difficult tasks.