Skip to Main Content

Brand bar

The brand bar is the first element the user will see once they’ve landed on your website. The brand bar contains the university’s brand identity, search functionality and navigation on mobile. Utilizing the brand bar ensures consistent branding throughout the university.

Brand bar elements

Desktop

  • FIU logo (three letters) 
  • FIU written out in all caps 
  • Background colors: #F2F2F2 (light gray) or #081E3F (FIU 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 brand bar of the website.

It should clearly identify the unit name/title of the website.

Example

Desktop

Mobile & tablet

Logos

If you are currently using a logo in the title bar of your website, please make the logo has the appropriate alternative text for accessibility and that you’re using an official FIU logo.

Download the correct FIU logo from the Brand toolkit

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: #081E3F (FIU blue)
  • Link colors: #FFCC00 (bright gold)
  • 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