project / date / JANUARY 20, 2012 MONTREAT COLLEGE THIRD-PARTY WEBSITE STYLE GUIDE
contents / 1 / GRAPHIC ELEMENTS OVERVIEW 2 / NAVIGATION TOP HEADER WITH NAV 3 / EXAMPLES PORTAL 4 / PHOTO TREATMENT PHOTOGRAPHY LOGO TOP HEADER WITHOUT NAV ONLINE BOOKSTORE BUTTONS FONTS SIDE NAVIGATION MY MONTREAT COLORS CALCULATOR APPLICATION 2
1 GRAPHIC ELEMENTS overview This style guide will show how the new look for the Montreat College website can be applied to third-party websites, creating a consistent look for the college across the web. fonts Two web-safe fonts are used on the new site: Museo Slab and Verdana. Use Museo Slab for main navigation, headers, subheads, and links. It can also be used for graphic headers on photo or one-color buttons. The Museo Slab font family can be purchased from www.typekit.com. logo The Montreat logo has been redesigned with a new font treatment and a new color. Use this new logo lockup only on a white background. Museo Slab 300 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Museo Slab 700 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Museo Slab 500 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Use Verdana Regular for body copy and HTML links within the body copy. Use Verdana Bold for text headers in the body copy. Verdana Regular abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Verdana Bold abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 3
1 GRAPHIC ELEMENTS colors The hexadecimal numbers below show the color palettes used across all Montreat websites. Primary Palette Primary Palette Montreat Blue, #00567D, is used in headers, longer headline copy, and text links. #00567D #BAA022 Secondary Palette Montreat Gold, #BAA022, is used for text links and rollover states in secondary navigation. Secondary Palette #D9531E, can be used for subheads within the content of the site. #D9531E #77AE9A #F1E7C8 #B9B299 #77AE9A, #F1E7C8, and #B9B299 can be used over photos or as backgrounds for buttons. #E3E0D6 and #F9F5E9 can be used for form field boxes, for background color areas to separate content, or for drop-down menus. #666666 is used for the body copy text. #FFFFFF should be the default background color. #E3E0D6 #F9F5E9 #666666 #FFFFFF 4
2 NAVIGATION top header with main navigation For the main navigation, use Museo Slab (if possible) and place it in the top header bar with a translucent black bar over top of a pattern, which can be found in the Montreat photo library. Rollover and down states should be translucent blue, #00567D. If other global navigation links are needed, place these in the top right-hand corner. Set in Verdana Bold and use Montreat Gold, #BAA022. If a search field is needed, place it below this navigation, just above the site title. The Montreat logo should appear in the left-hand corner. 5
2 NAVIGATION top header without main navigation If there isn t a need for navigation on the site, or there are only global links, then the version of the header can be used. Montreat photography fills the header, the logo is on a white field, along with the page title, and global links are in the top right-hand corner. Choose a photo with a wider shot to highlight the architectural detail or the landscape of Montreat. example 2 landscape photo Photography should come from the brand image library not stock and Photoshop treatments can be used to give it a vintage feel. Contact the Communication Department at Montreat for more information. 6
2 NAVIGATION side navigation The secondary navigation should be in Verdana and placed along the left side of the page. Examples of a breadcrumb trail, rollover and on states, and third-level navigation from the new Montreat website are shown below. Default state Use Verdana Regular, #666666, 12 pt. for the links. Use Verdana Regular, #BAA022, 10 pt. for the breadcrumb trail. Rollover state The type will turn white, and a Montreat Gold bar, #BAA022, will appear behind the selection. See example at the left. On state The type will turn blue, #00567D. At the left, Undergraduate is shown in the on state with a drop-down menu. This menu should be indented and placed on a tan box, #F9F5E9. Third-level navigation should use Montreat Gold #BAA022, as the rollover state, with a > to the left of the current section. The last section of the breadcrumb trail changes to Verdana italic noting the user s current location. 7
3 EXAMPLES applying the brand to the current site portal The blue background frame should be removed. Use the new top header style with navigation, and apply left-hand navigation and section header styles. If possible, use consistent square button shapes with type for links; avoid in-window scroll bars. All redundant text links should be eliminated. Top header bar Shown with navigation using Museo Slab and a pattern background. Button style If possible, replace with square color boxes with an overlay type. Headers Museo Slab, #D9531E, 26 pt. Upcoming Event boxes If possible, avoid in-window scroll bars and list events in a grid. CURRENT SITE NEW GRAPHIC STYLES APPLIED Left-hand navigation Use Verdana Regular, #666666, 12 pt. 8
3 EXAMPLES applying the brand to the current site online bookstore Add the new top header with navigation and change to a white background. The bookstore s current left-hand navigation and product photos can be left the same. If possible, use the new header and rule styles to separate content. Top header bar Shown with navigation using Museo Slab, a pattern background, and a search box. Rules If possible, add in the Montreat-style handdrawn rules. Headers If possible, change headers to Museo Slab, #00567D, 26 pt. CURRENT SITE NEW GRAPHIC STYLES APPLIED 9
3 EXAMPLES applying the brand to the current site my Montreat Apply the top header bar with navigation and remove the blue background frame. The welcome message will now be located at the top right with global navigation links. Museo Slab is used for the title of the page, as well as for headers and subheads. The promotional area will contain links in Museo Slab and Verdana on a tan background. Hand-drawn rules have also been added to separate content. CURRENT SITE NEW GRAPHIC STYLES APPLIED 10
3 EXAMPLES applying the brand to the current site calculator For websites that do not have a main navigation, use the top header without navigation. If content styles can be edited, apply the new Montreat colors and fonts. CURRENT SITE NEW GRAPHIC STYLES APPLIED 11
3 EXAMPLES applying the brand to current site application This site currently has no top navigation within the header. The use of a top header will help create a consistent feel when the user leaves the main Montreat site. If content styles can be edited, apply the new Montreat page headers, colors, and fonts. CURRENT SITE NEW GRAPHIC STYLES APPLIED 12
4 PHOTO TREATMENT photography Photography should come from the Montreat photo library whenever possible. Much of this photography has custom filters applied. Contact the Communication Department for more details. buttons Type can be applied over the photography using Museo Slab to create promotions or larger buttons. Use a white box with type reversed out to show the photo in the background. Or use an opaque color from the Montreat color palette over top of the photo with white type. Graphic text buttons can also be used alone, preferrably on Montreat Gold, #BAA022, or #77AE9A. 13
building brands. with purpose. 14