Emmanuel College Web Style Guide

Emmanuel College Web Site Style Guide

Prepared by BigBad, Inc. June, 2007

ta b l e o f c o n t e n t s

Contents Overview & Color Palettes...................................................................................................................................................................................... 3

General Guidelines ........................................................................................................................................................................................... 4-7 Content Hierarchy & Styles .......................................................................................................................................................................... 4

Image Use...................................................................................................................................................................................................... 5-6

Page Design Usage Guidelines . ............................................................................................................................................................. 7-8

Module Useage & Definitions....................................................................................................................................................................... 9

Sample Pages.................................................................................................................................................................................................. 10-31

Home................................................................................................................................................................................................................. 10

Level 2 Admissions ........................................................................................................................................................................................ 11 Level 2 Standard .......................................................................................................................................................................................... 12 Level 3 Standard .......................................................................................................................................................................................... 13 Level 4 Standard .......................................................................................................................................................................................... 14 Level 5 Standard .......................................................................................................................................................................................... 15 Level 6 Standard .......................................................................................................................................................................................... 16 Custom Page: Form ...................................................................................................................................................................................... 17 Custom Page: News & Events . .................................................................................................................................................................. 18 Custom Page: News Detail .......................................................................................................................................................................... 19 Custom Page: Event Detail ........................................................................................................................................................................ 20 Custom Page: Alumni & Friends................................................................................................................................................................ 21 Custom Page: Departments & Areas of Study....................................................................................................................................... 22 Custom Page: Departments Landing....................................................................................................................................................... 23 Custom Page: Departments Sub Level.................................................................................................................................................... 24 Custom Page: Graduate & Professional Studies L2 Landing............................................................................................................. 25 Custom Page: Graduate & Professional Studies L3............................................................................................................................. 26 Custom Page: Graduate & Professional Studies L3............................................................................................................................. 27 Custom Page: Wide................................................................................................................................................................................. 28-29 Custom Page: Looking Closer Pop-Up..................................................................................................................................................... 30 Custom Page: Profile Pop-Up...................................................................................................................................................................... 31 Photoshop Instructions...................................................................................................................................................................................... 32

O V E R V I E W & COLO R P ALETTEs This style guide outlines the HTML text styles, color usage and image formats for the newly redesigned Emmanuel College Web site. In order to ensure visual consistency throughout the site, it is important to follow these guidelines as closely as possible.

General Rules • Body content should always be flush left, never centered or flush right.

Color Palettes The following HTML colors have been carefully selected to match Emmanuel College’s identity, support current collateral designed for Emmanuel, and to ensure maximum readability on the Web. Text colors should be used as they are available in the CMS. To maintain consistency throughout all areas of the site, additional colors should snot be used.

• Page content should not begin with a bulleted list.

• For maximum consistency and readability, use only the text styles and colors available in the CMS.

Primary Palette

• Text modifications should be used sparingly, or they may become overwhelming and affect readability. If certain words require additional emphasis, apply a style that is bold or italic.

• All content or in-line images must be re-sized to the appropriate dimensions for the page on which they will appear and saved as 72 dpi JPG files.

• Imagery should be used judiciously within content, and only when it supports the message within the content.

• Where “Resources” & “See Also” links and embedded content links are permitted, the links should be directly relevant to the content of the page. These links should not lead the user to unrelated information.

HEX 668CB5 R102 G140 B181

HEX 94516F R149 G65 B111

HEX ABB400 R171 G180 B0

HEX D39100 R211 G145 B0

Secondary Palette

HEX CBDDE8 R203 G221 B232

HEX 55708D R85 G112 B141

HEX A0B0C0 R160 G176 B192

HEX 7B8CA1 R123 G140 B161

HEX B3BB19 R179 G187 B25

HEX C07922 R192 G121 B34

HEX FEE6B5 R254 G230 B181

HEX FDD98D R253 G217 B141

HEX FFBD00 R255 G189 B0

HEX 00000 R0 G0 B0

HEX FFFFFF R255 G255 B255

• Web content should be as succinct as possible. Be sure content is relevant and keep copy to a minimum.

g e n e r a l guid e l i n e s

Hierarchy & Styles

Content: Hierarchy & Styles

Default Text

The content and navigation text styles used in the Web site have been carefully created

The default text style should be used for the bulk of the content on the site. Examples of

to support usability by defining and establishing a hierarchy of information that is

default text can be seen throughout the style guide.

consistent across all areas of the site. Styles should not be used for other than their intended purpose. Improper use of styles will detract from the user’s experience and

H2 (main content heading)

understanding of the site and its content. Header styles should be applied and used

This style should be applied to the highest level headings within the standard content.

as described below. The default text style should be used for most text on the site. Text should be flush left, never flush right or centered. Bold or italic text may be used for

H3 (content subheading)

special emphasis within the body—use text modifications sparingly and only when

This style should be applied to subheadings for content under H2 headings.

appropriate. Other styles not listed here are unique to particular templates. In some cases it may be necessary to revise or edit content so that its structure is consistent

H4 (content subheading)

with that of the rest of the site.

This style should be applied to subheadings for content under H3 headings.

Bulleted List A bulleted list style has been provided for lists within content. Bulleted lists enhance scanning readability and comprehension. List items should be limited to one paragraph each. Examples of bulleted lists can be seen throughout the style guide.

Numbered List (ordered list) A numbered list style has been provided for numbered lists within content. Choose a numbered list if clear sequence or hierarchy among items is critical.

List Links This style should be used for lists of links.

Anchor Links An anchor link style has been provided for use within content. Anchor links can help users navigate a long page of content by taking them directly to a particular are of a page.

Table Styles

Default Text Example

A default table style has been provided for use within content. Tables are an effective

H2 Example H3 Example

means of presenting data such as timetables, weights & measures, and prices.

IMAGE USE

Types of Imagery

Imagery on the Emmanuel College Web site will include two major types: brand

Content Imagery

imagery and content imagery. While the occasional image will fit into both categories,

Content imagery refers to photographs placed within the content area of a page (in-

it is easiest to think of these image types separately.

line). Content photographs should be used judiciously and care should be taken that images add value to the site and specifically enhance or illustrate concepts or ideas

Brand Imagery

present in the text of the page on which they are placed. In some cases, it may be best

Brand imagery is used to communicate high-level information about Emmanuel and

not to use images if there are none that directly support or illustrate the content of the

to communicate a feeling of what the college is like. These images should illustrate

page.

key attributes of Emmanuel, and should depict the students, faculty, interpersonal interactions, and facilities of the college. While brand imagery is used throughout the site, it is most concentrated at upper levels, such as on the home page and secondlevel pages.

Brand Imagery Examples

Content Imagery Examples

g e n e r a l guid e l i n e s

image Guidelines

Image Guidelines

Choosing Images

Images are one of the primary elements contributing to a page’s file size, and

Whenever possible, use photographs that include people. This will reflect the friendly,

numerous large photos will adversely affect download speed.

supportive atmosphere of Emmanuel, and in the case of prospective students, will help them picture themselves at the school. People should be positioned relatively close

• In the majority of cases, users are best served by placing no more than one content or in-line image per text page.

together—space between people that works well in print easily becomes distracting dead space on the Web and can reduce the amount of interesting detail that can be included. Imagery should highlight not only student–student and student–faculty

• If more than one image is used, each image should be placed as stated below making sure that no less than one paragraph of content separates them.

interaction, but should also feature strongly the facilities located on campus.

In the Web medium, certain types of imagery works better than others:

• All in-line images should be placed in the left-hand side of the content area, and should not be centered or placed on the right.

• In-line images (content images) for standard page designs should be sized to 115 x 135 pixels and saved as 72 dpi JPG files.

• Use of in-line (content) images next to a bulleted list, list of links, or quote module is not recommended.

• Tight shots (close-ups on subject or content) work much better than wider shots.

• Images with a lot of detail and/or complicated composition are less effective.

• All images need to be able to work well at a relatively small size.

• Simple backgrounds work best; in the online environment too many details can easily overwhelm the rest of the subject matter.

IM P AG AG E ED U E S IEG N U S A G E G U I D EL I NE S

Standard Types Page of Imagery Designs

Second Level Page Designs

Fourth Level Page Designs

Second Level pages define most of the major

The Fourth Level page design provides additional

sections of the site and provide users information

navigation on the right (if needed) that is designed

about what will be found in each of these sections.

to feature additional navigation to related areas of

Some examples* of pages that will use Second

that section. Examples* of pages that would use

Level page design are:

the Fourth Level page design are:

• Academics • Admissions • About Emmanuel • Tuition & Aid • Student Life Third Level Page Designs The Third Level of the site is where users begin to explore longer, more detailed content. Some areas of the site are purely informational, while other areas include rich content and visual imagery.

Some examples* of pages that will use Third Level page design are:

• President’s Biography • Honors Program • Academic Advising Fifth Level and Deeper This page occurs only under Fourth Level pages and may include a deeper level of navigation on the right hand side. Examples* of pages that would use the Fifth Level page design are: • Services • Family Weekend • Grants

• Message From the Dean • International Students • Student Policies • Support Emmanuel

* This is a partial list and does not include all pages that may be used with this page design.

IM P AG AG E ED U E S IEG N U S A G E G U I D EL I NE S

UNIQUE Types Page of Designs Imagery

Graduate & Professional Programs (GPP)

Alumni & Friends

The GPP Page Designs are exclusively for the

This Page Design provides a wealth of information

Graduate and Professional Studies area of the

directed at alumni in an easy-to-access manner

Emmanuel Web site. This unique section of the site is designed to speak directly to the adult professional seeking an advanced degree—

including activities and online giving.

bachelor’s or master’s.

News & Events Page Designs The News & Events page design is specifically designed to highlight top events and news stories in a timely fashion.

Department Landing & Sub Page Designs The Department Page Designs are to be used for the various department sub-sites within Emmanuel’s Undergraduate Majors and Programs. These page designs can be customized to each individual department with imagery on the header and title bar, department-specific news & events and other timely content. Examples* of pages that will use the Department page design are: • Biology • Global Studies • Philosophy

* This is a partial list and does not include all pages that may be used with this page design.

M o du l e s

usage & Definitions

Modules BigBad has created several specialty modules for the new Emmanuel Web site.

Modules are essentially content enhancing assets that allow the user to gain access to related and/or additional information that is strategically relevant to the page and it’s content. You will find a listing and additional information on the modules in the CMS.

Looking Closer Module

Module Examples

Looking Closer A link to the Looking Closer Module will appear on the Home page as well as Standard Level 2 pages. Clicking into this link from the home will expand the window to reveal images and lead-in story to five unique attributes. From here you can learn more about each attribute by clicking the Learn More button which will launch the Looking Closer pop-up feature. Clicking into the Looking Closer feature link from Level 2 pages will automatically launch the pop-up window.

Profiles The Profile Module will appear on all Standard Level 2 pages and GPP Level 2 pages in the upper right-hand corner. The featured profile image and lead-in story will be changed on refresh or revisit of the page. The profiles are actual stories told about real students, alumni, faculty and staff and should reflect the Emmanuel experience.

Timely Content (optional) There are several areas within the Emmanuel site that feature Timely Content areas.

These flexible areas were developed to promote various communication needs that are not specifically news or events. Timely Content are short factoids or blurbs editable by the CMS and may include: admission due dates, student clubs and organizations, etc.

Resources and See Also (optional) Links that fall under the heading “Resources” are task-oriented links that should relate specifically to the section/page content and live within the Emmanuel College site. “See Also” links should also relate to the section and content but can link outside of the Emmanuel site. These links are optional on all standard Levels 2-5.

Research (optional) This is an optional module that may be used on Levels 2-5 and the Department home. The Contact module is for section/page related contact information.

Career Paths (optional) This optional module is used in the Department and Areas of Study pages and links to the “What Can I do with my major?” page.

Quote (optional) This module available to use on Standard Level 3 pages throughout the site and is intended to be used at the beginning of content and when there is no content image. This module is entirely graphic and not editable by the CMS.

s a mp l e p a g e s Home Page Example: Home

Additional Navigation

The home page is unique among all pages of the site. Individual content is variable but should be kept brief. Each content item on the page should be thought of as a “teaser”—you want to interest a user so they will click into the site. Attempting to provide too much information or too lengthy content on this page will overwhelm users. Use deeper pages of the site to

1

provide full details and information.

1

Home Page Branding Images The large main image is meant to convey the iconic images of Boston. The 2 images of the students to the right are meant to show the diversity of students at Emmanuel. The people images swap out upon page refresh or revisit, and new images must be created using the supplied PhotoShop file (see page 31 for instructions).

3

5

Looking Closer at Emmanuel Flash Feature Upon rollover, a menu is revealed that lists several breakout topics which link to more infromation via a pop-up window (see pages 9 and 29 for detailed descriptions of Looking Closer).

4

3

Footer Navigation

Primary Navigation (Second Level Links)

4

5

Timely Content Feature Area This area address up-to-the-minute communication needs such as important announcements, dates, links to dynamic areas of the site, etc. It is composed of a title and description, together no more than 9 words (must remain on 3 lines) and a thumbnail image sized to 41 x 40 pixels in dimension.

Graduate & Professional Program This area can be used to describe a new program, campus location, or upcoming informational meeting.

Description can be no more than 12 words in length.

News & Events Highlights links to 3 recent news or event items. The CMS allows for the administrator to select which 3 appear on the home page (see pages 19 & 20 for instructions on entering content).

10

s a mp l e p a g e s Level 2 Admissions Example: Home > Undergraduate Admissions Level 2 pages define the major sections of the site, and provide users information about what will be found in each of these sections. All Level 2 sections will use this template unless otherwise specified as having a custom template detailed further in this document.

1

1

Level 2+ Branding Image The image at the top-left of the page should represent brandimagery of the campus and students. Each main section will have one image that runs constant throughout that section as you drill down. The image should be 335 x 165 pixels in dimension.

3 4

Profile The Profile Module will appear on all Level 2 Standard pages in the upper right-hand corner. The featured profile image and lead-in story will be changed on page refresh. The content is entered when creating a new profile (see page 9 and 30 for detailed descriptions).

The profiles are actual stories told about real students, alumni, faculty and staff and should reflect the Emmanuel experience.

H2

Default Text

H2

H2

3

Level 2 Intro Image

4

Timely Content Module

H2

5

This image should represent general imagery of the overall lead-in text that appears to the right of the image, and is only present on Level 2 pages. The image should be 65 x 93 pixels in dimension.

The timely content module on Level 2 pages should be no more than 5 words in length (4 lines long).

5

Decision Date Feature (optional) Highlights admissions deadlines and applications.

Keep wording to a couple of sentences.

Navigation Block (Showing Third-Level Links)

11

s a mp l e p a g e s Level 2 Standard Example: Home > Academics This Level 2 page is similar to the Level 2 Admissions page, except it features additional (global) navigation on the right and has an example of a research feature in the content area.

1

Research Feature Highlights department student-faculty research and service learning opportunities. Composed of a thumbnail image sized to 58 x 58 pixels in dimension, a title of up to 7 words and a description of up to 15 words in length.

1

Global Navigation

12

s a mp l e p a g e s Level 3 Standard Example: Home > Academics > Academic Support Services Level 3 pages fall under Level 2 pages and are generally content heavy. All Level 3 pages will use this template unless otherwise specified as having a custom template detailed further in this document.

2

1

Quote Rollover The quote rollover feature can appear on any Standard Level 3 page. It is intended to be used at the beginning of content and when there is no content image. It highlights a quote from students, faculty or alumni. The quote rollover graphic must be made using the custom PhotoShop file supplied (see page 31 for instructions).

1

2

Level 3+ Upper-Right Branding Image Standard Levels 3-6 templates all have a second branding image and additional navigation at the top of the page that rotates on refresh/revisit. The images should represent brand-imagery of the campus and students, and must be 253 x 83 pixels in dimension.

Navigation Block (Showing Fourth-Level Links)

13

s a mp l e p a g e s Level 4 Standard Example: Home > Academics > Academic Support Services > Academic Resource Center Level 4 pages fall under Level 3 pages, and are generally content heavy. All Level 4 pages will use this template unless otherwise specified as having a custom template detailed further in this document.

1

Optional Content Imagery In-line images can be added to the standard content (default text) on most pages. The image should be directly related to the main body of content. The border is applied automatically by the CMS. All in-line images must be 115 x 135 pixels wide.

1

Bold

H2

Navigation Block (Showing Fourth-Level Links)

14

s a mp l e p a g e s Level 5 Standard Example: Home > Academics > Academic Support Services > Academic Resource Center > Mission Statement Level 5 pages fall under Level 4 pages, and are generally content heavy. All Level 5 pages will use this template unless otherwise specified as having a custom template detailed further in this document. Level 5 page titles show up in the content area in green.

Level 5 Page Title

Bulleted

Navigation Block (Showing Fifth-Level Links)

15

s a mp l e p a g e s Level 6 Standard Example: Home > Academics > Academic Support Services > Academic Resource Center > Mission Statement > Level 6 Page Level 6 pages fall under Level 5 pages, and are generally content heavy. All Level 6 pages will use this template unless otherwise specified as having a custom template detailed further in this document. Level 6 page titles show up in the content area in green.

Navigation Block (Showing Sixth-Level On-State)

16

s a mp l e p a g e s Example of a Form Example: Home > Undergraduate Admissions > Applications & Deadlines Online Application Form This page is an example of a custom form. All of the styles are applied automatically. See detailed instructions on creating forms in the Administrator Document.

17

s a mp l e p a g e s News & Events Page Example: Home > About Emmanuel > Emmanuel News & Events The News & Events main page contains highlights that link to 3 news and 2 event items. The CMS allows for the administrator to select which ones appear on the the highlight page.

18

s a mp l e p a g e s News Detail Template Example: Home > About Emmanuel > Emmanuel News & Events > News Detail This page layout is for news detail pages. When entering the content into the CMS, you would upload the thumbnail images and lead-in content seen on the Home page and News & Events page.

1

Detail Page Image & Caption News Articles can have an in-line image that must be 115 x 135 pixels wide. The border is applied automatically. A caption can also be entered with the image within the image’s Alt text.

H2

1

2

Thumbnail Image A second image must be created (a cropped version of the detail page image) and must be sized to 58 x 58 pixels in dimension. The border is applied automatically. This image will appear on the Home page and News & Events main page.

2 Example of Thumbnail From News & Events Page

19

s a mp l e p a g e s Event Detail Template Example: Home > About Emmanuel > Emmanuel News & Events > Event Detail This page layout is for event detail pages. When entering the content into the CMS, this is where you would upload the thumbnail images and lead-in content seen on the home page and News & Event page.

1

Detail Page Image Event Details can have either a large image no wider than 484 pixels wide, or a small image that must be 115 x 135 pixels wide.

A second, cropped thumbnail version of the same image must be created to be used on the home page and news & events page. The size of the thumbnail is 58 x 58 pixels, and the border is applied automatically by the CMS.

H2 H3

1

To Register Box (optional) The content in this box can be changed, but there must be a title, link, email and phone number.

3

Coming Soon feature This area is for highlighting featured or important upcoming event content. It is composed of an image at 65 x 93 pixels in dimension, a title and description of no more than 28 words in length.

4

Thumbnail Image A second image must be created (a cropped version of the detail page image) and must be sized to 58 x 58 pixels in dimension. The border is applied automatically. This image will appear on the home page and news and events main page.

4 3 Example of Thumbnail From News & Events Page

20

s a mp l e p a g e s Alumni & Friends Example: Home > Alumni & Friends

This page layout is for Alumni & Friends and features a custom graphic at the top along with featured alumni news and events.

1

2

Bold

2

1

Alumni & Friends Main Page Image

2

Alumni News & Events Features Highlights links to 3 news and 3 event items.

You must enter content via the master news list (see pages 19 & 20 for instructions on entering content).

The CMS allows for the administrator to select which 3 appear on the page.

The image in the center of the page will rotate on refresh/ revisit and is editable in the CMS. New images should feature alumni and friends and be 394 x 154 pixels in dimension. The text above and below are graphics and cannot be edited.

Bold

21

s a mp l e p a g e s Departments and Areas of Study Example: Home > Academics > Departments & Areas of Study

This page features a listing of all the departments and areas of study. Each one links off to it’s corresponding department pages or areas of study.

Header Row (rule style)

22

s a mp l e p a g e s Department Landing Example: Home > Academics > Departments & Areas of Study > Biology Department

This template is used for all Departments & Areas of Study pages.

This template is considered a Department Level 1. Each can have a custom image in the upper left behind the department title.

1

1

Department Page Image

2

Department Landing Intro & Image

2 5

3

3

The image at the top-left of the page should be a conceptual representation of the department. Each department will have one image that runs constant throughout that section as you drill down.

The image should be 335 x 165 pixels in dimension. Care should be taken to choose images that works with type on top of it.

This image should relate to the introduction text to the right and be sized to 65 x 93 pixels in dimension.

The intro should be up to 25 words in length.

Large Career Paths Feature (optional) This is for the Department Landing page and features some examples of career related to the department and links to a careers page. If there is no in-line image above, this large option should be used vs. the smaller option which is shown on the following page.

4

4

Research Features research opportunities at the college. It is composed of an image at 65 x 93 pixels in dimension, a title and description of no more than 28 words in length.

5

Department Chair Info (optional) This area should be approximately 7-8 words in length (4 lines long) and my link to the faculty bio page.

Navigation Block (Showing Department Second-Level Links)

23

s a mp l e p a g e s Department Sub Level Example: Home > Academics > Departments & Areas of Study > Biology Department > Biostatistics Major

This template is used for all Departments and areas of study Level 2 pages.

1

1

Department Page General Image The image at the top-right of the page should be brand imagery relating to the department. Each department will have one image that runs constant throughout levels 2+ within that section as you drill down. The image should be 251 x 120 pixels in dimension.

2

Section Intro The section intro should be no more that one paragraph in length.

3

Department In-lie Image (Optional) The image should be directly related to the main body of content. It must be sized to 116 x 164 pixels in dimension; the border is applied automatically by the CMS.

4

Small Career Paths Feature (Optional)

2 5 3

4

This is for Department Level 2 pages. and features a link to a careers page.

5

Department Chair or Coordinator Features the name and title of the department chair or coordinator. These can link to the faculty bio page.

Navigation Block (Showing Department Second-Level On-State)

24

s a mp l e p a g e s GPP Level 2 (Landing) Example: Home > Graduate & Professional Programs

This is a custom template for the Graduate and Professional Programs section. This template has a new color palette and a custom banner at the top of the page.

2

1

1

Level 2+ Branding Image The image at the top-left of the page should represent brand-imagery related to GPP. The image should be 336 x 148 pixels in dimension.

3

2

5

Profile The Profile Module will appear on the Level 2 landing page of the GPP section in the upper right-hand corner. The featured profile image and lead-in story will be changed on page refresh or revisit. The content is entered when creating a new profile (see page 9 and 30 for detailed descriptions). The profiles are actual stories told about real students, alumni, faculty and staff and should reflect the Emmanuel GPP experience.

4

3

Level 2 Intro This lead-in text is only present on the GPP Level 2 page. The text is a graphic image.

7 4

GPP Program Listings The program listing links bring you to information about each specific GPP program or area of study.

6 5

GPP News Feature Highlights links to 3 news items. You must enter content via the master news list (see pages 19 & 20 for instructions on entering content). The CMS allows for the administrator to select which 3 appear on the page.

6

Satelite Campus Link Links to information about off-campus GPP locations.

GPP Navigation Block (Showing Local GPP Navigation)

25

s a mp l e p a g e s GPP Level 3 Example: Home > Graduate & Professional Programs > Academic Information

1

This is a custom template for the Graduate and Professional Programs section. This template has a new color palette and a custom banner at the top of the page.

1

GPP Section Branding Image The image at the top-left of the page should be brand imager representing the graduate and professional programs. Each section within the main GPP page has its own image which remains consistent throughout that section. The image should be 502 x 148 pixels in dimension.

2

2

In-line Image (Optional) The image should be directly related to the main body of content. It must be sized to 116 x 164 pixels in dimension; the border is applied automatically by the CMS.

List Links

Navigation Block (Showing GPP Third-Level Links)

26

s a mp l e p a g e s GPP Level 4 Example: Home > Graduate & Professional Programs > Academic Information > Academic Advising

This is a GPP Level 4 page. If there is additional navigation at Level 4, you may enter fifth level navigation as needed.

Navigation Block (Showing GPP Fifth-Level Links)

27

s a mp l e p a g e s Wide Templage Example: Home > Offices & Services Example: Home > Search

This template is used for pages that require full-width for wide content. There is no left or right navigation or modules.

Content can be in columns or can be within tables.

28

s a mp l e p a g e s Wide Templage (cont.)

Example: Home > Site Map

This template is used for pages that require full-width for wide content. There is no left or right navigation or modules.

Content can be in columns or can be within tables.

29

s a mp l e p a g e s Looking Closer Pop-up Example: Home > Looking Closer This pop-up appears when a user clicks on a the Looking Closer feature on the home page and second level pages. Each horizontal tab offers a

1

different topic. Each topic has multiple stories which the user can navigate through by clicking on the precious and next buttons on the bottom. Each story must have one large image across the top, and can also have optional podcast, video and audio.

1

Story Image Each story requires one large image sized to 596 x 294 pixels in dimension.

2

Learn More About Links These links are section dependent (as opposed to story-dependent) and link to additional section relevant information. Clicking through these links will open the information in a new window.

H2

2 2

Rich Media Links (optional) These links can be used to showcase story-related media assets.

They can be used together or seperately as needed. Clicking through these links will open the media file in a new window.

3

30

s a mp l e p a g e s Profile Pop-up Example: Home > Academics > Profile The Profile Pop-up appears when a user clicks on a profile module.

1 1

H2

Profile Image Each profile must have 2 copies of the profile image. The images can be the same or 2 different images of the same person: A large vertical format for the profile main page cropped to show the upper half of the person. This image should be sized to 225 x 311 pixels in dimension.

A small horizontal format for the Level 2 Modules cropped to the head and shoulders of the person. This image should be sized to 253 x 96 pixels in dimension.

Level 2 Module

31

P h o t o S h o p i n s t ru c t i o n s Home Page: 2 Students Right Image (home_students_2images.psd) There are 2 image layers in the PSD. One for the top image, and one for the bottom. The layers have masks applied to them that have the exact dimension for each image. Update the images as necessary. There should always be a female image on the top and a male image on the bottom. Special care should be taken to choose faces that compliment each other as well as represent diversity.

Both images should be 124 x 138 pixels, and placed one above another.

The PhotoShop document’s overall size is 124 x 276 pixels.

DO NOT CHANGE THE SIZE OF THE PHOTOSHOP FILE, THIS WILL RESULT IN THE HOME PAGE IMAGE BEING BROKEN. Export the image as a single JPEG at a quality of 75.

Level 3: Quote Rollover Image (Level3_Green_Quote.psd) REQUIRED FONT: Rockwell (T1) Regular There is a Text folder in the PSD containing 2 text layers; one for the quote and one for the name: QUOTE TEXT: The font settings are Rockwell (T1) Regular; 12/18px; tracking=60; color#909623 NAME TEXT: The font settings are Rockwell (T1) Regular; 10/12px; tracking=60; color#909623

Edit the text, if the PhotoShop document is too tall or too short, adjust the height of the canvas size as necessary (Only allow the bottom to grow longer, THE WIDTH MUST REMAIN 192 PIXELS). There should be 24 pixels of space between the baseline of the last line of quote text and the baseline of the first line of name text.

There should be 17 pixels of space below the baseline of the last line of text.

Do not move the text layer (it should remain aligned to the guidelines in the PSD, the text layer can only grow longer from the bottom down).

24 pixels 17 pixels

Save the image as a GIF with 16 colors.

32