SF State Web Template Guidelines { University Communications }

Image: Photos of SF State students and scenes from around campus

Template Structure

Comprised of five structural components, the template allows all SF State college and department sites to appear related to one another and offers a better user experience while providing maximum flexibility for design and content. The five components are: Utility Bar, Site Label, Image Bar, Content Area and Footer.

A site's structural components

1. Utility Bar

Purpose

  • Provides consistent global access to frequently used “just-in-time” tools and resources
  • Identifies your site as part of SF State’s family of sites

Customization Options

  • None

2. Site Label

Purpose

  • Identifies your site within SF State’s family of sites
  • Identifies and provides a link to your parent site homepage, if applicable.
  • Example: Africana Studies Department {College of Ethnic Studies}

Customization Options

  • May be incorporated with Image Bar (see below)
  • Background color may change
  • HTML type treatment may be substituted with a graphic type treatment if accessibility and search engine optimization best practices are maintained

3. Image Bar

Purpose

  • Establishes unique identity and look and feel for your site
  • Provides visual cues regarding the nature and purpose of the college or department site

Customization Options

  • May be any height
  • Height may vary from home page to sub pages
  • May use any color scheme
  • May use photographic imagery, illustration, collage, or just color
  • May be incorporated with Site Bar (see above)

4. Content Area

Purpose

  • Provides site navigation, main content, and collateral information

Customization Options

5. Footer

Purpose

  • Identifies your site as part of SF State’s family of sites
  • Reinforces brand identity through logo application
  • Provides consistent global access to admin and web site information

Customization Options

  • None
SF State Home