Access Keys:
Skip to content (Access Key - 0)

Web Resources

Design and Layout Standards

Added by Roberta Roebuck , last edited by Laura Kling on Apr 16, 2015 10:46
Labels:
webdesign webdesign Delete
design design Delete
standards standards Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

 

 

In order to maintain a common branding and identity among official campus websites, there are a set of design standards that all official campus web pages should follow. While these standards do impose some "sameness" and structure to your pages, research has shown that users rate sites with consistent design and branding as easier to use, more credible, and more trustworthy than sites that contain radically different designs or high levels of design inconsistency.  Following these standards can improve the usability of your site and increase the credibility of your department.There are three types of university-branded websites:* Basic template (low cost option)

Auxiliary organizations that still have ties to the University are not required to use any of the above three options. They can have a custom design without university branding.

Home Page Standards

Unit and department home pages should follow the basic structure shown below.

Basic Templates

A basic template is available to all departments for use in Cascade Server, the WCMS. The basic template meets the University's minimum design standards. To contract a basic template with Web Services, please fill out the online web form.

See the basic templates.

  1. Header - All pages must have a header at the top of each web page. The header contains the CSU, Chico signature, the university-wide task navigation, and a search box. A search box is required and searches only the department site.
  2. Identifier - The header must contain the CSU, Chico signature, which links back to the campus home page. The CSU, Chico signature should not be changed or distorted in any way.
  3. Top Navigation - An optional top navigation bar can be used as a secondary navigation if desired. It is not required.
  4. Left Navigation - All pages must have a navigation bar placed below the header along the left side of the page. 
  5. Banner - A stock set of rotating campus scenes is used.
  6. Department Name - The name of your department or unit will be displayed in Verdana Bold, white, all capital letters over the bottom, right-hand corner of the banner image (#5)
  7. Quicklinks - A set of quicklinks in the form of a dropdown menu can be used to contain internal or external web links. It is not required.
  8. Highlight or callout box - This can be used to make an announcement, link, or event more prominent throughout your site. It is not required.
  9. Main content area - has few restrictions, but should at least contain one paragraph or list. The standard font is Verdana for text and headings. All content on every web page must meet CSU system, state, and federal accessibility requirements. 
    1. Font family and size of the text in the templates should not be altered. 
    2. Headings should not be made into links. Rather, put links in regular paragraph format under heading instead of linking it directly.
  10. Right-hand column  - This column can be used for news and events, announcements, and feature articles. The right-hand column is not required.
  11. Footer - All pages must have a footer containing standard campus links and contact information for the department or unit. The footer also contains a general university copyright.
  12. Background - The background image behind your site content must use the orange arches.

Customized Templates

A customized template is available to all departments for use in Cascade Server, the WCMS. Departments can customize their own photos, content, quicklinks, and navigation items themselves, or contract with Web Services to create a slightly customized template for them. Web Services can create customizations that include custom photos, colors, and other small items, as well as building out a complete template for a department. To contract a customized template, please fill out the online web form.

See examples of customized templates.

  1. Header - Same as basic template.
  2. Identifier - Same as basic template.
  3. Top navigation - Same as basic template.
  4. Side Navigation - Same as basic template.
  5. Banner - A banner image (or set of rotating images) can be used to customize your site. If you don't have photos of your own, the stock set of campus scenes will be used.
  6. Department Name - Same as basic template.
  7. Quicklinks - Same as basic template.
  8. Highlight or callout box - Same as basic template.
  9. Main content area - Same as basic template, plus a custom color scheme for your headings can be chosen for you by Web Services. 
  10. Right-hand column - Same as basic template.
  11. Footer - Same as basic template.
  12. Background - The background image behind your site content must be the orange arches, unless an alternative background or background color has been chosen for you by Web Services.

Custom Designs with University Branding

To maintain university branding and user interface, some elements and their placement are required for custom designs using university branding. Custom designs in Cascade Server, the WCMS, can be contracted through Web Services. To do so, please fill out the online web form.

If you prefer to work with an outside vendor you may do so. Websites created by outside vendors cannot use the WCMS and must be maintained using software such as Adobe Dreamweaver. Outside vendor websites do not have access to technical support with ITSS or Web Services, although site update service is available from Web Services for a fee.

See examples of university branded, custom designs.

  1. Header - Same as basic template.
  2. Identifier - Same as basic template.
  3. Side Navigation - Same as basic template.
  4. Side Navigation - Same as templates, plus there are some exceptions where a custom design can use something other than a left navigation bar (i.e., top or right navigation bar only).
  5. Banner - Same as templates, or a custom set of collage or dynamic banners can be used (See Office of Admissions and School of the Arts Events for examples)
  6. Department Name - Same as basic template.
  7. Quicklinks - Same as basic template, though colors and other visual features can be customized.
  8. Highlight or callout box - Same as basic template, though colors and other visual features can be customized.
  9. Main content area - Custom designs must use the standard template typeface (Verdana) for all body copy. However, variances in the typeface and font size as well as color of the headings are acceptable.  Table styles can also be customized. All accessibility and [XHTML] standards must still be followed, even if contracted with an outside vendor.
  10. Right-hand column - The number and width of columns can be customized, as long as it maintains 30 pixel margins between columns and the width of the site stays at 930 pixels. Liquid width ("stretch") website designs are not permitted unless approved by Web Services. Web applications are typical exceptions to this rule.
  11. Footer - Same as templates, plus the footer color scheme and column layout can be customized.
  12. Background - The background image and colors can be customized.

Custom Design without University Branding

A custom design without university branding is allowed for auxiliary organizations that have their own identity outside of the University. These custom designs can be contracted through Web Services. To do so, please fill out the online web form.

If you prefer to work with an outside vendor you may do so. Websites created by outside vendors cannot use the WCMS and must be maintained using software such as Adobe Dreamweaver. Outside vendor websites *do not* have access to technical support with ITSS or Web Services, although site update service is available from Web Services for a fee.

See examples of custom design without university branding.

  1. Header -Not required.
  2. Identifier - Not required.
  3. Side Navigation - Not required.
  4. Side Navigation - A completely customized site can have its navigation bar in any location on the page, as long as it's consistent throughout the website.
  5. Banner - Not required. If used, a custom set of collage or dynamic banners can be created for your site.
  6. Department Name - The name of your department or site has no design limitations.
  7. Quicklinks - Not required.
  8. Highlight or callout box - Not required.
  9. Main content area - The home page does not require a main content area in a complete customization, but if it is used then Verdana must be used for all body copy. However, variances in the typeface, color of the headings, and other design alterations are acceptable. Table styles can also be customized. All accessibility and [XHTML] standards must still be followed, even if contracted with an outside vendor.
  10. Right-hand column - The number and width of columns can be customized, as long as it maintains 30 pixel margins between columns and the width of the site stays at 930 pixels.
  11. Footer - Must contain the Chico State web signature in the right-hand corner and link back to the campus home page. Colors that can be used for the signature text are black, white, red (#960000), or its original colors. See examples of this signature.
  12. Background - The background image and colors can be customized.

Interior Page Layout

There are two layout choices for interior pages, one with a right column and one without a right column. In either case, they both have a main content area. The main area of the page has few restrictions on its layout and appearance.

Right Column

  1. At least a main heading (h1) and one paragraph or list must be in the main content area.
    1. The standard font for the main content area is Verdana for text and headings.
  2. The content area may be broken into sub-areas, using a right-hand column if desired. 
    1. The right-hand column in standard templates uses a set of rotating photos, which may be customized by your department if desired.
    2. The right-hand column can be customized to contain other data in a custom design or customized template. Contact Web Services for details.


Main area with right-hand column

No Right Column

  1. A department with a very long name can wrap their name onto two lines (can be used in any layout, not just the "no right column" layout)
  2. Tables can be used to display tabular data.
    1. A layout without the right column is typically suitable for web pages that contain tabular data.


Main area without right-hand column

Navigation Standards

The navigation area is where the main navigational links for the department or unit website appear. The standards for the navigation area are as follows:

  • The main site navigation should appear along the left side of the page, directly below the header. Other sub-navigation may appear elsewhere on the page. Using a top navigation in addition is also an option.
  • Links should be organized in some sensible order.
  • Sub-menus or pop-up menus may be used in the navigation area, but are not required.
  • Menus should be kept short to avoid becoming cluttered and confusing.

Footer Standards

The footer serves to visually close off the page as well as to provide common links and contact information for the department or unit. The standards for the header are as follows:

  • The footer should contain contact information for the unit or department, including building and room number, telephone number, fax number (if available), and campus zip. An e-mail contact may be added, but is not required.

 

Adaptavist Theme Builder (4.2.3) Powered by Atlassian Confluence 3.5.16, the Enterprise Wiki