For web design questions, please contact: Christopher McComas Manager, Web Communications

Transcription

1 WEB DESIGN GUIDE

2 For web design questions, please contact: Christopher McComas Manager, Web Communications MARSHALL UNIVERSITY BRAND GUIDELINES

3 WEB DESIGN GUIDE This guide is designed to provide a framework for site editors and online content creators. Following these guidelines should guarantee that each site is in compliance with the Marshall University graphic standards for online content. Additionally, consistent use of correctly styled sections and elements will better meet the needs of users on any device, from desktop to smart phone. Consistent use of official colors and elements reinforces brand recognition with users. To help navigate this guide, a section breakdown is provided for quick reference. THIRD-PARTY DISCLAIMER Third-party websites and applications that provide services to Marshall University should follow the guidelines set forth in this manual as closely as possible. While not all third-party vendors will be able to follow all web guidelines to the fullest extent, third parties should follow all standards outlined in SECTION I of this guide. In addition, third parties should follow the standards outlined in SECTION II as applicable. SECTION I LOGO USE UNACCEPTABLE LOGO USES SECONDARY MARKS WEB COLOR PALETTE SWATCH SAMPLES WEB COPY WEB TYPE COLOR COMBINATIONS WEB TYPEFACES WEB IMAGERY PHOTOGRAPHY VIDEOGRAPHY SECTION II NAVIGATION TOOL BAR PRIMARY NAVIGATION BREADCRUMBS SECONDARY NAVIGATION PAGE HEADERS HOMEPAGE HEADER SECONDARY HEADERS TERTIARY HEADERS PAGE FOOTERS PRIMARY FOOTER PHOTO OVERLAY FOOTER CALL TO ACTION TEASERS ELEMENT STYLING BUTTONS, LINKS, AND CALLS TO ACTION OVERLAYS, GRADIENTS, AND DROP SHADOWS MARSHALL UNIVERSITY FLAG ELEMENT QUOTE BOXES SLIDERS CARDS TEXT-HEAVY FORMATTING PROGRAMS AND SINGLE AREAS OF STUDY CURRICULUM COURSE LISTINGS INDIVIDUAL COLLEGE SITES COLLEGE HEADERS GENERAL PAGE LAYOUT MARSHALL UNIVERSITY BRAND GUIDELINES 1

4 SECTION I LOGO USE Site editors are permitted to use Marshall University logos on pages and posts in presentation of content on their pages. When using logos, individual units are not permitted to modify the logos in any way unless they have previously, explicitly been granted permission by Marshall University Communications. (Additional restrictions on logo usage are covered in this manual under MARSHALL UNIVERSITY BRAND COMPONENTS.) UNACCEPTABLE LOGO USES Unacceptable logo uses on the web follow closely with unacceptable uses in printed material. The logo must not be altered in any way for use online. Specifically: Do not stretch or condense the logo. Do not isolate the logo in a frame, unless when using with the Marshall University flag element. (See MARSHALL UNIVERSITY BRAND COMPONENTS located in this manual.) Do not display the logo at an angle. Do not add a unit name in place of Marshall in the bar M logo. Do not alter proportions of the words Marshall University or the stylized M. Do not set the words Marshall University in another typeface and use in place of the official logo. Do not combine the official logo with any other logo. SECONDARY MARKS Under no circumstances should any college be designing its own logo to use on the website. WEB COLOR PALETTE There are several approved colors for use in online site designs that allow newly created content to remain consistent with the overall Marshall University branding. Marshall University Green (referred to here as primary green) should always stand front and center in visual communications. To accent and support the primary green, use black, white, and/or gray. SWATCH SAMPLES While the official print representation of Marshall University Green is PMS 354, it is important to note that the on-screen rendering of this color differs slightly. The approved HEX codes used for online representation are listed here. PRIMARY GREEN HEX #00B140 BRIGHT GREEN HEX #08CD4F LIGHT GRAY HEX #A2AAAD MEDIUM GRAY HEX #535C5C DARK GRAY HEX #1F2727 BLACK HEX # MARSHALL UNIVERSITY BRAND GUIDELINES

5 WEB COPY One of the main functions of the main website is to serve as a recruitment tool for Marshall University. Opportunity, community, tradition and history, and a spirit of innovation and vision are identified as primary themes through which Marshall University s strengths can be understood and conveyed. These themes should be integrated directly into the website copy to educate users and further reinforce the brand. The tone should be confident but friendly, direct but reassuring. The copy should also reflect a sense of belonging and include action-oriented language. Section titles should be worded as calls to action, rather than solely as descriptors. Words like find, get, learn, or discover are used to encourage users to act, while associating dynamism with the overall Marshall University brand experience. WEB TYPE COLOR COMBINATIONS To ensure legibility and consistency, we have defined type treatments over backgrounds of different colors. Below are the most common combinations found on the site. TITLE Intro text SUBHEAD Body copy TITLE Intro text SUBHEAD Body copy TITLE Intro text SUBHEAD Body copy TITLE Intro text SUBHEAD Body copy WHITE BACKGROUND PRIMARY GREEN BACKGROUND MEDIUM GRAY BACKGROUND BLACK BACKGROUND Titles: #00B140 Intro text: #1F2727 Subheads: #535C5C Body copy: #1F2727 Titles: #FFFFFF Intro text: #FFFFFF Subheads: #FFFFFF Body copy: #FFFFFF Titles: #08CD4F Intro text: #FFFFFF Subheads: #FFFFFF Body copy: #FFFFFF Titles: #08CD4F Intro text: #FFFFFF Subheads: #FFFFFF Body copy: #FFFFFF MARSHALL UNIVERSITY BRAND GUIDELINES 3

6 WEB COPY CONT. WEB TYPEFACES In general, the guidelines below are to be followed when styling text. Size and color may change depending on the background or layout of the copy. For guidelines on how to style special content sections, see ELEMENT STYLING: TEXT-HEAVY FORMATTING in this guide. Do not modify typefaces or colors. These choices were made carefully to adapt the established print guidelines for the web. Do not justify any text. This style creates spaces between words called rivers of white that can run down the page and make it difficult for users to read. For best practice, keep text aligned to the left in headers and text-heavy instances. Centering text is only approved for section headlines with a short amount of intro text. THIS IS A TITLE THIS IS A SUBHEAD. This is intro text to use over solid backgrounds. This is intro text to use over photo backgrounds. This is a line of body copy. Titles: Sentinel Medium, all caps (largest type on the page) Subheads: #535C5C, Open Sans Semibold, all caps (same size as intro copy) Intro text: Open Sans, Semibold (over solids) or Bold (over photos) (a few points larger than body copy) Body copy: #1F2727, Open Sans Regular Sentinel Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Sentinel Semibold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Open Sans Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Open Sans Semibold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Open Sans Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Titles Section headers Primary navigation Primary footer Quote boxes Class listings Primary navigation Secondary navigation Body copy Breadcrumbs Primary navigation Intro text (over solids) Subheads Buttons and links Intro text Course listings Course hours Curriculum Links Sidebars Attributions Calls to action Sliders Cards 4 MARSHALL UNIVERSITY BRAND GUIDELINES

7 WEB IMAGERY PHOTOGRAPHY Photography should be selected with the audience in mind showing students, activities, and locations that will resonate with each specific audience. Photography should appear authentic and candid, as opposed to staged and formal. For page headers and sections of content that require placing text over images, choose photography that will allow for easy type placement over the image. For example, using a hero image in these spaces is preferred, and it is best practice to vary shots of individual close-ups with those of groups interacting and the college campuses. This way you can use fewer overlays or gradients to help with copy legibility. This will also aid in keeping the site light and colorful. VIDEOGRAPHY The use of impactful videography is a great way to provide users with a more interactive experience with the Marshall University brand. Videos can appear in the header of a page and play automatically, without sound, or can be used in a special section to aid in the exploration of different locations. Videos should be short and the subject matter featured should be directly related to the content on the page with which it appears. The best videos are close shots of individuals, campus, classrooms, or tours. MARSHALL UNIVERSITY BRAND GUIDELINES 5

8 SECTION II NAVIGATION The top of the page contains the Marshall University logo, along with a set of common menu elements that must be present at the top of all pages, as well as the site-wide custom search input box. Branding standards dictate that these elements are mandatory and must be present on any new online content representing Marshall University. These elements should not be modified by site owners or content creators. The primary institutional logo and tool bar featuring quick links and primary links are the mechanisms by which users are informed that they are on a Marshall University site. Do not replace the primary institutional logo with any other logo under any circumstances. TOOL BAR The green tool bar contains the three major actions we want users to take: APPLY, LEARN MORE, and VISIT. Under FIND INFO FOR is a mini drop-down menu that appears when users hover or click that contains quick links to some of the most important information on the site. Also included in this tool bar are the links to MU Online and MyMU. The grouping of these specific items and their placement on the page are designed to increase interactivity with the site and allow quick access to other online products or services. Tool bar: #00B140 Text links: #FFFFFF, Open Sans Semibold, all caps Drop-down menu: #1F2727 PRIMARY NAVIGATION The primary navigational links provide direct access to top-level pages that serve the entire Marshall University community. Individual course or college pages may contain their own site-wide navigational elements, but these elements cannot replace the primary navigation. Instead, a customizable secondary navigation menu is located in the content area of the page. When a navigation item is active, it transitions to primary green with an underline (the underline is done via code; do not use the underline text setting to format this copy, because it will not appear correctly). Active link: #00B140, Sentinel Semibold Text links: #535C5C, Sentinel Semibold A drop-down menu will appear when users hover over a main link that includes additional links to related information that is housed within the primary section selected. Drop-down menu background: #1F2727 Titles: #FFFFFF, Sentinel Semibold Dotted divider lines: #A2AAAD Active link: #08CD4F, Open Sans Semibold, all caps Active arrows: #08CD4F Text links: #FFFFFF, Open Sans Semibold, all caps 6 MARSHALL UNIVERSITY BRAND GUIDELINES

9 NAVIGATION CONT. BREADCRUMBS Located below the header of each page is a dark gray bar that features the site s breadcrumbs. Breadcrumbs are an easy way for users to understand the structure of the site, and the context of the information they are seeing. This feature is also beneficial because it improves search engine optimization and decreases bounce rate. The breadcrumb navigation should load as a map, and if users bypass a page in between, that page should still appear in the breadcrumb navigation. Breadcrumb bar: #1F2727 Text links: #A2AAAD, Open Sans Regular, all caps Arrows: #A2AAAD Active link: #08CD4F, Open Sans Semibold Active arrow: #08CD4F SECONDARY NAVIGATION Located on secondary and tertiary pages, the sub-navigation features a customizable list of internal page links. When a menu item is selected, it will highlight in green and jump users down to that section of content on the same page. Text links: #535C5C, Open Sans Regular, all caps Active link: #FFFFFF, Open Sans Semibold, all caps Active link selector: #00B140 Solid divider lines: #A2AAAD MARSHALL UNIVERSITY BRAND GUIDELINES 7

10 PAGE HEADERS Each main page can have a large image that will appear directly above site content. These images will help make pages appear more specific to each topic. Headers start below the top of the page and top-level navigation and above the breadcrumbs bar. The home, main, secondary, and tertiary pages have different specifications to establish a visual hierarchy. For more information about type legibility and photo treatments, see ELEMENT STYLING: OVERLAYS, GRADIENTS, AND DROP SHADOWS in this guide. HOMEPAGE HEADER The homepage header features the largest hero image (full-width header image) and two extra elements that other headers will not have. This includes the tag-line and a secondary call to action button. The title ( Be Proud ) is larger than the titles on secondary or tertiary pages. Ideally, the homepage would have a short video loop and include close shots of individuals, the campus, classrooms, etc. If a video is not available, photography can be used in this space, functioning as an automatic slider. Be Proud can stay in place as the images slide behind it, or the copy can change with the image, and updated copy can include announcements, dates, calls to action, etc. Be Proud must be the first image and last image in the slider rotation. Title: #FFFFFF, Sentinel Medium, all caps Tag-line: #FFFFFF, Arial Bold, all caps, -20 kerning NOTE: The only place Arial will be used on this site will be in the subtitle treatment for the full tag-line. Intro text: #FFFFFF, Open Sans Semibold Button: #00B140, #FFFFFF, Open Sans Semibold, all caps 8 MARSHALL UNIVERSITY BRAND GUIDELINES

11 PAGE HEADERS CONT. SECONDARY HEADERS Headers on secondary pages feature a hero image that is roughly two-thirds the size of the homepage hero image. It should also include the title of the page and a line of intro text. Buttons are optional but can be included as long as they are directly related to the page s content. These rules apply to pages titled Meet Marshall, Admissions & Aid, Academics, Marshall Life, and Programs & Areas of Study. TERTIARY HEADERS Headers on tertiary pages feature a hero image that is roughly two-thirds the size of the secondary hero image. It should include the title of the page. An alternate treatment can include a line of intro text if necessary (see Single Areas of Study). Buttons are optional and can be included as long as they are directly related to the page s content. These rules apply to pages like the Single Area of Study and History & Traditions. MARSHALL UNIVERSITY BRAND GUIDELINES 9

12 PAGE FOOTERS PRIMARY FOOTER The primary footer is the area at the bottom of each page that contains additional important links, Marshall University branding, accreditation information, contact information, social links, and three green buttons. The content in the primary footer, including links and contact information, should not be changed. Footer background: #1F2727 Footer bottom strip: # Text links: #FFFFFF, Sentinel Semibold Flag element and text: #00B140, #FFFFFF, Open Sans Regular Call to action buttons: #00B140, Open Sans Semibold, all caps PHOTO OVERLAY FOOTER Main pages include a photo overlay footer with active text links that lead users to more info on another page. You will see these footer styles on pages titled Meet Marshall, Marshall Life, Academics, and Admission & Aid. Title: #FFFFFF, Sentinel Medium, all caps Intro text: #FFFFFF, Open Sans Semibold Text links: #FFFFFF, Open Sans Semibold, all caps Active link: #08CD4F, Open Sans Semibold, all caps Solid divider lines: #FFFFFF Arrows: #08CD4F Overlay: 50% black 10 MARSHALL UNIVERSITY BRAND GUIDELINES

13 PAGE FOOTERS CONT. CALL TO ACTION TEASERS Secondary and tertiary pages feature three teaser boxes with text links for the main calls to action: APPLY NOW, LEARN MORE, and PLAN A VISIT. You will see teasers on the pages Programs & Areas of Study, Single Areas of Study, and History & Traditions. Text links: #FFFFFF, Open Sans Semibold, all caps Active link: #00B140, Open Sans Semibold, all caps Arrows: #FFFFFF Overlay: See ELEMENT STYLING: OVERLAYS, GRADIENTS, AND DROP SHADOWS in this guide. MARSHALL UNIVERSITY BRAND GUIDELINES 11

14 ELEMENT STYLING BUTTONS, LINKS, AND CALLS TO ACTION Buttons, links, and calls to action are included throughout the site to encourage interaction and increase the likelihood that users will find the information they are seeking. Buttons come in three styles, utilizing the primary green and reversed out in white when appropriate. Button: #00B140 Text: #FFFFFF, Open Sans Semibold, all caps Button: #FFFFFF Text: #00B140, Open Sans Semibold, all caps Button: Outlined in #FFFFFF Text: #FFFFFF, Open Sans Semibold, all caps Links are not buttons, but live text that behave similarly to buttons and lead users to more content. When links are hovered on or selected, they transition from white to the primary green. Text links: #FFFFFF, Open Sans Semibold, all caps Solid divider lines: #FFFFFF Active link: #08CD4F, Open Sans Semibold, all caps Active arrows: #08CD4F Call to action teaser boxes contain text links to three major user actions: APPLY NOW, LEARN MORE, and PLAN A VISIT. Text links: #FFFFFF, Open Sans Semibold, all caps Active link: #00B140, Open Sans Semibold, all caps Arrows: #FFFFFF Overlay: See ELEMENT STYLING: OVERLAYS, GRADIENTS, AND DROP SHADOWS in this guide. 12 MARSHALL UNIVERSITY BRAND GUIDELINES

15 ELEMENT STYLING CONT. OVERLAYS, GRADIENTS, AND DROP SHADOWS The combined use of overlays, gradients, or drop shadows will assist with legibility when type is placed over photos. The appearance of the black and green photo overlays are set to multiply with an opacity no higher than 30%. It is recommended to stay within 10-15%. This overlay does not have to be used at all if the type is legible after applying a gradient. Overlay exceptions note: Pages with a photo overlay footer include a heavy black overlay to ensure text legibility of the title, intro text, and links. The use of this heavy overlay is unique to this section only and is set to black (#000000) at 50% opacity. Black gradients can be added over a photo, starting from the foot of the photo and blending up through the bottom third of an image. In some cases, little to no overlay would be required after introducing a gradient. When text is placed over an image, include a light drop shadow. Drop shadows over lighter areas, like a blue sky, should be used with a lower opacity. Drop shadows should not appear when text is placed over solid backgrounds of any color. Larger titles: # black, multiply up to 30%, angle 30, distance 1, spread 9, and size 20 Subtitles and intro text: # black, multiply up to 25%, angle 30, distance 0, spread 10, and size 10 MARSHALL UNIVERSITY BRAND GUIDELINES 13

16 ELEMENT STYLING CONT. MARSHALL UNIVERSITY FLAG ELEMENT The site incorporates the V from the Marshall University flag element to indicate selection, marry two sections together, and provide visual direction for an upcoming section of content further down the page. Use of the V element allows for variations in color, but the angle should remain the same each time. You may use the V element a maximum of three times per page, but it should not be overused, and it should be separated by at least one regular content section between each occurrence. In the footer, the full Marshall University flag element is used, including the logo. The sides of the V element should reflect a 57-degree angle and the flag element itself should always be primary green, or #00B140. When the V element is used over cards and paired with an image overlay, it should be filled in with dark gray, #1F2727, and combined with a rule across the top of the card of the same color. For more information about type legibility and photo treatments, see ELEMENT STYLING: OVERLAYS, GRADIENTS, AND DROP SHADOWS in this guide. Text links: #FFFFFF, Open Sans Semibold, all caps Active links: #00B140, Open Sans Semibold, all caps QUOTE BOXES The use of quote boxes or student testimonials is essential to providing users with a more authentic take on Marshall University, while also functioning as a visual break between sections on pages with a lot of copy or content. A photo should accompany the quote and utilize a drop shadow. Text should be in all white to provide contrast and legibility. Box background: #00B140 Quote text: #FFFFFF, Sentinel Regular Student name: #FFFFFF, Sentinel Semibold Major: #FFFFFF, Open Sans Semibold, all caps Image drop shadow: Black, multiply up to 30%, angle 101, distance 5, spread 0, and size MARSHALL UNIVERSITY BRAND GUIDELINES

17 ELEMENT STYLING CONT. SLIDERS Sliders are a good tool to communicate snippets of valuable information to users in a fun and interactive way. The site uses sliders in a few locations, including Marshall History (below). When a year or image from the slider section is clicked on manually or toggled to, the image will show an overlay, the year will center over the image, and the information in the white section will update accordingly. Title: #08CD4F, Sentinel Semibold, all caps Intro text: #FFFFFF, Open Sans Semibold Year span: #00B140, Sentinel, Medium Subhead: #535C5C, Open Sans Semibold, all caps Green line: #00B140 Description text: #1F2727 Photo labels: #FFFFFF, Open Sans Semibold Arrows: #FFFFFF Box background: #1F2727 Inset description box: #FFFFFF Overlay: See ELEMENT STYLING: OVERLAYS, GRADIENTS, AND DROP SHADOWS in this guide. MARSHALL UNIVERSITY BRAND GUIDELINES 15

18 ELEMENT STYLING CONT. CARDS Cards have been utilized in several places across the site. Introducing photography with text links gives users a better idea of the content they will find behind the card. If enough choices are available, the slider will allow users to shuffle through different selections using the arrows on the left and right of the cards. When selected, the card will take users to another page with more information on that subject. For guidelines about type legibility and photo treatments, see ELEMENT STYLING: OVERLAYS, GRADIENTS, AND DROP SHADOWS in this guide. Text links: #FFFFFF, Open Sans Semibold, all caps Card backgrounds: #535C5C Arrows: #00B140 On the homepage, we use cards to feature statistics. Upon mouse hover, the cards will magnify and display a primary green overlay on the photo. When EXPLORE is clicked, users are taken to another page with more information. Stats text: #FFFFFF, Sentinel Bold, all caps Text links: #FFFFFF, Open Sans Semibold, all caps Arrows: #FFFFFF We also use cards as a more visual way for users to choose from a list of items. Upon mouse hover, the card will display a primary green overlay on the photo, and upon selection users are taken to another page. Text links: #FFFFFF, Open Sans Semibold, all caps Card backgrounds: #535C5C 16 MARSHALL UNIVERSITY BRAND GUIDELINES

19 ELEMENT STYLING CONT. TEXT-HEAVY FORMATTING The guidelines for handling text-heavy sections or tertiary pages were carefully chosen to create a visual hierarchy and organization of information while also making the content easy to read. Copy should not appear as a wall of text and should be broken up into sections and include appropriate titles and subheads. Text should always align to the left. Intro text: #1F2727, Open Sans Semibold Titles: #00B140, Sentinel Medium Body emphasis: #1F2727, Open Sans Semibold Body copy: #1F2727, Open Sans Regular Links: #00B140, Open Sans Regular DEGREE ABBREVIATIONS Subheads: #535C5C, Open Sans Semibold, all caps Photography can be introduced on text-heavy pages to help users better understand the content they are reading and allow a place for the eye to rest while reading. Photos should include a text wrap to allow plenty of breathing room around the image. Images and text in these sections will always be aligned to the left. MARSHALL UNIVERSITY BRAND GUIDELINES 17

20 ELEMENT STYLING CONT. PROGRAMS AND SINGLE AREAS OF STUDY Just below the general information for undergraduate programs is a prompt to ask users what they want to study. Below this prompt is the full list of areas of study, and they function as drawers with pertinent information displayed when users click the plus sign to expand the box. The small sidebar (Explore Area of Study) includes links to related content. Program titles: #08CD4F, Sentinel Medium Plus and minus signs: #08CD4F Title box: #1F2727 Degree: #A2AAAD, Open Sans Semibold, all caps Copy box: # Body copy: #FFFFFF, Open Sans Semibold Sidebar lines: #A2AAAD Sidebar header: #FFFFFF, Open Sans Semibold Sidebar links: #FFFFFF, Open Sans Semibold, all caps CURRICULUM The curriculum section includes a breakdown of the specific program a user has selected and should be formatted similarly to the text-heavy sections of the site. See ELEMENT STYLING: TEXT-HEAVY FORMATTING for more information. Titles: #00B140, Sentinel Medium Intro text: #1F2727, Open Sans Semibold Text links: #00B140, Open Sans Semibold Body copy: #1F2727, Open Sans Regular Subheads: #535C5C, Open Sans Semibold, all caps Body emphasis: #1F2727, Open Sans Bold Separation lines: #A2AAAD Plus/minus signs: #A2AAAD 18 MARSHALL UNIVERSITY BRAND GUIDELINES

21 ELEMENT STYLING CONT. COURSE LISTINGS Below the program curriculum information are the specific program course listings and descriptions. Users can scroll through the list of courses in the white box and when selected, that course s description will be provided to the left. The button VIEW ALL COURSES will take users to the master course listing page. Course title: #535C5C, Open Sans Semibold Course code: #00B140, Sentinel Semibold, all caps, underlined Course hours: #535C5C, Open Sans Bold, all caps Description: #1F2727, Open Sans Regular Button: See ELEMENT STYLING: BUTTONS, LINKS, AND CALLS TO ACTION in this guide. Course code box: #A2AAAD, #FFFFFF, Sentinel Medium, all caps Course title listing: #A2AAAD, Sentinel Regular, all caps Active course code box: #00B140, #FFFFFF, Sentinel Semibold, all caps Active course title listing: #1F2727, Open Sans Bold MARSHALL UNIVERSITY BRAND GUIDELINES 19

22 INDIVIDUAL COLLEGE SITES Pages built to represent individual colleges must follow a similar set of guidelines created for the main site template. The tool bar, navigation, breadcrumbs, and footer remain the same. Elements used throughout the body of the page are borrowed from the main template, accomplishing the goal of giving each college its own site while staying within established standards. COLLEGE HEADERS Individual college site pages do not feature a hero image in the header and are designed to be more text-heavy. Utilizing elements from the general site design, like the majors section or news and events, but not including an image in the header, helps each college site stand out from the other pages on the overall website. College pages contain the same elements as other pages, including the tool bar, navigation, breadcrumb menu, and footer. These cannot be changed and should remain the same to stay consistent with overall site branding. COLLEGE OF SCIENCE COLLEGE OF SCIENCE College title: #00B140, Sentinel Semibold, all caps 20 MARSHALL UNIVERSITY BRAND GUIDELINES

23 INDIVIDUAL COLLEGE SITES CONT. GENERAL PAGE LAYOUT While the header for college pages does not include a hero photo, a large image spanning the width of the body copy should accompany the information about each one. See ELEMENT STYLING: TEXT-HEAVY FORMATTING for guidelines on styling the copy on these pages. College pages should utilize and customize the secondary navigation with sectioned items located on the page. FACULTY RESOURCES A box containing the college s contact information should also be included and customized to include the address, phone number, fax number (if applicable), and the address. Header: #00B140, Open Sans Semibold, all caps Location name: #1F2727, Open Sans Semibold, all caps Contact info: #1F2727, Open Sans Regular A feature of the individual college pages is the inclusion of three unique gray buttons that contain links to more specific information users may want to see, including the call to action GIVE TO (COLLEGE NAME), job listings, and a roster of committee members. Button: #A2AAAD, #FFFFFF, Open Sans Semibold, all caps MARSHALL UNIVERSITY BRAND GUIDELINES 21

24 Marshall University Office of Admissions One John Marshall Drive Huntington, WV GOHERD-1 marshall.edu