1.1. Design elements

Transcription

1 1.1 Design elements 1 The fundamental design elements, color, typography, structure and imagery contribute to an optimal user experience. The following section details the specifics of these elements. The design elements outlined in this guide should be used in any new extension of external facing Kellogg websites.

2 DESIGN elements 1.2 Logo Placement The Kellogg School of Management logo should be used in a consistent manner across all external facing websites. This consistency will help the user recognize the site as Kellogg and create consistent branding throughout the various websites. The Kellogg School of Management logo should be included in any official communication regarding Kellogg School of Management news or events. Any use of the Kellogg logo on materials or products offered for financial consideration is prohibited without express permission from the Kellogg School (contact Marketing & Communications). Materials copyrighted by individual faculty or affiliates may not use the Kellogg logo without permission. The Kellogg logo is reserved for materials copyrighted by the Kellogg School of Management or materials used to officially represent the Kellogg School. Do not attempt to take the logo from the website or scan it from other sources in order to design any independent or personal print or electronic publications. The Marketing & Communications team must be consulted in the design and production of any communications that use the Kellogg School of Management logo. Guidelines and contact information for use of the Kellogg School logo may be found at The logo should never appear any smaller than 160x44 pixels and should have a minimum padding of 10 pixels around it. Standard Placement 10px The logo should always be placed in the upper left hand masthead of the site. The secondary title should be placed to the right of the Kellogg logo (if applicable) and feel secondary to the logo. To create this lockup, contact your web administrator to obtain the Photoshop files. CO-Branding with other northwestern units & Student Group Web Sites When creating a website that is cobranded with another Northwestern Unit or Student Group, there may be a need for the logo placement to change. Please contact your web rep in Marketing & Communications to make sure the revised placement is still up to Kellogg School of Management standards.

3 DESIGN elements 1.3 Typography Typography is used in the site design to organize content types. In general, Franklin Gothic Book typeface is used across the site s graphical headlines. Arial (sans serif) typeface is also used in headline, body text and site functions because of its excellent on-screen readability. Graphic Typography: Franklin Gothic Book Graphic type is set with an image editing software program and its final format is an image file type. It s visual appearance is definite. Franklin Gothic book Regular ABCDEFGHIJKLMNOPQRSTVWXYZ abcdefghijklmnopqrstuvwxyz system Typography: Arial System type is set and displayed through the browser. Its appearance is subject to other variables that may cause it to render differently between platforms and browser clients. arial regular ABCDEFGHIJKLMNOPQRSTVWXYZ abcdefghijklmnopqrstuvwxyz franklin gothic book ITALIC ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz arial bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz FRANKLIN GOTHIC book BOLD ABCDEFGHIJKLMNOPQRSTVWXYZ abcdefghijklmnopqrstuvwxyz

4 DESIGN elements 1.4 Type Styles Type is used in a variety of ways on Kellogg School websites. Here are examples of how to use fonts in specific situations. Body Copy Body Copy with headline & link styles Bulleted List Pull Quote Headines - Arial, Franklin Book, Helvetica, sans serif - size 5 - (18px) bold Subheadings - Arial, Franklin Book, Helvetica, sans serif - size 3 - (12px) bold. Text - Arial, Franklin Book, Helvetica, sans serif - size 2 - (10px) Captions and small text - Arial, Franklin Book, Helvetica, sans serif - size 1 - (6px) Pull quotes are Arial, Franklin Book, Helvetica, sans serif size 3, (12px) bold. Numbered Lists & Tables Number List Table Attachment/Document Link Styles Address listing

5 DESIGN elements 1.5 Colors Color plays an important role in the site design and is used to brand Kellogg School, differentiate content types and identify page functions. Corporate color This purple is the OFFICAL Kellogg purple and is the only purple to be used in the Kellogg School of Management logo. R72 G42 B128 Hex #482A80 R0 G0 B0 Hex # Primary color FOR WEB This palette is used specifically in navigation, headlines, body copy, rollover states, and branding areas throughout the site. (Refer to the diagram on the next page for more information.) R79 G33 B112 Hex #4F2170 R0 G0 B0 Hex # R139 G105 B184 Hex #8b69b8 R86 G85 B85 Hex # secondary color FOR WEB This palette is used as supporting color to highlight imagery or specific items in the main branding area. (Refer to the diagram on the next page for more information.) R245 G169 B60 Hex #f5a93c R72 G106 B171 Hex #486aab R135 G171 B60 Hex #87ab3e R231 G228 B231 Hex #e7e4e7 R249 G203 B115 Hex #f9cb73 R238 G221 B244 Hex #EEDDF4 R240 G240 B240 Hex #FOFOFO R253 G253 B253 Hex #FDFDFD

6 DESIGN elements 1.6 Corporate color Primary color R72 G42 B128 Hex #482A80 R0 G0 B0 Hex # R139 G105 B84 Hex # R139 G105 B84 Hex # secondary color R245 G169 B60 Hex #f5a93c R72 G106 B171 Hex #486aab R135 G171 B60 Hex #87ab3e R231 G228 B231 Hex #e7e4e7 R249 G203 B115 Hex #f9cb73 R240 G240 B240 Hex #FOFOFO

7 DESIGN elements 1.7 images Imagery on the web site is used primarily for main promotional spaces, top header areas on secondary pages and in thumbnail size on critical pages. The following are examples of imagery within the website. 1 1 HERO IMAGES Hero images should be used as a marketing element for items such as upcoming events, campaigns or special stories on the site, and should be accompanied by text. The size of the image should remain at a cosistent size of 425 x 280px. 2 HEADER IMAGES Header imagery on secondary pages should span the full right column (710px x 250px), have rounded corners of 10px, 1px rule (color Hex #565555) and include page titles with graphic text within the imagery when possible. Alt text must be included for all images. 2

8 DESIGN elements 1.8 Obtaining images The Kellogg School Logos All Kellogg school logos must be the current logo, which reads Kellogg School of Management (The old logo reads Kellogg Graduate School of Management). For information about the current logo, including how to download the logo for web and print use, please contact the Marketing & Communication Department. For more information on the logo and it s use see pages (xx-xx) in the Brand Standards document. Event Photos To find out if we have photos for an event, please contact Bekah Raleigh (r-raleigh@kellogg.northwestern.edu) in Marketing & Communications Department. You may use any photos from our extensive archive on your website. You must also credit the photographer appropriately. If you have taken photos of a Kellogg School event for your department, please contact your web rep in the Marketing & Communications department to have the photos scanned and/or adjusted to the proper size for web use. Photos from outside of the Kellogg School Any time you use a photo on your website that is from an organization outside of the Kellogg School, you must obtain permission to use the photo on the Kellogg School website. It is illegal to take a photo from another source wthout obtaining written permission and displaying the correct copyright information. Once you obtain permission, you may still need to adjust the photo for web use, so contact your web rep in the Department of Marketing and Communications for help.

9 DESIGN elements 1.9 grid The template structure is defined by the grid. The same grid is used across all templates of the site and has to be optimized for users with monitor resolutions of 1024 x 768 or higher. Home grid 44 px 44 px is the preferred height, but sites may vary based on amount of navigation needed and nomenclature length. Masthead Global Navigation 940 X 325 Main Promotional Space Content Area Navigation Area 220px wide Content Area 710px wide content grid Masthead Global Navigation Content Area Footer Area Spacing 10px

10 2.1 page modules 2 A few key page modules should remain consistent across all Kellogg School of Management websites. These modules will provide for consistency, so that other areas of the site are able to be more flexible in design.

11 page modules 2.2 HEADER & FOOTER HEader Header without Search Bar 1 Logo 2 Site Title 4 3 Search Bar Text-Based Top Navigation Search, when present, should be auto populated with the word search and always use the square Go button. Search should also have a drop down box containing options to search local or search Kellogg site. When search is present the first preference is to have it right justified in the header. Second preference would be to appear in the same line as the top navigation on the right. 5 Search Bar Expanded Upon Typing FOOTER 1 Northwestern Seal 2 Copyright 3 Primary Kellogg School Links 4 Kellogg School Address Items that may appear in the footer in order of importance: A. Copyright This should only be the copyright symbol. No date is required and should be proceeded by B below (mandatory). B. Primary Kellogg School Link and Northwestern University Link (mandatory) C. Northwestern University Seal - lower left (mandatory) D. Policy Statement Link (not mandatory) E. Address, Phone Number (xxx.xxx.xxxx), Contact Information (not mandatory) F. Site Links (not mandatory)

12 page modules 2.3 SIDE NAVIGATION When side navigation is present, it should function the same across all Kellogg School websites. The prefered look is to have links seperated by a hairline and expand into sub-navigation when link is followed on a page. 1 Unselected Navigation Item 2 Selected Navigation Item: Background Color 3 Sub-Navigation Item Hover: Underline 4 Unselected Sub-Navigation Item

13 3.1 INTERACTION STYLES 3 The following section details the interacion styles to be used on Kellogg School of Management external facing websites. Interaction states are important to have and keep consistent so the user knows what action items are and become familiar with Kellogg School s standard call-to-action styles.

14 INTERACTION STYLES 3.2 NAVIGATION Interaction Styles The interaction styles should be treated the same across all Kellogg School websites when applicable. MAIN NAVIGATION Main Navigation Item Hover Main Navigation Item Selected SUB NAVIGATION Navigation Item Hover Sub-Navigation Item Hover FOOTER Footer Link Hover

15 INTERACTION STYLES 3.3 BUTTON & LINK Interaction Styles Button and link styles, including interaction states, should be treated the same across all Kellogg School websites when applicable. BUTTON STYLES Main Promotaion Space Tab Hover Link Styles Non-Link Bullet Style and Primary CTA with carrot Text Link Hover Text Link Hover Information Graphics Tab Hover