 |
 Template Type Color Graphics Technical Notes Resources Contact UMBCstyle Home |
UMBC Web Style GuideThe first phase of UMBC's Web site redesign in fall 2006 refocused the homepage on the needs of external users, while making myUMBC more useful to internal users.Emedia, UMBC's collaborative Web team, is now extending the redesign to provide a consistent university identity across the UMBC Web site. In user research, the team heard from prospective students that they have a better experience navigating university Web sites when it is clear that they are within the same site. In response, Emedia created a standard university template with minimal required features to be used by UMBC departments and programs. The template provides a consistent university identification, while allowing departments/programs the flexibility to design their sites according to their needs and content. The template is currently being incorporated into major sites (such as the Graduate School, Undergraduate Admissions, About UMBC and the "Resources for" pages on the UMBC homepage). We ask that department and program webmasters incorporate the UMBC template when they redesign their sites. This guide and the Emedia team can help webmasters incorporate the UMBC Web style. If you need additional assistance, please contact the Emedia team at webteam@umbc.edu. Here are some examples of how schools, departments and programs are currently using the official university template: * About UMBC * Alex. Brown Center for Entrepreneurship * College of Arts, Humanities and Social Sciences * Department of Public Policy * Graduate School * Media and Communication Studies * The Honors College at UMBC * Undergraduate Admissions TEMPLATE This is the standard UMBC template. This template will establish consistency across the UMBC web site. The university logo will always appear in the upper left and the site utilities and search function in the upper right. This upper section should not be changed. For example, the site utilities (The six UMBC links in the upper right) should always be A-Z Index, my UMBC, Calendar, Computing, Directory and Maps. The template also has a consistent background image and page width. In addition, this template offers a great deal of flexibility, allowing the end user the freedom to design the content area to their client's/department's specification.  Click the image to download template TYPE The font family of Arial/Helvetica, sans-serif offers excellent online readability and is most complementary to the overall UMBC Web site. Secondary pages on UMBC's Web site have titles, headers, tool bar links and side bar links. When considering type for the web, the font-family of arial, helvetica, sans-serif are most complementary to the UMBC Web site. Titles appear at the top of the Web browser and should follow this format: "UMBC: An Honors University in Maryland - Page Title" Headers appear in the body of the page. For example the header on this page is UMBC's Web Style Guide. The format of the headers is determined by a Cascading Style Sheet(CSS) using an H2 tag (see example below). h2 {font-size:24px; font-family: arial, helvetica, sans-serif; font-weight: normal; color:#f00} Tool bar links have some flexibility. In this case, the top bar links were generated in photoshop and utilize drop down menus. Tool bars should measure 880 pixels width x 25 pixels hieght when generating them in photoshop. Side bar links also have some flexibility. In this case, the side bar links utilize CSS and follow the format of other UMBC secondary webpages. COLOR UMBC web style encourages prominent use of official UMBC colors. The school colors for UMBC (and all University System of Maryland [USM] institutions) are the colors of the state flag: red, gold, black and white. UMBC's traditional spirit colors are black and gold. The UMBC Web site was created using browser-safe colors, the 216 colors used by most browsers. Using the browser-safe palette helps to ensure colors will appear the same between browsers, across multiple platforms and with different operating systems. The university color palette is Black (Hexidecimal Code #ffffff), Gold (Hexidecimal Code #ffcc00), and Red (Hexidecimal Code #ff0000). GRAPHICS Graphics were created in Adobe Photoshop at 72dpi in RGB mode, converted to Index color and exported as .gif files if they are line art or contain text and saved as .jpg if they are photographic images. TECHNICAL NOTES
If you would like to develop a UMBC-related web site, the following resources are available:
If you have feedback or questions about the new UMBC template, want feedback on your site, or would like more information about web development or other technical/policy issues, please contact the Emedia team at webteam@umbc.edu. |