The audiences we reach are more likely to encounter the University of Iowa brand online than in any other medium. This makes delivering high-quality, effective, and consistent digital experiences across all university websites critical to serving our varied audiences and achieving our institutional goals.
Beyond the brand bar: Crafting future web experiences with UI Design System
The new brand experience on digital is more than just a brand bar and logo that runs along the top of web pages (and apps). We’re building a new design system to act as a central repository of brand-approved components for use across websites and experiences–regardless of platform or chosen content management system. Campus web and app developers building web experiences should align their work with the brand guidance contained on this site and the designs articulated in the UI Design System.
Depending on your needs, this may mean using the design system as a reference and recreating the components and experience for your app or website, or it may mean building a mechanism to integrate directly with the UI Design System.
Custom features, components, and functionality not in the design system
The design system is not comprehensive and will evolve as we continue to invest in deploying the brand and developing our web properties. This means that it is likely that you have unique needs for designed components that don’t yet exist in the design system and for which there is no brand reference.
When you encounter this situation, incorporate the new brand design language into your designs as closely as possible. In collaboration with OSC, you can get new components added to the design system as brand-approved elements available for use by you and others. Our goal is to work with partners to build a rich repository of brand-approved components and assets for future use across campus.
OSC is committed to working with the campus development community to find workable solutions that maintain brand alignment without impeding current projects. In the meantime, our team members are available to help address any questions that may arise.
If you have a question about how to align with the brand or how to contribute to UIDS, contact email@example.com.
The University of Iowa web experiences published after October 31, 2001, are subject to the University’s IT Accessibility Policy. As of June 1, 2020, the standard for conformance is Web Content Accessibility Guidelines, version 2.1, Level AA.
Alt text for the block IOWA logo
- When using the block IOWA logo in digital, web, or online documents, use the ALT text “The University of Iowa.”
- When using the block IOWA logo as a hyperlink, use the ALT text “University of Iowa homepage.” Only link to uiowa.edu.
- Do not use “Link to,” “Image of,” “Logo,” or similar descriptive language as ALT text when using the block IOWA logo as identification.
Every UIOWA website should:
- Include the Iowa brand bar.
- Reflect the formal name of the unit. Examples include ‘College of Liberal Arts and Sciences’ or ‘Division of Student Life. No other words, acronyms, taglines, images, icons, or additional text may be applied to this area.
- Be mobile optimized/responsive.
- Be ADA and WCAG 2.1 compliant.
- Have a dedicated content manager responsible for keeping the site updated and to serve as a point of contact.
All official (as of May 26, 2020) university web pages and experiences—including collegiate, departmental, and unit pages—are required to switch to the official branding bar on legacy sites.
The bar is 40px high and includes the following:
- New block Iowa logo with recommended ALT text (see sidebar)
- Site search
- Space for one or two optional links
For Drupal-based websites, a module is available that will place the branding bar on your site with no need to input code manually. More information about this module can be found on the Github README.
A Github repo is available with assets and instructions on how to implement the brand bar in web applications and non-Drupal sites.
Although small, favicons play an important role in visually unifying web pages. Favicons are the symbols used for browser tabs, bookmarks, or shortcuts pinned to the home screen or desktop of a phone, tablet, or computer.
Official university websites using a favicon must only use the approved favicon. The favicon set includes the standard sizes needed for different browser and device requirements.
Due to size limitations, our approved favicon consists only of the block “I” from the block IOWA logo. Do not edit or change the favicon. Do not use the favicon for any other use except as an icon for an official University of Iowa (uiowa.edu) webpage.
Approved University of Iowa favicon set
SiteNow web service
Please note: ITS is currently migrating SiteNow v1 (Drupal 7) sites to SiteNow v2 (Drupal 8/Drupal 9) and is partnering with OSC to ensure SiteNow v2 and future SiteNow sites can adopt the new brand from the UI Design System.
The SiteNow service is a Drupal-based web content management system that is provided by the University’s Information Technology Services. With SiteNow, units on campus can build and customize their own websites at no charge while ensuring that branding and accessibility requirements are met.