Web Design and Navigation

All illinois.edu websites must use the university’s standard web header and footer, and a common design for the main navigation. To improve user experience, a shared nomenclature has been adopted and should be implemented wherever possible. 

University Standard Website Header

The university’s standard website header reinforces university branding, reassures users and improves usability across our entire digital ecosystem.

Required header elements 

1. Branding strap and Block I logo housed in square Illini blue box (always links to illinois.edu). 
2. UNIVERSITY OF ILLINOIS URBANA-CHAMPAIGN. This element does not display below 480px (always links to illinois.edu). 
3. Primary unit name, where helpful (links to primary unit’s website home page). 
4. Local site name (active link serves as the “home” button for the site). 

Optional header elements

5. Search field with magnifying glass icon separated by a vertical line.
6. Featured links should appear in the upper right corner. The standard is Visit | Apply | Give and the option for Contact. If these standard options do not apply to your unit, you may customize. If you customize, use action words when possible.

If you want to make changes to the header that deviate from the required header elements, consult first with your college or governing unit, and reach out to Strategic Communications and Marketing if necessary.

University Standard Website Footer

Our university standard super footer includes two sections: an upper section for unit-specific information and a lower section for links to university resources.

Links to university resources, found in the lower section, are centrally managed and should not be changed without first consulting with and receiving approval from StratCom.

The footer structure provides flexibility and ensures all units are compliant with regulations governing website operations.

Required upper footer (unit-level) elements

1. Unit name (links to the home page of the local site).
2. Unit social media icons (whichever are applicable).
3. Unit contact information, including a main phone number and street address, if applicable.
4. Primary/parent unit name, whenever applicable (links to primary unit’s home page).

Present these elements in the left-hand column as shown above. The remainder of the upper section of the footer is available for any content the unit chooses to feature.

Optional upper footer elements

5. Buttons for Visit, Give, Apply or other calls to action.
6. Inclusion of other unit or partner logos.
7. The remainder of the upper section of the footer is available for any content the unit chooses to feature.

Required lower footer (university-level) elements

1. Primary university wordmark (always links to illinois.edu).
2. Links to university resources.
3. Cookie policy.
4. Privacy policy.
5. Copyright.
6. Accessibility.

Optional lower footer elements

7. Legal links, such as Terms of Use, Report an Issue, Accreditation, Site Map, etc.

If you use the Illinois Web Theme toolkit footer, you do not need these links, but if you’d like recreate the footer, you can use these links to do so.

Navigation and Terminology

Consistency is key.

We have built a common navigation menu for our academic units to use. Other units may have different content needs for the menu, but overall design should remain consistent. The other categories should change to reflect the content provided by the unit. Terminology should be consistent wherever possible.

Use common terminology

Adopting a common nomenclature and organization for the menu ensures your website and content is accessible to users of all abilities and backgrounds.

If you are an academic unit, you should use the suggested categories and order below for your menu terminology. Standard practice suggests only using up to seven menu items, so you do not need to use all the terms. For efficiency, consider combining menu items, such as News and Events, or putting categories in sub navigation, such as Contact under an About menu category. If a term is already in the website’s footer (e.g., give, contact), consider omitting it from the top-level menu navigation.

Favicons

Favicons are 16×16 pixel icons (graphic images) that brand your website. Many graphical browsers and newsreaders display them as a visual reminder of the website identity in the address bar, tabs, toolbar apps, history results and search bar.

All university sites should use the full-color Block I favicon. In addition to the png favicons, our favicon files have been added to the collection of hosted web brand assets, also know as a content delivery network (CDN), so you can implement them to your website with ease.

Title tag

The title tag is an element of your webpage’s head tag that defines the title of a webpage. It is used in your browser’s tab next to the favicon and in search engine results. This isn’t the same as the H1, but should include it. Giving an accurate title helps the user identify bookmarked pages and helps to produce accurate search results. Place the page description text first, followed by the site name(s).

Note the current subsection of the website where appropriate, as well as the site name.

Verify that the title element describes the page’s purpose and content and is unique compared to all of the site’s pages.