McMaster Brand Standard for Websites

Transcription

1 McMaster University s policy calls for all university websites to follow its brand standard. McMaster websites share common elements, presentation and behavior and a consistent design, enabling visitors to navigate seamlessly from site to site within the McMaster domain. The McMaster University website provides a model for all mcmaster.ca sites. Templates for developing sites can be downloaded from: Which areas are required to use the brand standard? 1. ALL OF THE FOLLOWING AREAS ARE REQUIRED TO USE THE BRAND STANDARD FOR WEB SITES: All university administrative areas All Faculty, School, Institute and program sites All department and division sites and all centres within the departments and divisions All sites using the mcmaster domain Page 1 of 12

2 2. THE FOLLOWING AREAS ARE ENCOURAGED BUT NOT REQUIRED USE THE BRAND STANDARD FOR WEB SITES: Individual faculty member sites 3. THE FOLLOWING AREAS ARE NOT ALLOWED TO USE THE BRAND STANDARD FOR WEB SITES: Student and other sites not affiliated with or approved by the University or the McMaster Students Union Any site that is not affiliated with the University. What elements must remain common across all websites? A McMaster website may be divided into the following five areas: header (including the McMaster logo), top navigation bar, left navigation bar, content area and footer. Page 2 of 12

3 Page Specifications 1. Page Dimensions Width: 945 pixels fixed Height: variable 2. Layout The new design uses <div> containers instead of tables to layout pages Tables are used only to contain tabular information 3. Text Font-family: Specify Verdana as the primary font. If Verdana is not available on the user s computer, then specify Ariel as the second choice, Helvetica as the third, and sans-serif as the default CSS font-family: Verdana, Arial, Helvetica, sans-serif Do not change the order of the attribute for font-family in the stylesheet. For example, Arial is not allowed to be the primary font Do not use other fonts Font-sizes: Allow user s browser to set initial font size and specify font sizes relative to the initial size Colours: Use approved colour palette below. Do not use other colours 4. Graphics Colours: Use approved colour palette below Use CSS to create borders and graphical elements whenever possible instead of using image files. Use borders and horizontal rules to separate content sections. Light gray (#CCCCCC) and maroon red (#990033) are preferred for borders and horizontal rules 5. Page backgrounds and borders Do not use background colours or background images for the page body Do not use borders around the page body 6. Images Page 3 of 12

4 Colour photography is to be used Photography should look natural and candid, not posed Photographs taken on campus and university subjects are preferred over stock photography Panoramic photographs or images are encouraged for home pages and may also be used on other pages. The dimensions are 776 pixels wide and from 200 to 287 pixels high The subjects of photographs are intensely engaged in what they are doing and, when possible, working together towards a goal With static subject matter, focus on foreground elements or subjects, creating depth and visual interest. Subjects should be actively involved in an activity or discussion When possible, subjects should be focusing on an object or tool Photographs of campus buildings should include people and activity to show community Departments are encouraged to create photos reflecting consistent University themes Limited use of photo animation refreshing photos in a clean and simple way is permitted. Broken images and complex animation are not appropriate Photo Gallery It is important to demonstrate real innovation and collaboration within the McMaster community. You may select images from the McMaster Photo Gallery: Page 4 of 12

5 Colour Palette Specifications The selected palette is comprised of a range of tones that are drawn from the primary school colours to form a primary and secondary palette. The tertiary colour palette allows the addition of colours to enrich the University as a whole. These colours should be used only as an accent to the primary and secondary palette. Primary Colours Dark Gray Web Code: # Secondary Colours Maroon Red Web Code: # Black Web Code: # Medium Gray Web Code: # Tertiary Colours Light Gray Web Code: #CCCCCC Yellow Web Code: #FFCC33 Blue Web Code: # Page 5 of 12

6 Header Specifications 1. Header to be the same as on the main McMaster website. 2. McMaster logo, text and links are the same on all websites. 3. Only the optional radio button under search may be customized in the header for each website. 4. Dimensions Width: 945 pixels Height: 160 pixels 5. McMaster logo Located in the top left corner Where is the image file for the McMaster logo? Download the McMaster logo from the main McMaster website: 6. Maroon bar Located in top right corner Colour: maroon red (code #990033) Width: 500 pixels Height: 8 pixels 7. Links to MUGSI and the Faculty and Staff Directory are in the left section under the maroon bar. Text for links: Colour: black (code #000000) Font-family: Arial, Helvetica, sans-serif Font-size: 0.63em Font-weight: bold 8. Quick Links Contain the same links as on the main McMaster website. Located below the right maroon red bar in the right section Font-family: Verdana, Arial, Helvetica, sans-serif Page 6 of 12

7 Colour: black (code #000000) Label Font-size: 0.69em Font-weight: bold Text Box Font-size: 10 pixels Font- weight: normal 9. Search Located below the Quick Links in the right section The search box has the ability to search the entire McMaster domain (i.e., The main McMaster website uses a Google Customizable Search Engine that is available for all websites to use Search label: Colour: black (code #000000) Font-family: Verdana, Arial, Helvetica, sans-serif Font-size: 0.69em Font-weight: bold Search text box: Font-size: 10 pixels Font- weight: normal Search radio buttons (optional) Located below search label and text box Allow users to more specifically target the search. The first radio button searches the entire mcmaster.ca domain, the second searches the website within the domain, and optionally, a third may be used to search a specified section of the website or another website within the domain. Colour: black (code #000000) Font-family: Verdana, Arial, Helvetica, sans-serif Font-size: 0.90em Font-weight: bold Page 7 of 12

8 Top Navigation Bar Specifications 1. The header has the following dimensions: Width: 941 pixels Height: 33 pixels 2. All university administrative sites and faculty sites must use the McMaster global navigation in the top navigation bar. 3. All other areas may choose to use the top navigation bar as their primary site navigation or use the McMaster global navigation. 4. The text for the links have the following characteristics: Font family: Verdana, Arial, Helvetica, sans-serif. Font size: 12 pixels Font weight: bold Colour: white (code #FFFFFF) Background: maroon red (code: #990033) Background on hover: dark gray (code #666666) 5. When the cursor hovers over a parent link in the top of the top navigation bar, a submenu may optionally drop down. 6. When the cursor hovers over a link in a submenu, a second sub-menu may optionally drop down. 7. Do not use more than three levels in the top navigation bar. 8. All drop downs use the same text characteristics defined for the parent link in the top navigation bar except that a dark gray (code #666666) border separates each drop down menu item. 9. All drop downs are left-justified under its parent link, except if the drop down would go over the right edge of the page, in which case the drop down is rightjustified under its parent link Page 8 of 12

9 Left Navigation Bar Specifications 1. Dimensions: Width: 169 pixels Height: variable Top margin: 10 pixels Bottom margin: 10 pixels Padding right: 25 pixels 2. Text (first level of menu) Font-family: Arial, Helvetica, sans-serif Font-size: 0.75em Font-weight: normal Colour (on mouse out): black Colour (on hover): maroon red Padding right: 3 pixels 3. All university administrative sites and faculty sites use the left navigation bar as the primary navigation for the site. 4. If other areas choose to use the top navigation bar as their primary navigation, then the left navigation bar may be used for secondary navigation. 5. Drop downs, where needed, appear after parent link is clicked. 6. Do not use more than three levels in the left navigation bar. 7. Text (second level of menu) Font-family: Verdana, Arial, Helvetica, sans-serif Font-size: 0.91em Font-weight: normal Colour (on mouse out): maroon red Colour (on hover): black Padding right: 6 pixels 8. Text (third level of menu) Font-family: Verdana, Arial, Helvetica, sans-serif Font-size: 1em Font-weight: normal Colour (on mouse out): black Colour (on hover): maroon red Padding right: 6 pixels Page 9 of 12

10 Content Area Specifications 1. Dimensions Width: 776 pixels Height: variable 2. Text Font family: Verdana, Arial, Helvetica, sans-serif. Page 10 of 12

11 Footer Specifications 1. Footer to be the same as on the main McMaster website. All text and links are the same on all websites. 2. Do not put other information in the footer. For example, do not put another copyright or contact information for your department in the footer. Locate this information elsewhere within the content of the site. 3. Dimensions Width: 945 pixels Height: 43 pixels Top Margin: 20 pixels Top border: 3 pixels Top border colour: light grey Top Padding: 10 pixels 4. Text McMaster copyright, address and phone number separated by vertical bars Font family: Arial, Helvetica, sans-serif. Font-size:.69em; Font-weight: bold Colour: dark gray 5. Links Contact Us page URL: Terms of Use & Privacy Policy page URL: Font family: Arial, Helvetica, sans-serif. Font-size:.69em; Font-weight: bold Colour: dark gray Colour (on mouse out): dark gray Colour (on hover): maroon red Page 11 of 12

12 Other Specifications 1. No advertising is permitted on any web pages. No names or links of external contractors work on websites are permitted. Software names are also not permitted. 2. All websites should render in the following browsers: Internet Explorer versions 6.0 and 7.0 Firefox 2.0 Safari 2, 3, 4 Page 12 of 12