Graphic & Visual Design

NYU.edu is designed to adapt its layout to any screen size. Paragraphs and images reflow and resize. At smaller screen sizes, a menu icon displays the more detailed site navigation. This design 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.

The design of the new site was inspired by NYU's history, which is marked by resilience and resurgence.

"NYU has been able to position itself as one of the leading institutions in the world…[coming back] from the brink of bankruptcy…to reassemble, find a mission, [and] be able to convince a lot of people…[to] join the march. I don't know how many institutions have…big dreams, and then…execute."
–Anthony Welters, NYU LAW '77, NYU TRUSTEE
 


We listened to the way that the NYU community described itself and found a vernacular that suited that story: language like gritty, scrappy, tenacious, disciplined, and daring. The new design reflects this outlook, with a strong connection to where we came from and a clear vision of where we are going.

Mobile-friendly


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

Official NYU Purple

Primary Colors

New shades of NYU's distinctive violet have been introduced to create a focused, clear, and unified color palette.

Shades of purple


Content Elements

Fonts

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

Mercury is also used for call-out text and some page subheadings.

Gotham and Mercury

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.

H1 HEADER

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

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

NYU.edu uses the JW Player by LongTail as its local video player. The NYU video player also supports embedding of Youtube, Vimeo, and NYU Stream 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.


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. it is easier to read from primary to secondary content then reading an undistinguished block of the same size content. Some believe every topic is important and so it may be hard to make these choices, but trying to fit everything into the page’s prime positions or making everything bold or colorful eventually dilutes the effect of those tools—when everything is emphasized, the page becomes visually complex and overwhelming. Conversely, making good decisions about what information to emphasize, particularly when one subject leads into another, encourages visitors to read on.

sample page demonstrating a layout