Design Elements
Navigation
Definition
A page element that displays the mega menu for Purdue Engineering.
Location
The Navigation remains at the very top of the page both in mobile and desktop screen resolutions.
Visual Description
A gold bar (#C28E0E) with white links that, when hovered over, turns the background a darker gold (#98700D). Included in the bar is a link back to the university (left) separated by a white vertical line, local social media and search Font Awesome icons (right)
On ENGR: All College Level Links (middle)
On Other Pages: A link to the Engr homepage followed by a dividing white vertical line, the Acronym of the local site (example: AAE) and the local links for that site (Middle).
On mobile, the design will shorten to a hamburger menu and search icon. All other items (Purdue Link, Mega Menu, social media icons) will be under the hamburger menu.
Other
Optimally, Navigation should contain between three (3) and seven (7) main links (not including the “Purdue” or social links). All top level links should point internally to the College.
Header
Definition
A page element that presents the co-brand of Purdue University and the College/School/Program, using Purdue branding elements
Location
The Header is located directly below the main navigation bar at the top of the page
Visual Description
A white background with small diagonal stripes in a light gray, overlaid with the vertically centered Purdue approved Co-Branding Logo for the College/School/Program represented on the webpage.
Other
The Purdue Co-Brand Image should be linked to the main page of the College/School/Program represented.
Hero Banner
Definition
A page element that presents a large image with the possible addition of overlaid audience links
Location
At the top of the page under the Navigation and header.
Visual Description
Full screen width image but NOT full screen height. Black to transparent gradient overlay on the bottom of the image. White text overlay. Possible proof point or emphasis rectangular vertical box. Along bottom half of the image is 3-7 audience links that point to various items within the site.
News Blocks
Definition
A page element that displays News Items in increments of 3.
Location
Can be used in a variety of places, most common usage on the news page and the front page. Usually displayed in conjunction with the Tint Page Element.
Visual Description
An image or video placed above a light gray (#EEEEEE) rectangle block that contains the news item’s title in dark gray (#333) text. When hovered over, the background color of the rectangle block changes to gold (#c28e0e) with the text changing to white (#fff). If there is an Image topping the element, the whole element (Image, Gray Block, and Text) links to the news article. If the top is a video, the video becomes a playable embed and the bottom text becomes a link. In tablet size, the grid changes to two columns. In mobile view, it becomes one column.
Tint
Definition
A page element that displays posts from different (pre-specified) Social Media platforms.
Location
Tints have a wide variety of possible locations. On the front page, the location is directly under the Proof points and directly above the News section. Usually displayed in conjunction with the News Blocks Element.
Visual Description
A five across, two high grid of square boxes that are from various social medias.
Other
Tint is an external application that pulls social media based on a variety of factors. Tint is initially set up by the College of Engineering Communications Team.
Feature Banner
Definition
A page element to emphasize a program, event, feature article, etc..
Location
Anywhere where an emphasis of a program, event, feature article, etc. is needed.
Visual Description
This element contains a background of a color photograph with a colored overlay. Overtop the image is a title (on the left) followed by a vertical bar and a description or preview of the content (on the right) Depending on the background the text may be white or dark gray (#4c4c4c)
Iconography
Definition
Image representations of commonly used symbols, company logos, or other icons.
Location
May be used anywhere. Currently, Fontawesome 5 is the default for the new template. FontAwesome 4 is used elsewhere unless programmatically altered by an administrator (Upon request).
Other
Footer
Definition
A page element that displays copyright, social media links, and other useful frequently used links.
Location
Along the bottom of every web page
Visual Description
The footer is separated in three different sections. The first two have a black background. The last has a background color of #3b3b3b. The first section has four columns of frequently used links categorized under: Discover, Explore, Connect, People. There should be 3-5 links under each of these categories. Preferably, each category should have an equal number of links to the other categories.
The second area should include local social media link icons and the “We Are Purdue What we Make moves the world Forward” logo in Gold and white.
Third area should include general Purdue Copyright and contact information.
Upon tablet size, the three areas will stack on top of each other.
Upon mobile sizes, the categories will become expandable menus while the second and third sections remain virtually unchanged from the tablet view.