Headers and Navigation

The header area should be designed with an eye toward branding, cleanliness, and functionality. The basic layout of a header should include the following three elements:

  • Wordmark (“Northeastern University” or “Northeastern University” locked up with the name of a college or senior leadership unit)
  • Search functionality
  • Site navigation

The maximum width (and preferred width) of the wordmark or lockup in headers is 400 pixels. The minimum width is 325 pixels. The wordmark or lockup on websites designed or optimized for mobile devices should be 270 pixels wide.

Additional links, graphic elements, or other content should be avoided. The color of the header should be white or a very light neutral color/gradient that does not compete visually with the branding or accessibility of content.

Header

Wordmark and Seal

The Northeastern University wordmark is a visual representation of Northeastern’s stature as a world-class university and leading institution of innovation. The letters are customized from the typeface Baskerville, resulting in a proprietary typeface that is approachable and friendly, yet classic and elegant.

The Northeastern University graphic identity for Web-based media typically uses the primary wordmark only, without the seal. The seal is only to be used on the Web with permission from the Office of Marketing and Communications.

College-level units of the university (including the School of Law and the D’Amore-McKim School of Business) as well as senior leadership-level offices will continue to use conjoined “lockups” featuring the university name in Northeastern Baskerville with the college/SLT unit name aligned directly below in Helvetica Neue. These lockups must be placed at the top left corner of the site, against a white or very light background that does not compete visually.

In web applications, the wordmark is Northeastern Red, while college- or SLT-level unit names are in Warm Gray.

Wordmark and Seal

Identifiers

We have developed identifiers for academic departments, schools within colleges, and administrative/service offices within senior leadership units—the unit’s name in ITC New Baskerville Italic, designed to stand alone from the university logo or wordmark.

Academic departments

Academic departments and schools within colleges should always use the appropriate the college-level lockup at top left of the header area, while placing their department or school identifier within the live content area of their Web pages.

These identifiers are designed to fit both the Northeastern brand and any college-specific branding. 

CAMD Journalism

Interdisciplinary departments and programs that reside within two or more colleges should always use the Northeastern University wordmark at the top left of the header area. The program or department name should appear within the live content area, between the header and footer. The names of the colleges should also be listed within the live content area, with each given equal weight in terms of font and placement.  

Administrative/service offices

Administrative/service offices should always use the university wordmark as the main Northeastern graphic identity. These offices have the option of aligning their identifier directly under the Northeastern wordmark, or applying it as a stand-alone element within the live content area of their Web pages.

While ITC New Baskerville Italics is recommended for all identifiers, it is required only when administrative and service offices align their identifier directly under the Northeastern wordmark.

HRM

When an identifier is aligned directly under the wordmark, it must be in Warm Gray. But identifiers standing alone on the Web have no color restrictions, except for a prohibition on using gold or silver without first consulting Marketing and Communications. Those colors are reserved for presidential and university advancement communications and top-level institutional events such as Commencement.

Please visit the Downloads page for the correct version of your wordmark, or contact the Office of Marketing and Communications Web department for more information.

Search

A simple search field should be included on the right-hand side of the header area to enable fast access to site content. Cascade sites may make use of the standard Google-based search functionality as seen on www.northeastern.edu. WordPress-based sites will most likely be best served by the native WordPress search functionality. Please contact the Office of Marketing and Communications Web department for more information on implementation of the Google search form.

Navigation

For most sites, navigation items can run along the top of the site, contained within a horizontal bar immediately beneath the header, as seen here . . . 

 

Nav HRM

 

or along the left side of your site with the items vertically stacked.

Navigation COE

Sub-Navigation

The sub-navigation represents the second-level pages on your website. You may use a drop down sub-navigation like this: Northeastern University Homepage

Sub nav

 

 

...and/or a left subnavigation, as seen on Undergraduate Admissions.

Left sub nav 


Extensive site navigation may require some combination of both, or the use of other navigation elements such as breadcrumbs. Wherever possible, site architecture should be developed to reduce complexity, permitting the use of the simplest and most logical interface layout.

Note: As a general rule, the right-hand column(s) are reserved for non-navigation items such as feature modules, contact information, and special buttons.