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 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.
You've probably noticed that NYU's primary color is purple. It's a very specific color of purple, to be exact. The specifics of "NYU purple" and the subsequent primary and secondary color palettes are what you will see all throughout the NYU.edu site:
Official NYU Purple
Main Color Palette
New shades of NYU's distinctive violet have been introduced to create a focused, clear, and unified color palette.
NYU Alerts use the following colors, depending on the nature of the alert:
Tertiary Accent Colors
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, and it matches the page title. This H1 should be as close to the page name (i.e. what is shown in the URL) as possible to improve search engine optimization.
Gotham Bold, 48pt, #000000
Gotham Bold, 40pt, #000000
Gotham Bold, 22pt, #000000
Gotham Bold, 30pt, #000000
Gotham Bold, 18pt, #000000
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.
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.
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.
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 identify your site’s most important goals when creating your content.
The text of your page can have various forms of 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 than reading an undistinguished block of the same size content. You may feel that every topic is important, and 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.