Skip to content
Main Side Navigation

Web Guidelines

University of Utah website guidelines are a distributed effort, based on the principles of our core brand pillars. When creating a university site you should have consistency and inclusivity in mind, with each component designed and built to be accessible to all, regardless of ability or situation.

Colors


Colors used on your University of Utah website should not vary from our core color palette.

Accent colors should be used sparingly and are generally used for small color variations in web components. These accent colors should not be used for headings, anchor tags or major design elements.

Accessibility: Colors and contrast are of great importance to creating accessible websites and web components. Use of color should not cause interference with the ability to view the content on a page. Read more about using color with accessibility.

Required Components


Header and Footer

All sites should use the University’s approved header and footer. The website's header should prominently display the University of Utah logo with links to the University’s homepage as well as departmental/organization names.

""
""

Navigation

All sites should use the approved University navigation and should be intuitive, accessible, and easy to use, ensuring that visitors can quickly find the information they seek.

""

Interactive Features & Responsiveness


Interactive Features

Implement interactive features, such as contact forms and search functionality, that enhance user experience and engagement.

Ensure that interactive elements are user-friendly and accessible.

Mobile Responsiveness

Ensure that sites are fully responsive, providing an optimal viewing experience on various devices, including smartphones and tablets.

Animation of Web Responsiveness

Images for the Web


Image Sizing

Since image use cases vary from page to page, images can range from a wide variety of sizes. Images should be of high-quality and align with the brand's visual style.

Images used on the web should rarely exceed 1MB and will likely need to be optimized for the web by an experienced content-creator, designer, developer or photographer.

Accessible Images

To keep images accessible to screen-readers and other web accessibility tools images should always include an Alt tag (alt="Description of my image") with an appropriate description of the image.

Text within an image should be avoided and replaced with an acceptable use of layering HTML elements using live text.

Lab Students making a breakthrough