Looking for the current Rivet documentation? View the v1 site.
Back

Rivet 2 header system

A new header system for brand identity, navigation, and other interface elements that support way-finding and usability in both large and small digital properties.

Chat icon Comment on this document

Use your IU Login to access and comment on this RFC in Google Docs.

Headers are often the first thing that users sees or interacts with. They provide a sense of place, and generally convey the architecture of a digital space via navigation menus. Our goal is to design a header that is consistent across digital properties—but still flexible enough to meet specific needs.

IU websites and web apps currently use either the Branding Bar or the Rivet v1 header. The Rivet 2 header pattern replaces both, and provides configurations suitable for both web apps and websites.

Header pattern

The header pattern contains groups of components called modules, and individual components like the search field. There are two modules and several components available for use.

The primary module (1) and secondary module (2) are shown. The primary module contains the property identification (3), navigation menu (4), property search (5), and user identification (6). The secondary module contains the local property identification (7) and navigation menu (8).

Primary and secondary modules

The primary module (1) functions as the baseline header in the design system, and a version of it is required in Rivet sites and apps. It has four components, some of which are optional:

  1. property identification
  2. navigation menu
  3. property search
  4. and user identification

The secondary module (2) is an optional module created to add flexibility to the header pattern. It has two components: property identification and the navigation menu. The secondary module must be used with primary module, but is not required.

Primary module

Property identification component

Property identification has three main purposes:

  • Lets visitors know where they are
  • Provides a branding element
  • Acts as the “home” button

This component has two variations, using a lockup, or using the trident block with plain text.

In its lockup variation, it can be used to identify a campus, a unit, or a unit and campus. It uses lockups in the horizontal orientation. The lockup version should follow lockup guidelines established at the university level. Property identification is required in the primary module.

Primary module with campus-level property id (1)
Primary module with at school or unit lockup (2)
Primary module with a school or unit lockup that includes campus (3)

In its plain text variation, and with some reduced padding, the header pattern can mimic Rivet 1's current header, designed for software and web apps.

Primary module with reduced padding to mimic the current Rivet v1 header

Navigation menu component

When used in the primary module, the navigation menu functions as the primary navigation for the digital property. The navigation menu is an optional component.

Primary module with property identification and navigation menu components (4)

Property search component

This is the internal search functionality for the digital property. Property search is an optional component.

Primary module with search component
Search expanded (5.1)

User identification component

This component can function as an indicator that a visitor is logged into a digital property, or as a method to log in to a digital property. The user identification component is optional and is most frequently used on web applications.

Primary module with the id component. (6)
Feedback prompts
  • Are there additional components that need to be included in the header pattern?
  • Are there use cases or functional requirements that we’re not considering?
  • How would you assemble these components to create a header for your digital property or web application?
Give feedback on this document

The secondary module

As noted earlier, the secondary module includes two components: property identification and the navigation menu. The secondary module can only be used in conjunction with the primary module.

The secondary module with property id and navigation menu components

Property identification component

In the secondary module, property identification is displayed as styled HTML text. It functions as:

  1. The title of a “sub-property” or,
  2. The title of the property, when the property title cannot be represented in a lockup format.
The secondary module with sub-property identification (1)
Secondary module property identification that does not fit lockup guidelines (2)

Navigation menu component

When used in the secondary module, the navigation menu can function in multiple ways. The navigation menu in the secondary module is an optional component.

In the secondary module the navigation menu can be used with or without the navigation menu in the primary module. When used without the primary module navigation menu it functions as the primary navigation of the digital property.

Secondary module navigation menu used without primary module navigation menu (3)

When used with the primary module, the secondary module navigation menu becomes the primary navigation for the sub-property. The navigation menu in the primary module functions as the primary navigation for the parent property.

Primary and secondary module navigation menus working together (4)

Additionally, when both modules are used together the navigation menu in the primary module can function in the role of “secondary navigation” as it currently exists in the Web Framework, and the secondary module navigation menu functions as the primary navigation for the digital property.

Primary and secondary module navigation menus working together (5). This configuration mimics the navigation structure available in the Web Framework.
Feedback prompts
  • Are there additional components that need to be included in secondary module?
  • Do these patterns provide flexibility to create a header that meets the needs of your users? Why or why not?
Give feedback on this document
Chat icon Comment on this document

Use your IU Login to access and comment on this RFC in Google Docs.