Minimum Digital Design Standards

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
  Search Icon documentation
Mobile & tablet
- FIU logo (three letters)
- Background colors: #F2F2F2 (light gray) or #081E3F (FIU blue)
- Three horizontal bars icon with ‘menu’ below it in all caps
  Three horizontal bars icon documentation
- Search icon with ‘search’ below it in all caps
  Search icon documentation
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.

Examples
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
Typically, on 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