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.

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.


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


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


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


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


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


    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. 

  • Footer 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

Webpage structure

Page breakdown

  1. Header
    • Brand bar, title bar and navigation 
  2. Body - see  Components to find out what fits here
  3. Footer
    • Site specific and global 

Sample layouts


Example of homepage with assorted components.

Tier page

Example of page with assorted components.

Searchable interface

See Lists and Feeds to learn how to use the searchable interface component.