This content is viewable by Everyone
Standards & Guidelines: Example (Web Style Guide)
Impacted Services IT Website
Why have Web style guidelines?
Each UCSF website provides an opportunity to make a strong positive impression on our audiences. In this, an attractive and consistently applied style for presenting graphics and other visuals plays an important role.
We have put together a set of best practices guidelines for ensuring visual consistency across all UCSF-affiliated websites. These guidelines cover:
- Web banner and main navigation
- Logo lock-up placement and sizing
- Application of the graphic system
The proposed designs:
- Create a unique visual style for our websites that identifies them at a glance as part of UCSF
- Establish close stylistic connections between them, while enabling sub-brands to showcase their personalities
- Will help you align with UCSF brand standards
You can also access requirements and technical specifications to help you build an official UCSF website.
- If you're starting a website, please review the UCSF Website Standards.
There are several resources that UCSF web site developers can use to meet the UCSF web style guidelines:
- identity.ucsf.edu - The primary source for all UCSF style information
- webpatterns.ucsf.edu - A developer- and designer-friendly pattern library
- ucsf banners code example - Hosted in the UCSF web services Git repository
Two technology-specific code bases are also available:
- https://github.com/ucsf-web-services/ucsf_jekyll_basic - For Jekyll
- https://github.com/ucsf-drupal/ucsf_installprofile - The UCSF Drupal Install package
- Owning Team: Web Services