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.

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.

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. 

  • 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

Homepage

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.