Skip to Main Content

Global header

The header is the first element on any page of a website. It contains the brand, navigation and search functionality.  Utilizing the header ensures consistent branding throughout the university.   

Header elements

Desktop

  • FIU logo (three letters) 
  • FIU written out in all caps 
  • Background colors: #F2F2F2 (light gray) or #0C2B5A (blue)
  • Search icon with ‘search’ to the right of it in all caps 

Mobile & tablet

Examples

Desktop

Mobile & tablet

 

Search functionality

  • Search capability on every page
  • List of search results after every search query

Title bar

The title of the website should be visible under the header of the website.  

It should clearly identify the unit's name and it's parent, if necessary.  

Example

Desktop

Mobile & tablet

Navigation

The main navigation of the website should be organized and clear. This allows users to find the information they need without having to search.

Navigation elements

Desktop

Typicallyon desktop we place the main navigation horizontally and close to the header. This way it is easily spotted by a user.  

Recommendation(s)

  • Visually show there are multiple levels within your navigation

Mobile & tablet

The menu on a mobile or tablet device should replicate the main navigation of the website along with any of its tier pages.  

Recommendation(s)

  • Provide a way for users to exit or close the menu
  • Visually show there are multiple levels within your navigation 

Examples

Desktop

Mobile & tablet

Global footer

The footer of a website is the bottom most element of a website. It contains additional links that can be useful to the user.  

Large footer: contains links and information intended for audiences and websites that are created for FIU, by FIU and are associated with academic units. For example, websites for colleges, schools, departments, centers, etc.   

Small footer: contains links and information intended for external audiences and external websites that are created for FIU, by FIU but are not associated with academic units. For example, marketing initiatives, conferences, landing pages, etc. 

Header elements

Large & small footer

  • Background color: #0C2B5A (blue)
  • Link colors: #F8C93F (bright yellow)
  • Text color: #FFFFFF (white)
  • FIU horizontal logo 
  • Social media icons (Facebook, Twitter, Instagram, YouTube, Tumblr & Flickr) 
  • Copyright, web/accessibility and website feedback links 

Examples

Large footer

Small footer