Website

Each UCSF website provides an opportunity to make a strong impression on our audiences. We have put together a set of best practices to create consistency across UCSF-affiliated websites addressing the web banner and main navigation, logo lock-up placement and sizing, as well as application of the graphic system. The proposed designs create a connection between our websites, while enabling sub-brands to showcase their personality.

UCSF Website Standards

In addition to the aligning with UCSF brand standards, requirements and technical specifications are offered to help you build an official UCSF website. If you're starting a website, please review the UCSF Website Standards.

 

 


Building Consistency

Whether representing a campus or a clinical sub-brand, we are all part of UCSF. And our web presence should reflect this association – we should look like we are part of the same family. As the most visible representation of our brand, the family of UCSF logo lock-ups is an important component to creating a consistent web presence across the entire enterprise. The following pages explain how to unify UCSF web properties.

Interactive Colors

In digital environments, color plays a big role in accessibility — the greater the contrast, the better the readability. See Interactive Colors for more information.

 

Download a PDF of Interactive Colors to copy HEX codes.

PDF iconInteractive Colors from UCSF_BrandGuide_v2.1_083116.pdf

 
WEB SYSTEM

 

CAMPUS

This sample layout for a campus sub-brand shows where the logo lock-up, type and navigation are consistent throughout the enterprise. Other branded areas show where color, photography and graphic expression can be customized as appropriate for the sub-brand’s communications needs.

 

Clinical

This sample layout for a clinical sub-brand shows where the logo lock-up, type and navigation are consistent throughout the enterprise. Other branded areas show where color, photography and graphic expression can be customized as appropriate for the sub-brand’s communication needs.

 


Branded Areas

The web banner and main navigation are two areas on the webpage that should be streamlined to create a stronger UCSF brand impression. Underneath these navigational banners, in the main splash area, subbrands can distinguish themselves with an independent voice and expression.

 

Website Fonts: 

It is recommended to use Helvetica Neue Roman in branded areas. If you are unable to access or purchase webfonts, Arial should be used as a substitute.

 

BRANDED AREAS

 


Web Banner

In most cases, the web banner should feature the full text, “University of California San Francisco.” This will help to avoid redundancy with the UCSF logo lock-ups appearing in the main navigation and create optimal clarity and legibility. In cases where the webpage does not include a UCSF master brand or sub-brand logo lock-up, the web banner should include both the UCSF logo and “University of California San Francisco” text.

 

Because all web banners bring traffic back to UCSF.edu, there is a unique web banner for this site.

 
SUB-BRAND WEB BANNER

SUB-BRAND WEB BANNER
WEB BANNER FOR SITES WITHOUT MASTER BRAND LOGO OR SUB-BRAND LOGO LOCK-UP

SUB-BRAND WEB BANNER WITHOUT LOGO
UCSF.EDU WEB BANNER

UCSF.EDU WEB BANNER
Web Banner resources

Web banner templates are in the downloads section at the bottom of this page. 


Web Banner Color

COLOR FLEXIBILITY

UCSF entities can choose any color web banner from the approved color palette that has sufficient color contrast. Consider choosing a color that complements the website design.

 

COLOR FLEXIBILITY WEB BANNERS

 


Main Navigation

The main navigation area sits just below the web banner, and includes the primary placement of the UCSF logo lock-up and navigation links for the website. Placement of the UCSF logo in this area should remain consistent throughout. For each entity, there may be unique circumstances in how navigation links work within the recommended system.

 

MASTER BRAND AND SUB-BRAND MAIN NAVIGATION

MASTER BRAND AND SUB-BRAND MAIN NAVIGATION

 


Clinical Logo Lock-up Sizing, Dimensions

Also part of the UCSF family, clinical logo lock-ups should be presented consistently across all clinical websites. In the main navigation of a clinical website, logo lock-up placement and sizing is determined by a consistently-sized UCSF logo within the clinical logo lock-up. If a clinical lock-up exceeds the length of the maximum width, scale logo to fit within the maximum width.

 

The navigation links should be set in Helvetica Neue 55 Roman and should not exceed 9 links in total. If links within the sub-brand site exceed these standards, please contact University Relations to determine how to work within the template.

 

Note:

The recommended height of the main navigation is 130 pixels. This height should accommodate placement of most logo lock-ups. When placing and scaling a logo lock-up that exceeds the maximum width, the main navigation height may need to be adjusted to accommodate the height of the logo.

 

CLINICAL BRANDS

 


Campus Logo Lock-Up with Entity Tier Lines

For web application, if you are a campus department that is part of an umbrella entity, use the appropriate campus logo lock-up template that includes your specific entity name within the tier line. When using a campus logo lock-up with entity, the campus department name may occupy a minimum of one line and a maximum of three lines. Please refer to the following page for sizing recommendations within main navigation.

 

Logo Resources:

Select campus logo lock-ups are available on the UCSF Digital Asset Database. If your logo is unavailable, do not create your own. Instead, please request a logo lock-up by emailing identity@ucsf.edu, and it will be created for you. Documents and Media will create ‘WEB ONLY’ versions of logo lock-ups in PNG and JPG for entity departments that would use the campus logo lock-up for web. The ‘WEB ONLY’ version is sized for the largest application and will adjust accordingly. For questions about web templates, contact IT.

 

1 LINE SUB-BRAND + ENTITY (MINIMUM)

1-LINE SUB-BRAND ENTITY
2 LINE SUB-BRAND + ENTITY

2-LINE SUB-BRAND ENTITY
3 LINE SUB-BRAND + ENTITY (MAXIMUM)

3-LINE SUB-BRAND ENTITY

Campus Logo Lock-Up with Entity Tier Lines Logo Sizing

Campus logo lock-ups with entity tier lines require some logo sizing exceptions to ensure legibility of its tier line. In the main navigation, logo lock-up sizing is determined by consistent sizing of the UCSF logo within the campus logo lock-up. Use the following logo sizing recommendations to determine logo lockup sizing and breaks for responsive application within devices.

 

For desktop application, the width of the campus logo lock-up with entity tier line is based on the UCSF logo size of 104 pixels wide. This is based off of a website width of 1320 pixels wide.

 

For tablet application, the width of the campus logo lock-up is based on the UCSF logo size of 84 pixels wide. The same logo sizing is recommended for both vertical and horizontal tablet formats.

 

For mobile application, the width of the campus logo lock-up is based on the UCSF logo size of 133 pixels wide.

 

Note:

The height of the main navigation across all devices is variable depending on the height of campus logo lock-up with entity tier line. The main navigation height should be adjusted to accommodate the height of the logo with appropriate clear space above and below the logo lock-up.

 

DESKTOP

LOGO ENTITY DESKTOP
TABLET

LOGO ENTITY DESKTOP TABLET
MOBILE

LOGO ENTITY MOBILE

Campus Logo Lock-Up Sizing, Dimensions

The family of UCSF logo lock-ups collectively represent our brand. The UCSF logo is the most visible representation of our brand and should be presented consistently across all UCSF websites.

 

In the main navigation of a campus website, logo lock-up placement and sizing is determined by a consistently-sized UCSF logo within the campus logo lock-up. The width of the campus logo lock-up is based on the UCSF logo size of 92 pixels wide. If a campus lock-up exceeds the length of the maximum width, scale the lock-up to fit within the maximum width.

 

The navigation links should be set in Helvetica Neue 55 Roman and should not exceed 9 links in total. If links within the sub-brand site exceed these standards, please contact University Relations to determine how to work within the template. Note that UCSF plans to update the Drupal Starter Kit with these templates for new websites.

 

Note:

The recommended height of the main navigation is 130 pixels. This height should accommodate placement of most logo lock-ups. When placing and scaling a logo lock-up that exceeds the maximum width, the main navigation height may need to be adjusted to accommodate the height of the logo.

 

CAMPUS SUB-BRANDS


Sites without Sub-Brand Logo Lock-ups

For sites without a sub-brand logo lock-up that live within the UCSF brand, the UCSF logo is placed within the web banner alongside the logotype. Only sites without a sub-brand logo lock-up should use the logo within the web banner. The navigation links should be set in Helvetica Neue 55 Roman and should not exceed 9 links in total. If links within the sub-brand site exceed these standards, please contact University Relations to determine how to work within the template. Note that UCSF plans to update the Drupal Starter Kit with these templates for new websites.

 

Website Fonts:

It is recommended to use Helvetica Neue Roman in branded areas. If you are unable to access or purchase webfonts, Arial should be used as a substitute.

 
Sites Without Sub-Brand Logo Lock-Ups


Responsive

Core to all web experiences, the family of UCSF logos collectively represents our brand. For this reason, UCSF brand logos should be the most visible representation of our brand when it comes to responsive web sites. Following the same guidance as the main navigation, placement of the UCSF logo in this area should remain consistent throughout to ensure that UCSF is consistently branded across all websites viewed through any device. The size of the logo and logo lock-ups should also be consistently based off of the UCSF logo and legibility of the sub-brand title.

 

Website Fonts:

It is recommended to use Helvetica Neue Roman in branded areas. If you are unable to access or purchase webfonts, Arial should be used as a substitute.

 

MASTER with logo

Master Brand Mobile View
Sub-brand with logo 

SUB-BRAND without LOGO

Non-logo Mobile View
Purple

Downloads

Website