Breadcrumb

Web

Webpage scrolling animation

UCR’s website is an important tool for our campus to use in promoting our brand identity. Elements such as colors, graphics, fonts, and messaging used throughout the site are official representations of the UCR brand and ultimately support the university's mission and vision. Providing end-users with a consistent brand experience throughout UCR sites encourages brand recognition and also communicates unity and professionalism.

UCR’s 2018-2019 website redesign project was integral to the university’s strategic communications in establishing a stronger digital presence. UCR.edu is a space for us to cohesively promote our brand, mission, and vision while providing memorable experiences for website visitors. The redesign project has focused on five key areas that allow us to improve user experience, attract high-quality students, faculty, and staff, increase UCR’s support and donor bases, and deliver our compelling content through a more vibrant, visual layout. 

  • Usability: making the website’s navigation more intuitive and information easier to find
  • Accessibility: making website use easier for persons with disabilities  
  • Optimization: improving the website’s search engine optimization, increasing quality site traffic and providing relevant data 
  • Display: communicating a clean and vibrant look that echoes UCR’s personality and visual identity 
  • Adaptability: ensuring responsiveness across mobile and tablet device platforms 

You can download a web style guide that contains the basic elements of our web brand

Download the Web Style Guide

 

Information Technology Solutions (ITS) and University Communications (UCOMM) have partnered to bring Drupal and Acquia's Site Factory service to the UCR campus. This platform provides a more robust, feature-rich, and easy-to-use web solution to eligible sites across campus.

ITS has a website to guide you through the process of starting to design and develop your own website. This site is your Resource Guide to all things Drupal.

Visit the ITS blog for the latest information about implementations of the system and available components.

 

Request a Site       Workshops and Training Sessions       How To Guide

 

Basic Elements for the Templates

There is a standard "profile" that bundles functionality and theming. This "profile" is provided to the campus as the Drupal website template. This template is created per UCR branding guidelines.

The main elements that templates include are:

Header 
  • Standard UCR Logo to left of site title
  • Site title can be edited by a site builder (title has a standard font size, weight, and color) 
  • Parent organization displayed in all caps above site title
  • Optional audience links on the top right 
  • Google custom search (searches all of UCR's subdomains)
  • There are two different header designs to choose from
UCR website Headers

Footer 
  • Site builder can adjust 1, 2, 3, or 4 column footer
  • To remain consistent, all official UCR websites include the global footer on the left column as mandatory. Other elements can be removed from the footer
  • Color and background are standard per design
UCR Footer

Content Types 

These are what are used to create pages

  • Basic Page - used for any type of content and can be displayed in a number of different layouts (1 column, there are multiple 2 and 3 column layouts to choose from)
  • Articles - used for blogs, news stories, and press releases, auto creates an articles listing and optionally can place a teaser of blogs, press-releases, or news stories, on any basic page
  • Events - used for event listings, auto creates an events listing page and optionally can place a teaser of events on any basic page
  • People Profiles - used to create profiles for people, auto creates a profile listing page
  • Local Galleria - used for image gallery pages

Custom Blocks 
 
  • Accordions
  • Article News
  • Basic Block
  • Bubble Grid
  • Button Bar
  • Call to Actions
  • Carousel Slider
  • Custom Alert
  • Custom Header Image and Title
  • Expanding Card Grid
  • Feed Display
  • Info Card Grid
  • Local Galleria Preview
  • Localist Events
  • Statistic Grid
  • Tabs
  • Teaser Callout

Forms 
  • Create a basic contact form

Web Fonts

General Font Family: "Trade Gothic Next W01","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;

This is an H1 title followed by body copy

Font-color: #329AF0. Font-size: 2.375rem. Font-wight: 300.Line-height: 1.105261.  Ex case singulis reprehendunt mei. No vix corpora voluptatum quaerendum, ne doming abhorreant expetendis vis. Per id pertinacia liberavisse, ut verear expetenda ius. Nam tollit corpora et.

This is an H2 title followed by body copy

Font-color: #329AF0. Font-size: 2.125rem. Font-wight: 300.Line-height: 1.105261. Ex case singulis reprehendunt mei. No vix corpora voluptatum quaerendum, ne doming abhorreant expetendis vis. Per id pertinacia liberavisse, ut verear expetenda ius. Nam tollit corpora et.

This is an H3 title followed by body copy

Font-color: #329AF0. Font-size: 1.875rem. Font-wight: 300.Line-height: 1.105261. Ex case singulis reprehendunt mei. No vix corpora voluptatum quaerendum, ne doming abhorreant expetendis vis. Per id pertinacia liberavisse, ut verear expetenda ius. Nam tollit corpora et.

This is an H4 title followed by body copy

Font-color: #329AF0. Font-size: 1.623rem. Font-wight: 300.Line-height: 1.105261. Ex case singulis reprehendunt mei. No vix corpora voluptatum quaerendum, ne doming abhorreant expetendis vis. Per id pertinacia liberavisse, ut verear expetenda ius. Nam tollit corpora et.

This is an H5 title followed by body copy

Font-color: #329AF0. Font-size: 1.375rem. Font-wight: 300.Line-height: 1.105261. Ex case singulis reprehendunt mei. No vix corpora voluptatum quaerendum, ne doming abhorreant expetendis vis. Per id pertinacia liberavisse, ut verear expetenda ius. Nam tollit corpora et.

This is an H6 title followed by body copy

Font-color: #329AF0. Font-size: 1.125rem. Font-wight: 300.Line-height: 1.105261. Ex case singulis reprehendunt mei. No vix corpora voluptatum quaerendum, ne doming abhorreant expetendis vis. Per id pertinacia liberavisse, ut verear expetenda ius. Nam tollit corpora et.

Body Copy: Font-color: #595959. Font-size: 1rem (based on 16px). Line-height: 1.6. Lorem ipsum dolor sit amet, amet graecis admodum no pro. Dicam impedit ne est, sit in tation doming. Per erant alterum vivendum no. Usu ea case populo officiis. Ornatus forensibus ei pri, agam illud interpretaris ad vis, patrioque gloriatur efficiantur nec eu. Qui melius consequuntur ad.

 

You can download a web style guide that contains the basic elements of our web brand

Download the Web Style Guide