New York University Skip to Content Skip to Search Skip to Navigation Skip to Sub Navigation

Graphic & Visual Design

NYU.edu is larger than the previous version – 360 pixels wider to be precise. As monitors get larger so do their aspect ratios, the 960 pixel width offers University authors the ability to use more dynamic content and the site viewer more opportunity to view that content.  It also changed our design and visual styles.

Design Foundations

The look of the NYU.edu reflects back on previous versions but looks forward to a more Web 2.0 design that is clean and free of too many flourishes, allowing the content to take the spotlight. After all NYU.edu would not exist if it were not for the content and work done at the university.

There was a process of a number of months to investigate the best design to meet all of the targeted needs and audiences. What has evolved is a strong foundation for the next chapter in NYU’s online presence.

Color Palette

You're probably noticed that NYU's primary color is purple. It's a very specifc color of purple, to be exact. The specifics of "NYU purple" and the subsequent primary and secondary color pallettes is what you're going to see all throughout the NYU.edu site:

Official NYU Purple

Graphic: Color Palette

HEX: 57068c; CMYK: C85, M100, Y0, K0; RGB: R87, G6, B140

 

Primary Colors

ColorHexRGB
NYU Purple 57068c 87,6,140
Link Red d11255 209,18,85
Text Black 23241e 35, 36, 30

 

Secondary Colors

ColorHexRGB
Gray 818790 128, 135, 143
Blue 448ccb 69, 140, 204
Dark Cyan 005b7f 1, 91, 126
Green 0e7d8e 14, 125, 142
Cyan 0077a2 0, 119, 162
Brown 816c5d 130, 108, 94

Content Elements

Fonts

Gotham is the University's official font family and was created and is provided by Hoefler & Frere-Jones.

The NYU.edu website uses Verdana as its main system font. 

Headers

The NYU.edu site uses headers in logical hierarchy (ex: H2 is sub category of H1 and H3 is subcategory of H2 & etc.). There is only one H1 per page as the page title.  This H1 is as close to the convention of the page filename as possible to improve search engine optimization.

We have reserved H6 for accessibility (hidden/ off screen).

H1 HEADER

font-size: 37px
font-family: Gotham Book

H2 HEADER

font-size: 24px
font-family: Gotham Book

H3 HEADER

font-size: 19px
font-family: Gotham Medium

H4 HEADER

font-size: 13px
font-weight: bold
font-family: Verdana, Arial

H5 HEADER

font-size: 12px
font-family: Verdana, Arial

Layout

Web pages always have a dominant element and a number of additional, peripheral elements. On content pages, the dominant element is always situated in the left top corner of a page. This is where the title and primary content is located. Everything else on the page is considered secondary to this main element, but secondary elements also have a hierarchy.

Separate Content: Defining what is "Primary" and "Secondary"

The informational content on a Web site can have various content types: It can be displayed as text, images, videos, multimedia presentations, audio files, slideshows, or promotions. Within every content type, it is important to separate the “most important” from the “least important” – or in our terms, “primary” and “secondary” content – and classify the hierarchy of importance of what we would like to communicate to the public (site viewer).

Considering the interactive character of the internet and the limited space on the screen, it is important to wisely determine your site’s most important goals when choosing to publish the content.

Main text content can have other related content. For example: photo galleries or videos, interactive forms, or multimedia presentations. It is up to the author to determine what the most important, related content is and its hierarchy within the page.

Making choices is the key to successful layout. Some believe every topic is important and so it may be hard to make these choices. However, they do have to be made, particularly when one subject leads into another, or because it is easier to read from primary to secondary content then reading an undistinguished block of the same size content.

Photography

Photography used on the NYU.edu site must be web-ready and must be approved for use on the website.  

We recommend using the NYU Photo Bureau for University photography needs to help ensure that you have both the appropriate level of quality and the permission to use images on the University website.

Graphics

While the use of graphics on the NYU.edu website is limited, any graphics used must be web-ready and must be approved for use on the website, and must follow guidelines provided in the University Identity and Style Guide.

We recommend using high-quality graphics created by designers rather than line or clip art.

Videos

We recommend that videos on the web are no longer than 2 minutes in length and don't require proprietary software for site viewers to watch. We also strongly recommend that all videos contain captions.

NYU.edu uses the JW Player by LongTail as its local video player.

NYU Footer