Our goal is to use a series of templates and style sheets to enable a a consistent family look and adhere to quality standards that reflect CDes and the University while simultaenously allowing individual schools, departments, and units the flexibility necessary to communicate effectively.

The basic layout of your pages is controlled through a series of templates and style sheets. Each template has a consistent family look that has been pre-defined. If you are responsible for designing or developing new Web sites, it is your responsibility to implement the family look on your pages using the templates and resources provided in the resource library.

Recommended common page elements

The recommended common elements of the College of Design family look for Web pages is shown below. Important note: The College Web site is currently undergoing a redesign. Check back for important updates.

The following standards apply to all Web pages within the College of Design.

1. University header and footer are used on all pages. These elements are available in the University's Web Depot.
2. The CDes wordmark and colorbar are used on all pages.
• Unit-specific identity elements are used in the banner of all pages.
• The banner on landing and content pages (all pages other than the home page) may be reduced in height.
3. A global navigation bar ("Menu") appears beneath the banner.
• A left-hand navigation system, 180 pixels wide, is used for consistency with University style.
• This navigation system is generated and maintained as part of each page's underlying template.

Important note: If you need consultative help with your site's information architecture and navigation, contact Michael Fraase, mfraase@umn.edu.

The family look gives Web site visitors a consistent user interface and navigation structure. The family look templates also meet privacy and accessibility requirements which the college and University must meet.

Please note that the family look and Web site user interface will continue to evolve. The communications office will make updated templates available in the resource library throughout this evolution.

Important note: When you use the CDes identity system, please be sure to use the files available in the resource library. Please do not alter them or use your own alternatives. This applies to University identity resources as well.

Template and layout standards

The header, banner, sidebar(s), footer, and content area are defined in the templates. The templates ensure design consistency across the site and are defined by the graphic designer and maintained by the site developer.

A global header incorporating the University wordmark, links to One Stop, directories, University-level search, and parent links at the top right is included.

A banner incorporating the College of Design identity. You can replace this banner in the template with your own identity. Please be sure to keep the banner dimensions the same size. Please include the CDes identity elements (wordmark and colorbar) in your design.

A primary navigation bar in the left-most column.

A global footer incorporating copyright, equal opportunity and privacy statements, text resizing information, and an e-mail link to the University's central contact office.

The content area of the page. Again, these layouts ensure design consistency across the side and are defined by the graphic designer and maintained by the site developer. Content providers choose the appropriate template and enter their content into it.

1. Several templates have been created for your use; be sure to choose the most appropriate for your content (e.g., select a directory template for a staff directory, but not for an article).
2. The content area defined by the templates and layouts is 600 pixels wide.
3. The templates and layouts are based on a flexible grid structure.
4. Consistent graphic elements are used throughout the templates and layouts.
5. A Cascading Style Sheet (CSS) is used to control typographic formatting and element positioning.

Cascading Style Sheet (CSS) standards

Like the templates and layouts, the site-wide Cascading Style Sheet (CSS) ensures design consistency across the site and is defined by the graphic designer and maintained by the site developer.

The style formatting for every page in the Web site is governed by the Cascading Style Sheet (CSS) assigned to that page's template. CSS is used to ensure consistency, accessiblity, and to separate content from style.

If you need a style that is not defined in the template's CSS, contact Michael Fraase, mfraase@umn.edu, and the Web team will consider adding it. Please do not use custom source code elements to attain the style you want.

Color and type

Consistent treatment of type throughout a Web site makes it easy for users to navigate and gives visitors a uniform and consistent experience. These font and type-size recommendations are incorporated in our downloadable Web templates and Photoshop files. Please note: type and color is governed by the site-wide CSS which is referenced in each template.

Web typography

Heads, subheads, and body text are all set in the Verdana typeface. The CSS declaration for all type specifications is "font-family: Verdana, sans-serif;" This tells the user's browser to use Verdana if it's available and, if not, to use the sans-serif typeface the user has specified in her browser preferences.

The electronic standards section of the University's Graphic Standards suggests the following type specifications for HTML typography:

• Headlines: Verdana Bold, 15 pixels
• Subheads: Verdana Regular, 15 pixels
• Left-navigation titles: Verdana Bold, 12 pixels
• Body text and links: Verdana Regular, 11 pixels