Quick Navigation

Northern Illinois University

NIU wordmark

NIU wordmark with text

Example of header graphic text

Header graphic text

examples of web typography

Examples of web typography

NIU template primary color palette

NIU web primary color palette

example of photography for NIU site

Example of photography

Web Presence Project > Templates > Visual Design Elements

The NIU wordmark appears in the left corner of the header on all NIU pages.
On other NIU sites using the template, a variation of the NIU wordmark appears accompanied by "Northern Illinois University" text below it. This assures that site visitors will recognize the affiliation of any page with NIU - Northern Illinois University, regardless of how they reached the page.
As a standard convention, the NIU wordmark in the header serves as a link back to the NIU homepage.

On the NIU homepage, this header reads "Northern Illinois University" in Copperplate Bold.
On other sites, a similar graphic-based header will be created for use throughout the site.
The Web Presence Project team will help to create your custom header. Variations of the header treatment can be designed to include both a college and department name.

The graphic header on the site uses a custom typeface, similar to Copperplate Bold.
The headers and text throughout the rest of the site are formatted using Cascading Style Sheets (CSS) to apply a consistent look and feel to the typographic style for navigation menu items and body text in the content area.
The font styles and colors designated in the CSS files associated with the template will be automatically reflected on your own site files when using HTML formatting such as Heading 1, Heading 2, Paragraph, and Lists.

Northern Illinois University's school colors of red and black are used as the basis for the site color palette. These colors are used most prominently in the header, left navigation and footer. These colors are also implemented in the CSS to designate regular text (black, #000000) and linked text (red, #CC0000).
Besides the red and black, an accent color (tan, #EFEAD6) is consistently utilized as a background color in the header and in the left navigation.

The use of professional photographs is a key graphic component to the website templates.
A panoramic photograph or collage of photographs is typically incorporated on a site homepage below the header.
Photos should capture the spirit of the university community and be representative of the content presented on the page/site where the photo is used.
Some stock campus images are available for use.
If specific photographic images are desired, a photoshoot can be arranged for professional custom photographs.

The footer text is a common element to all pages using the template and reads:
© 2006 Northern Illinois University, DeKalb, Illinois 60115 | Contact Information | Web Site Privacy Policy
Site or page specific contact information and links can be added within the content area or below the left navigation buttons.

Several navigation menus are included in standard locations within the template structure: global navigation, audience buttons, topic-based left navigation and breadcrumbs.
Although the links provided in these menus can vary from site to site, positioning of the menus is set by the template in order to maintain consistency across pages.
Based on best practices for website design, consistent positioning aids users in more easily navigating complex, multi-departmental sites. See the Navigation page for more about each navigation menu described above.