Thematic Color Palette
The color palette helps define the personality of the Jacobs School of Music. It is applied generously throughout the site in the graphic elements to help create the Jacobs School of Music brand experience. Rich purple is paired with warm-toned neutrals to add balance and sophistication to the site. IU Crimson is prominent to draw a distinct connection to the Indiana University community.
Functional Color Palette
The functional color palette defines three colors that are applied to text throughout the site. To maintain consistency of user experience, please follow these guidelines.
- Body text display in black: #FFFFFF
- Headings are displayed in purple: #291432
- Hyperlinks display in red as defined in the IU style guide: #990000
Myriad Pro Semibold
Myriad Pro Semibold is the font used for the nameplate: "Jacobs School of Music." The nameplate is a graphic and not hypertext.
Gotham Book is the font used for various specialized headings throughout the side. These images are graphical and not hypertext.
Georgia is the serif font used throughout the site for most headers. The size and color of specific text objects are specified in the CSS.
Lucida Sans is the sans-serif font used throughout the site for body text and primary content. The size and color of specific text objects are specified in the CSS.
Photo Selection Guidelines
The Jacobs Office of Marketing and Publicity keeps a large photo library for all music departments. If you need photo resources, please contact the office for assistance in getting the right shot for your project.
Some things to think about when choosing photos:
- The image should engage the audience you are trying to reach and get viewers interested in your promotion.
- The image should help portray the Jacobs School of Music as a world-class institution.
- It should reproduce well. If it is for the Web, it should look good at 100% at 72dpi.
- Be sure that you have the legal rights to use the image.
Various portions of the site include photography with specific size requirements depending on their location. For photography located within the main content area of the site, size is variable, only limited by the width of the live area.
Generic container photos: 191px wide x variable height
Spotlight/welcome container photos: 212px wide x variable height
Large second-tier header: 900px x 189px
Small third-tier header: 900px x 115px
On the Jacobs Web site, the H1 header appears on every page; it is graphical and is not editable. This graphic treatment is intended for use on the Web site only.
The H2 header uses the Gotham font and is positioned on the left side of the page above the left navigation on Tier 2 and Tier 3 pages. It is a graphical element and not editable in the WCMS. A graphic template for this header has been provided. The H2 is a strong reinforcement of location for the user. It also serves as a link back to the landing page of each section.
Each section of the Web site has a different background image associated with the H2.
The H3 style is defined in the CSS and is editable. The H3 is an optional addition to the Tier 2 pages, but appears on all Tier 3 pages.
The H4 style is defined in the CSS and is editable.
The H5 style is defined in the CSS and is editable.
The H6 style is defined in the CSS and is editable.
The base font for paragraphs is Lucida Sans.
This style can be strategically applied to text when you want to call attention to the message. It is usually used at the top of the page and is most effective when used sparingly. It helps users to quickly scan the page.
This style is only applied to content dynamically generated and cannot be edited in the WCMS WYSIWYG editor.
Background color, rules, table title, table headers, and table data all have assigned styles as shown below.
Color for the background and form fields are predetermined.
Containers have been designed to hold a variety of content for second and third tier pages.
For example, containers can hold brief spotlight stories Jacobs faculty, students, and alumni with links to a longer story, or they can contain news headlines, event information, or contact information. They can be populated manually or dynamically.
When adding a container to a page, a background column graphic will also be generated automatically to give visual context to the containers. This graphic cannot be changed or altered.
The only container that can be applied to the left side of the page (under the navigation) is the left side text container. The preferred use for this container is for administrative information such as announcements or contact information. Photos and graphics are not allowed in this container.
There are two basic types of right column containers: generic and spotlight/welcome. Generic containers have a white background with a purple text header. They can include normal text styles as well as visuals. All text within the container is editable, with predetermined CSS styles. There are multiple ways to manipulate the containers to sufficiently contain the information, including the addition of an action bar, visuals, and social media icons.
Spotlight/welcome containers are specifically designed to house a photo, name, title, teaser quote, and link for a student, faculty, staff donor, or alumni spotlight. These containers may also be used to house the welcome notes given by administration members in certain sections of the site. The ideal visual location of the spotlight/welcome container is at the top of the container column; however, this container is available for use in any order in the column.
All containers are versatile and can contain a variety of information, but they should be used judiciously to point users to secondary information related to the primary content on a page.
Generally, you should limit the number of right-hand column containers to three per page.
A few examples of each type are posted below.
Requirements by Department
This generic text container houses specific information (degree requirements) relating to the primary information on the page.
This photo container gives a visual indication of the related content. The "Watch Past Student Auditions" is an example of the optional action bar.
Life in Bloomington
This photo container gives a visual indication of the related content. This is also an example of the optional photo caption overlay.
Brass Department on Facebook
This is an example of the use of the generic container to hold social media links.
This is an example of the container being used as Welcome from the Director type of container. Keep in mind that when placed at the top of the page, a small portion of the photo will be covered by the toolbar.
The full toolbar is used on all pages within the Jacobs global Web site with the exception of academic departments that use the toolbar version without icons. Because the Centers and Institutes are not as exclusively affiliated with Jacobs, the template for their sites uses a highly simplified version of the toolbar.