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. University sites are required to utilize domain names that include utah.edu.
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.
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.
Get Started
Download Web Toolkit
Get started with your web design or digital app by using these guidelines.