Web Design and Navigation

Using common designs and navigation terminology helps provide consistency for our Illinois brand. 

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. 

The university’s header and footer has been added to the collection of hosted brand assets, also known as a content delivery network (CDN), so you can implement them to your website with simplified codes. Find the documentation on the header and footer and all hosted brand assets.

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). 
Desktop > 1201px
Tablet 651 – 1200px
Mobile < 650px

Optional header elements

  1. Search field with magnifying glass icon separated by a vertical line.
  2. 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

  1. Buttons for Visit, Give, Apply or other calls to action.
  2. Inclusion of other unit or partner logos.
  3. 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

  1. 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

Example of common terminology used in the menu navigation

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 the order below for your menu terminology.
  • If you are a nonacademic unit but using one of these categories as a menu item, use this 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.
Use this terminologyDo not use this terminology
AboutAbout Us
About the College
Discover
AdmissionsAdmissions & Academics
Apply
Programs & Applying
AcademicsDegrees & Programs
Departments
ResearchData & Research
Research & Innovation
DiversityDiversity, Equity and Inclusion
Diversity and Inclusion
Diversity and Equity
Diversity, Equity, Inclusion and Access
DirectoryDepartment Contacts
Faculty & Staff
Meet Our Team
NewsNewsroom
Press Releases
EventsCalendar
Join Us
GiveDonate
Giving
Give a Gift
Support Us
CareersJobs
Employment
Open Positions
Join Our Team
Cost and AidCost of Attendance
Costs & Financial Aid
Tuition and Costs
ContactConnect
People
Faculty & Staff
Get in Touch
AlumniAlumni & Friends
Alumni & Students
  • If the categories in your sub navigation match the areas listed above, we recommend still using the designated term.
  • If a term is already in the website’s footer or feature links (e.g., give, contact), consider omitting it from the top-level menu navigation.
  • If it is necessary to use the correct name of an office,report, legal requirement, etc. in a menu or sub menu (e.g., Office of Diversity, Equity and Inclusion), you should use that name instead of our recommended term (e.g., Diversity).
  • Units may add menu categories that are not listed above that they deem necessary.

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.

Two identifiers

Three identifiers

Four identifiers