The Michigan State University Masthead, Search Tool, and Standard Footer were designed to provide a high level of flexibility for web designers and developers.
Each element can be integrated easily with existing MSU websites without extensive redevelopment or coding. Examples of properly branded websites are provided below.
Complete design files, web-ready graphics, and code examples are available for download. (See Resources and Downloads)
11.1 What to Do When Updating a Website
- Place the site name text below the MSU Masthead.
- Make the site name stand out by using 48px (3rem) Georgia typeface. For site names that are long or span multiple lines, reduce the font size but do not go smaller than 28px (1.75rem).
- Check the text color contrast for accessibility compliance.
- Explore interesting, new web design directions by leveraging how the MSU Masthead and Standard Footer were designed to display well over solid colors as well as rich photos and illustrations.
[Removed all web design examples (sections 11.2 thru 11.7)]
Website examples:
- Responsive website: University Communications: https://comms.msu.edu/
- Non-responsive website: Cascade Server: http://cascade.msu.edu/
11.2 Multi-line site names
Site identification is provided by the site name that displays in the site header area below the MSU Masthead. Two versions are available:
- One line – a single line that identifies the website unit
-
Multi-line – two or three lines that identify the website unit and parent or affiliate unit*
* The first line should refer to the website currently in use (similar to the one line site name example), with a reverse hierarchical order displaying the site's univeristy affiliations.
One line example:
Multi-line examples:
Site name link
The site name block, regardless of its content, should provide a single hyperlink back to the current site's homepage.