Skip to end of metadata
Go to start of metadata

Review external websites and identify best practices.

Design Objectives

  • Visitors should recognize that they are on a Berkeley website
  • Visitors should know which department website they are on
  • Leverage existing brand/identity assets and resources
  • Recognize that different sites may have different navigation and content requirements
  • Design should be adaptable to CMS theme considerations
  • Consider feedback gained from Perception Study

Other UCs

Review 10 campuses: http://www.universityofcalifornia.edu/campuses/welcome.html

San Diego

Branding elements include:

  • Iconic library-building logo - may be deprecated, as it's not in use on the gateway page. See Prospective Students subsite
  • Two different logotypes, one associated with the deprecated logo - see Prospective Students
  • A general idea of a color scheme, but with distinct variations depending on subsite.

Things done well:
Some top-level subsites move the UCSD logo to the right and have the subsite title in the prominent left masthead spot - makes it very clear what subsite you are on.

Generally coherent considering the size of the institution. 

Could be improved:
Color schemes, logotypes, mastheads and other elements are mixed-and-matched. If there are going to be variations, they should look more intentional.
Submenu links on home page not always reflected in subsite navigation bar.

Blink (UCSD)

Faculty and Staff portal.

Branding elements:

  • UCSD common masthead with library logo
  • Entirely uniform page layout and color scheme

Things done well:
Branding is consistent on all pages on the Blink site.
It is very clear where you are within the site structure - page titles are prominent and left navigation demonstrates the path between current and home pages.

Could be improved:
As you drill down into the site, some levels in the left navigation disappear. Compare Cash and Cash Equivalents, a 2nd-level page (Home->Blink Topics/Finance->Cash and Cash Equivalents) to its child page Accepting Credit Cards. Left navigation only shows the breadcrumb trail back up to Finance, no longer shows the pages at the same level (i.e. Handling Cash or Checks) or the level above (i.e. Accounting). This is a tradeoff; showing all the options when you're this deep would make for a lot of links. Could be mitigated with collapsible menus.

Redundancy in page/navigation titles. See Student/Class Info. Page title appears three times in close proximity: Top-level heading as page title, 2nd-level heading as Blink Topics heading, 3rd-level heading as navigation heading. 2nd and 3rd items are links to themselves (clicking on link will reload the page), which is confusing and not recommended. On sub-pages (see Advising Resources) the page title changes but the topics and navigation headings remain.

Los Angeles

Things done well:
Mastheads of Health System and School of Nursing - in the format UCLA (block format) School Name | Slogan.
Nursing site page title colors stand out well, though contrast with background color could be better.

Davis

Things done well:
Logo from gateway page is adapted by replacing 'University of California" with the name of the unit or college, sometimes with an accompanying custom logo. Examples:

Pages on gateway site provide clear view of structure and page's place within it. See left navigation on Public Service for an example.

Irvine

Reviewed for org hierarchy and design, no additional notes.

Merced

Even Merced - with fewer years to grow by accretion and have different units redesigning on different schedules - has a proliferation of designs.

Riverside

Reviewed for org hierarchy and design, no additional notes.

Santa Barbara

Reviewed for org hierarchy and design, no additional notes.

Santa Cruz

Reviewed for org hierarchy and design, no additional notes.

Higher Ed

Organizational Hierarchy and Design

Brown University

This is a Drupal site. Branding elements include:

  • Masthead with logo and name
  • Common color scheme
  • Common layout
  • Sitewide navigation bar
  • Audience selector links (Faculty, Staff, Students, Families, etc)
  • Coherent use of decorative images (similar placement and visual style)
  • Sitewide footer

The majority of administrative sub-sites use all of the branding elements listed above. There is less uniformity among the academic department sites.

Things done well:
Color scheme is very consistent throughout sub-sites.
Events block from home page is carried over into sub-sites, with events listings filtered for relevance to that site.

Could be improved:
Placement of sub-site titles and page titles is not consistent, even on the pages that most strictly adhere to the standard look and feel.

  • Staff Advisory Council - Site title overlaid on decorative image, along with SAC seal/logo. Page titles appear above left navigation.
  • Dean of the Faculty - No site title. Full-size decorative image. Page title above left navigation; expanded title at top of page content.
  • About Brown - No site title. Shorter decorative image. Page title above left navigation; expanded title at top of page content.

Some variation among administrative site page layouts:

  • Controller's Office - Smaller Brown identity bar, larger masthead with site title. Minimal footer.
  • Payroll Office - Sub-site of Controller. Shorter masthead. Sub-site title only on home page.

Handling of audience selector links implies that they are tabs or sections; actually the pages are mini-sitemaps with external as well as internal links. On the page itself the tab is highlighted, but once you follow any of the links it is not.

Stanford

Common masthead design includes red background, Stanford logotype, search box, and Maps/A-Z links. Subsites add a vertical bar separating their own site title from the Stanford logotype. Examples (most are inconsistent in heading layout):

Different designs proliferate for administrative offices:

  • Office of Technology Licensing. Custom illustrations decorate each section. Expanding mouseover menus are distracting - your target moves out from underneath you when you mouse over For Inventors. 
  • Research Administration. Looks like a text-based reconstruction of the gateway masthead. Site has three sets of navigation links - see Service Centers page. "Major Topics" on the left, "Site Navigation" and breadcrumbs across the top, "Navigation Links" and "Related Links" on the right. Breadcrumbs do not map to any of the other sets of links.
  • Risk Management. Uses the full seal as a logo.
  • Vice Provost of Graduate Education. Smaller Stanford logotype at top right, with double right arrow, links to Stanford gateway (compare UCSD sites with logo on right). Full seal at left bottom also links to gateway. Decorative header with architectural detail and heraldic emblem repeats on sub-pages (see For Prospective Students), but at smaller size.

Portland State

This is a Drupal site.

Very consistent use of masthead, footer, fonts, breadcrumbs, and color scheme throughout all levels of their sites. Sub-sites add a dotted vertical line between the main campus logotype and their site name. Subpages (see Undergraduate Admission) have location highlighted in top navigation. Nice use of decorative images:

  • Admissions - clock tower image with overlaid page title "Admissions."
  • Public Safety - rotating set of images with captions. News and Events blocks repeat in same location as on gateway page, News items are filtered for relevance.
  • Research - rotating images again.
  • Giving - fountain image with overlaid page title "Giving."
  • Office of Equity and Compliance - portrait images representing faculty, staff, students.

Library site differs in layout from others. It is not a Drupal site. However it does use a very similar masthead.

Rutgers

This is a Drupal site.

Saturation enhanced in page header images - see Housing & Dining. Matches well with bright color of masthead. 

Large logo from main page is downsized and made a smaller part of the header on sub-sites.

Subsites have taglines in blocks next to header images:

Other universities

Maintain Style Guides

Other Refs