Web

UConn’s website is a primary way that we communicate our message with those internal and external to the community; therefore, it is vital that all pages maintain a level of consistency in appearance and functionality. For departments who use WordPress to manage their sites, University Information Technology Services has launched Aurora, a web service that runs the web content management system.

These standards apply to all sites within the UConn domain.

UConn website highlighted example of required web areas: Blue banner, Level Two Title, Level One Title, and Footer area
  • The blue banner is a required element on every University and UConn Health website. It is always located at the top, and spans 100 percent of the website’s width.
  • The primary wordmark that includes the words UNIVERSITY OF CONNECTICUT or the UConn Health wordmark is required within the blue banner, and is reserved for use on sites that are within the UConn domain, meaning the site’s address ends in uconn.edu.
  • The height of the blue banner measures 60px tall and has a blue background color (#000E2F).
  • The wordmark can be aligned with the left side of the main body of the webpage, as opposed to the far left side of the blue banner.
UConn website visual example of fixed width content area
  • Alternately, the wordmark can be anchored to the far left of the website. If using this option, an 18px minimum padding on the left edge is required.
UConn website example of fluid width website
  • The word UCONN in the wordmark is displayed in the font UConn Extended. It is white (#FFFFFF) and has a font size of 32px.
  • The words UNIVERSITY OF CONNECTICUT and HEALTH in the wordmark are displayed in the web font Proxima Nova. They are grey (#7C878E) and have a font size of 18px.
  • A grey rule with a color of #3f4760 and 2px size separates the words UCONN and UNIVERSITY OF CONNECTICUT.
  • When a website is resized down for monitors smaller than 680px wide, the words UNIVERSITY OF CONNECTICUT wrap to two lines. When a website is resized down to monitor sizes smaller than 510px wide, the words UNIVERSITY OF CONNECTICUT disappear. This is done to address responsive needs and simplify visual presentation.
  • Located on the far right of the blue banner are two buttons: Search and A-Z. Both of these buttons are default with regard to standards.
  • The search icon measures approximately 32px in width by 32px in height, with a border radius of 3px. The background color has a gradient from top to bottom. The colors used in this gradient are #304994 (top) and #1c3173 (bottom).
  • There is a 1px solid border colored #1e2b51and box shadow offset 1px top and 1px left at a color of #3957b0 for visual accenting.
  • The button serves as a link that directs users to a University or UConn Health search page.

A-Z

  • The A-Z index button uses the same visual styling with regard to colors as the search button.
  • The button serves as a link that directs users to the main University or UConn Health A-Z index page.

Site Identity

  • The site title is used to communicate the name of the site to users. The single-line wordmark is reserved for use on University of Connecticut and UConn Health websites only.
  • There are two levels of titles found in the standard template designs:

Level One Titles

  • The level one title is used for the primary name of the website and is a required element on every University website.
    • Examples include ‘Office of the President’ or ‘English Department’
  • The font used is Proxima Nova, styled at semi-bold, sized at 24px, with a font weight of 500, and must be upper and lowercase. The ‘all capitals’ style is not allowed in this area.
  • The primary color options currently used are: blue (#0b1860), white (#FFFFFF), grey (#7C878E) or any variation of grey, and black (#000000).
  • It is not permissible to use any font other than Proxima Nova semi-bold for level one titles.
  • The padding from the top of the level one title to the bottom of the blue banner measures 30px.

Level Two Titles

  • This title is used for the main organizational title, such as official University Schools, Colleges, regional campuses, departments, offices, or divisions. No other words such as marketing taglines, random text, numbers, links, icons, images, social sharing bars, phrases, poems, quotes or additional words may be applied to this area.
    • Examples include ‘College of Liberal Arts and Sciences’ or ‘University Information Technology Services.’
  • The font used is Proxima Nova, sized at 11px, with a letter spacing of 1px. Additionally the ‘all capitals’ style is used, with a 5px margin measured from the bottom of the level two title to the top of the level one title.
  • The primary color options are: blue (#000E2F), white (#FFFFFF), grey (#7C878E) or any variation of grey, and black (#000000).
  • It is not permissible to use any other font other than Proxima Nova for level two titles
  • The padding from the top of the level one title to the bottom of the blue banner measures 30px.

Body

There are no specific guidelines for design of the main body of websites. It is recommended that current industry standards are followed with regard to navigation, menus, and other areas. The Proxima Nova font should be used for major header elements such as: H1, H2, H3, H4, H5, H6. Proxima Nova is not allowed for any small or large bodies of text. The wordmark should never be reproduced smaller than an equal pixel size to the resolution you are working in.

Footer

Additional needs

  • Links, social accounts, icons, and custom search fields, additional content or features are permitted. These are placed to the immediate right of the level one title, above the navigation.
  • Anything placed in this area should not interfere with the level one title or impact the vertical positioning, size, color, or fonts of the level one or two site identities in any way.
UConn website example showing placement of additional needs such as social media icons