The audiences we reach are more likely to encounter the University of Iowa brand online than via any other medium. This makes delivering high-quality, effective, and consistent digital experiences critical to serving our varied audiences and achieving our institutional goals.
All Iowa web experiences, including all websites in the uiowa.edu domain, are required to follow university brand policy and must:
- Include the Iowa brand bar and footer.
- Use official brand fonts, colors, and graphic elements.
- Reflect the formal name of the unit in the header. 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.
- Follow the University of Iowa domain name policy.
- Have a dedicated content manager responsible for keeping the site updated and to serve as a point of contact.
Not a developer? SiteNow makes it easy.
The SiteNow service is a free, Drupal-based website-creation platform built and provided by 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.
All SiteNow sites use design system components in order to create a consistent user experience for our audiences that accurately leverages the Iowa brand.
SiteNow features:
- Secure and frequent data backup
- In-browser editing
- Responsive design
- Webform builder
- Events integration
A design system for developers
The University of Iowa Design System (UIDS) is a central repository of brand-approved components for use across websites and digital experiences—regardless of platform or chosen content-management system. All components make use of official brand colors, fonts, and graphic elements.
Campus web and app developers building web experiences should align their work with brand guidelines and the designs articulated in the UIDS, either by integrating directly or using the system as reference.
Required web components
All official university web pages and experiences must include the brand bar, brand footer, and approved favicon. The configuration options available follow best practices while allowing some degree of flexibility. If developing a landing page, contact osc-brand@uiowa.edu for additional guidance.
Components
The brand bar includes the university logo. Official unit names or site titles, and up to two navigational hyperlinks, can also be displayed in the brand bar. Formatting variations are available and can be selected from the design system.
HTML and CSS
To utilize the brand bar on your website or application, you will need to use the following CSS files in the order that they are listed below.
- https://github.com/uiowa/uids/blob/main/dist/css/fonts.css
- https://github.com/uiowa/uids/blob/main/dist/css/reset.css
- https://github.com/uiowa/uids/blob/main/dist/css/components/iowa-bar.css
The HTML markup for the brand bar can be copied from the "Output (HTML)" tab in UIDS: https://uids.brand.uiowa.edu/components/detail/iowa-bar--narrow.html.
A consistent footer across all web experiences will help users find important details such as contact information and additional navigation hyperlinks. It also ensures that all required links to institutional resources such as the privacy notice, nondiscrimination statement, accessibility standards, the land acknowledgement, and copyright information are included.
Optional preformatted footer content can include:
- Navigation links
- Column headings for navigation links
- Icon hyperlinks to institutional or unit level social media accounts
Footer content should not include:
- Unit lockups
- Videos or images
- Other logos
- Taglines or blocks of text
For content that needs to appear in a consistent place across site pages but falls outside the scope of the brand footer, use a separate prefooter region. Contact osc-brand@uiowa.edu for more information.
Examples of prefooter content include:
- Unit-level mission statements
- Sponsor logos/cobranding
- Calls to action
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 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.
As trends and campus needs evolve, units are encouraged to collaborate with the web team on new components that can be added to the design system. Contact osc-brand@uiowa.edu with suggestions.
Accessibility
The University of Iowa web experiences published after Oct. 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.
Web training
The web team offers training to content editors and site owners looking to build more effective websites. Each session is a good fit for new content editors and web veterans alike, focusing on basic, broad fundamentals that you can apply immediately.
Using Layout Builder
An introduction to SiteNow's new Layout Builder tool: a full suite of content editing functions that allows users to build page layouts in a drag-and-drop interface.
Content strategy
Covers the basics of creating effective content for new and existing websites, including: intuitive navigation menus, content modeling, and leading a strategic web project.
Using Siteimprove
Join the web community and our vendor partners for monthly trianings on how to use Siteimprove to improve the quality, performance, and accessibility of your website(s).