Exemple de charte graphique : Harvard

Brand and VisualIdentity Guidelinesversion 2.0 september 2014

IntroductionWe believe tHat eduCation is tHe most pressinG issue in our World today.

Through education, we expand opportunity. through education, we transform lives. through education, we nurture new generations of leaders and innovators across disciplines, industries, and the boundaries of academia and practice. through education, we build a better world together.

our brand represents our mission, our vision, and, in essence, our school. it’s what we say, how we sound, how we look, and even how we act. it all adds up to an authentic representation of who we really are.

keeping HGse’s brand as clear, consistent, and cohesive as possible is crucial to telling our story in a clear and compelling way. the goal of this guide is to provide our community with the visual and editorial tools to articulate and express all that defines and distinguishes us.

Creative ApproachHarvard Graduate School of Education: brand and visual identity Guidelines

“ We are dediCated to CHanGinG tHe World tHrouGH eduCation, by expandinG opportunities and improvinG outComes.” — dean James ryan

Visual IdentityHarvard Graduate School of Education: brand and visual identity Guidelines

Creative Approach


our visual identity conveys a balance of tradition and innovation, history and aspiration, wisdom through years of research and practice, and the constant search for new knowledge.

we accomplish this balance through:

• Thoughtful interplay of open space and Harvard crimson.

• Combination of traditional serif fonts for headlines and more contemporary sans serif fonts for copy.

• Use of bold statements with clear calls to action.

• Selection of high-quality imagery that conveys a sense of time and place, and evokes moments of insight.

Tradition and Innovation


additional colors in our primary and secondary palettes provide wayfinding and classification. you may also use them to convey the depth and breadth of HGse’s work, as well as the diversity of our community.

iconography provides an efficient way to navigate, search, and remember content.

keylines bring focus to a layout and create a sense of order. a keyline is a single line used to anchor text or organize information.

subsequent sections of this manual provide details on the proper use of our shield, logos, typography, iconography, and color.

Shaping Those Who Shape the Future

Congressional Hearing Education Committee July 07, 2015

Lorem Ipsum


Pudiorrum eturiam repro dem quid magnient, sam facim ab is mus re, seque consed utes pa quiditio exersperio cus molorio.

• Uptatur sit ario molo tem ea aut ipsaerf eriberes quae nonsedia sum eturestincto conecum ea se ditisto.

• Udiores equistota sed quaestiur, quia il ilitatia sum nat restem facit, eium quosae derovid quo doloriasit laborroatem ducidem nimilignis sinisit quat.


Visual Identity


it is very important to maintain a sense of consistency when referring to the school, in order to crystallize HGSE’s purpose in the minds of both new and familiar audiences.

Consistency in referring to the school also helps to minimize confusion and to differentiate HGse from peer and competitor institutions.

Nameour institution’s name is:

Harvard Graduate School of Education

verbally, and in print, the only appropriate acronym is:

HGSEWhen using this acronym verbally, each letter should be pronounced individually. avoid sounding out the letters in any way. in particular, the use of the pronunciation “Hugsie” should be discouraged and avoided in all cases.

The School of Ed, the Ed School, or School of Educationthese references should not be the primary or first mention in any document. they can be used verbally and in written pieces as a way to provide a sense of linguistic variety.

not:

• Harvard’s Graduate School of Education

• Harvard University School of Education

• The Graduate School of Ed.

• The Graduate School


each of Harvard’s graduate schools boast unique shields that incorporate the College’s original arms: a shield with the latin motto “veritas” (“verity” or “truth”) on three books.

HGSE’s shield indicates Ezekiel Cheever, the most famous schoolmaster of seventeenth-century new england, and it is based on the arms that appear on the tomb of his grandson in one of Charlestown’s oldest burying grounds.

the shield should not stand on its own, except in specific cases where legibility will be a problem.

please see the logo usage section for details.

Shield


the HGse logo exists in two orientations to accommodate most applications. this section also details tagline applications, specific affiliated group treatments, and buffer space allowances.

each logo should be treated as one unified graphic and should never be separated or distorted. the shield and type of the logo should never be broken apart and the proportions of the logo should remain consistent.

the logo cannot be modified in any way; it is forbidden.

note that we updated the shield in June 2014. before beginning a design project, ensure that all assets are up-to-date.

the space around the logo and school name should be equal to (or greater than) the height of the “H” in Harvard. see the logo spacing diagram for more details.

primary logo

secondary logo

Logo and Usage

http://isites.harvard.edu/icb/icb.do?keyword=guide&pageid=icb.page493363



Minimum size: 1.25 in

Minimum size: 3.5 in

WHen to use tHe sHield alone

if the branding space is limited, or if HGse is written out near the logo — such as in social media platforms — then you may use the HGse shield alone.

primary logo

secondary logo

loGo and uSaGE: sizinG and spaCinG


the reversed logo may be placed over any HGse brand or primary color. see our color palette.

loGo and uSaGE: reversinG


do not ...

... Cut off parts of the logo.

... rotate the logo. ... place the logo on a non-brand color. ... place the logo on a gradient or a busy background.

... place the logo on a background that is too light or too dark to be legible.

... stretch the logo disproportionately. ... alter the colors in the logo. ... move elements around.

loGo and uSaGE: don’ts


Tagline“learn to change the world” has a double meaning. verbally, pausing after “learn” allows the listener to understand that our primary goal is education and that we invite our students to, first and foremost, undertake the serious business of learning about education. the rest of the tagline, “to change the world,” can and should be understood in two ways. With a verbal pause, the speaker suggests that the act of learning is the first step to changing to the world.

the secondary meaning is that here at Harvard, students will graduate, prepared to actually change the world.

Contact the Communications and marketing office to use the tagline treatment.

loGo and taGline loCk-up

When the tagline appears with the primary logo, these elements are known as the logo and tagline lock-up. this means that they are locked into this specific relationship to one another and form a single unit. the elements may not be rearranged or the relationship altered in any way to change the logo’s graphic integrity.

taGline Wordmark

in cases where it is necessary to give the tagline more visual priority, the tagline wordmark should be used instead of the logo and tagline lock-up. in those instances, use the visual of the colorful stacked wordmark.


primary logo

secondary logo

TaGlinE: loGo and taGline loCk-up

the HGse logo and tagline lock-up is the primary use for communicating the tagline and exists in two orientations to accommodate most applications.

this logo lock-up should be used the majority of the time.

the logo should not be modified in any way.

each logo should be treated as one unified graphic and should never be separated or distorted and the proportions of the logo should remain consistent.

the space around the logo and school name should be equal to (or greater than) the height of the “H” in Harvard.


TaGlinE: Wordmark

Large Use

Small Use

Small usage:

Large Use

Small Use

the tagline wordmark — a visual representation of the tagline messaging — should be used whenever possible.

large usage

if you are using the logo and tagline lock-up, you do not need to also show the wordmark. use the wordmark in conjunction with highly visual canvases such as banners, interior pages, and website call-outs.


TaGlinE: Wordmark usaGe

the wordmark must never be shown without the HGse logo; however, the two should not be tightly paired. When placed over an image, the stack should be reversed into a solid color.

in the case of vertical banners, the primary lock-up would not be legible from a distance. in such cases, aim for a loose pairing to avoid the suggestion of a relationship.

When you are using the wordmark with the logo, please contact Communications and marketing for more guidelines.


HGSE is moving from a decentralized structure to a “one HGse” ethos. this shift echoes the shift to a “one Harvard” mentality throughout the university.

in developing marks that represent sub-brands and HGse-related entities, lead with the school’s brand marks and use complementary type treatments that support — rather than overshadow — the primary logos.

The tagline should not be visualized with the affiliated group marks.

the space around the logo and school name should be equal to (or greater than) four of the Harvard ”H’s.”

vertical Horizontal

Logos for Affiliated Groups

Development and Alumni Relations

development and alumni relations

Development and Alumni Relations

development and alumni relations



banners guide users through physical spaces. For that reason, layouts should be simple, bold, and clean. users are not looking to be delighted but to be guided.

the use of consistent color coding to relate similar rooms or spaces is highly recommended. in the case of event signage, be sure that all signs look similar to the original event collateral so that attendees will associate your signage with what they already know about the event.

loGoS for affiliaTEd GrouPS: banners


Typography: Print


adobe Garamond

designers have used the Garamond typeface and its variations as a standard for four centuries because of their elegance, warmth, readability, and legibility. drawn in 1989 by robert slimbach, adobe Garamond is a careful, modern interpretation influenced by specimens of Garamond’s original type.

itC Franklin GotHiC

Franklin Gothic is one of the most widely used sans serif typefaces. Recognizable aspects include the two-story “a” and “g,” subtle stroke contrast, and the thinning of round strokes as they merge into stems. the type appears dark and monotone overall, giving it a robust and modern look.

note: We allow the use of arial font when Franklin Gothic is not available.

adobe Garamond

ABCdEfGHIjkLMNOPqrSTUVwxyz abcdefghijklmnopqrstuvwxyz 1234567890abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890

• Headlines

• Call-outs

• Sidebars

• Chart Titles

• Quotes

• Calls to Action

• Letters

itC Franklin Gothic

abcdEfGHijKlmnoPqrSTuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890

abCdeFGHiJklmnopqrstuvWxyz abcdefghijklmnopqrstuvwxyz 1234567890

• Subheads

• Body Copy


Typography: webdigital typography is no longer limited to the short list of system

fonts that come pre-installed on every computer. instead, designers

have access to a variety of services that facilitate sophisticated

type treatments. HGse has elected to use Google Fonts in order

to achieve excellent performance, typographic flexibility, and

consistency with fonts used in printed materials.


Crimson text

Crimson text is a font family in the tradition of beautiful old-style typefaces. it’s a Garamond-inspired typeface redefined to deliver clarity and pixel perfection on any digital screen.

Crimson

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

1234567890

• Page Title

• Intro Paragraph

• Subtitle

archivo narrow

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890

• Usable Knowledge

• Har vard Ed. Magazine

open sans

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890

• Body Copy

• Block Quote

open sans

open sans was designed with an upright stress, open forms, and a neutral, yet friendly appearance. it is optimal for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.

arCHivo narroW

archivo narrow is a grotesque sans serif typeface family originally designed for highlights and headlines. this family is reminiscent of late nineteenth-century american typefaces. the technical and aesthetic characteristics of the font support high-performance typography.


Moluptia venia cullamulpa non repellor aCestrum

et ut ad eosant vellab invento bla essit volor aut lanihil lecelab into eicient mosam, sitemodit, corumquia nimodit init acias sit offici aut aut eatempo ritinit dolupta venimolorrum vendeleseque parundunt aut ute es deleserspel ipis ipsum si rem inum soluptat poriae simi, enis autemporest, tenda velia serisitias aut veribu.

Fictati isquos dolla sit pror as excesenim quis aut etus nulparum eum illaccum et dessitasimin nost, siminve ritinis ipis aut ipsum, exceperiorio estis quuntec ustiosa pereicid que volorum solora nobisi oditate odit latem is aut lab imustor mollend icient amus voluptur, cumquam alibus et esciand entisciam. Gitiorrovid eum doluptatur?

“ Sum, que vid ut eum dendestibus etusandero cimore aspid magnis iminciae. Tendit optatem aces eatquati bearum harum cusciis volum exerept atatem untur.”

volor sint eiumqui simed ea suntia volo con comnis rem dernat ut volut odisquis ullabo. ut quasper natios pliandae. et aut re, archiciis et labo. que maion evelis et pedia debis repudissit fugiant et et laut fugiandust, quibeat emporum nist et laccus.

We selected these families carefully for their clarity, formality, and flexibility. by smartly combining these families, all designers may take a typesetting approach that’s worthy of the Harvard brand’s rich history of combining proven approaches with the best new educational ideas.

the mixing of font families within one document should be kept to a minimum and should follow the specifications outlined in this document. text can be printed in any of the brand colors in the primary palette. text should never be printed in the secondary color palette.

the mixing of font weights should also be kept to a minimum and systematically done to create emphasis and scannability.

adobe GarmondSize: 34 pt

itC Franklin GothicSize: 14 pt

itC Franklin GothicSize: 11 ptleading: 15 pt

adobe GaramondSize: 14 ptleading: 17 pt

TyPoGraPHy: WorkinG toGetHer

example of type Hierarchy


take care not to overly mix type selections.

Consider the level of formality when selecting a typeface. Generally speaking, sans serif fonts (itC Franklin Gothic, open sans, archivo narrow) are less formal than serif fonts (adobe Garamond and Crimson text).

the use of two distinct typefaces is preferred. please follow the pairings set out in this section.

Education is at a crossroads. This is a moment of great challenge, but also one of great opportunity.

In this rapidly changing world, education is in the midst of an immense transformation. Public attention and investment in the field are at high points, and advances in technology and neuroscience are creating a critical opportunity to rethink some of our most basic assumptions about how students learn.

Faced with a system built for earlier eras, it is clear that the challenges of the 21st century demand new approaches. How the field of education meets these challenges is the critical question.

Since its founding in 1920, the Harvard Graduate School of Education (HGSE) has advanced the field with new ideas and leadership. Our history is one of anticipating, and responding to, change.

Today, HGSE continues to lead the way in the development of academic programs and research efforts that address — and anticipate — the needs of the field.

Our overall goal is simple, but ambitious: We aim to be not simply the best education school in the country. We aim to be the best education school ever. A school that prepares transformative leaders, produces bold but plausible ideas for reform, encourages innovation and entrepreneurship, and offers honest answers to important questions. A school, in short, that is central to the conversation and debates about education.

Harvard graduate scHool of education

gse.harvard.edu | 5

TyPoGraPHy: seleCtion


Crimsonpms 187Cmyk: 7-94-65-25rGb: 165-28-48Hex: #a51C30

midnight blue

pms 533Cmyk: 96-84-40-34rGb: 33-49-83Hex: #213153

emerald Green

pms 555Cmyk: 75-32-85-19rGb: 71-118-74Hex: #47764a

Goldenrod yellow

pms 132Cmyk: 32-58-100-17rGb: 156-102-15Hex: #9C660F

brown

pms 174Cmyk: 27-81-97-22rGb: 152-68-41Hex: #984429

Cornflower blue

pms 647Cmyk: 86-57-8-1rGb: 48-109-167Hex: #306da7

payne’s Grey

pms 431Cmyk: 66-50-40-12rGb: 96-110-123Hex: #606e7b

Charcoalpms Cool Grey 11Cmyk: 48-36-24-66rGb: 86-86-86Hex: #565656

We use color to convey our brand. Crimson — synonymous with the Harvard brand — conveys both strength and tradition. Crimson should be the dominant color for materials, with the primary color palette providing accents. these rich colors can have white text printed or displayed over them and meet accessibility standards.

the secondary colors work on two levels. First, they clarify different types of information like categories and sections. second, they represent the depth and breadth of our offerings.

all use of color should meet accessibility standards.

slate blue

pms 7477Cmyk: 85-58-44-25rGb: 48-85-101Hex: #305565

Cool Grey

pms Cool Grey 1Cmyk: 3-2-5-5rGb: 243-243-241Hex: #F3F3F1

process black

Cmyk: 0-0-0-0rGb: 30-30-30Hex: #1e1e1e

pistachio Green

pms 578Cmyk: 20-0-40-6rGb: 195-215-164Hex: #C3d7a4

dove Grey

pms 7542Cmyk: 21-0-6-20rGb: 186-197-190Hex: #baC5C6

lemon yellow

pms 120Cmyk: 0-9-58-0rGb: 255-219-109Hex: #FFdb6d

taupe

pms Warm Grey 8Cmyk: 16-23-23-44rGb: 140-129-121Hex: #8C8179

burnt orange

pms 1595Cmyk: 0-59-100-5rGb: 232-125-30Hex: #d16103

ivory

pms 7499Cmyk: 0-2-15-0rGb: 244-237-202Hex: #F4edCa

brand Colors

primary Colors

secondary Colors

Color Palette



icons are graphics that take up a small amount of space and provide a quick, intuitive representation of an action, status, or functionality. in order to ensure that icons retain their ability to communicate clearly and succinctly, it’s important not to dilute the system by creating new versions or variations of the existing icon set.

iCons are:

• Helpful in adding visual interest and making a page more scannable.

• More and more commonplace as screens get smaller and real estate is increasingly scarce.

iCons are not:

• Wholesale replacements for text.

• Appropriate for enlargement and use as illustrations.

• Used for more than one defined representation.

Iconography


miscellaneous

read

rSS

Popular

recruitTool menu Global filter

ideas

Gift

Podcast

library

directory

Secure area

calendar

audiences

Tag

news

representationalwayfinding

Previous

Search

apply

close

next

Share

connectclose accordian

open accordian

more Share

audio/listen

leaving Site menu Email

video/watch

action-oriented

need a custom icon? as these icons have been created for specific purposes, you may find a need for an icon that communicates something different than what’s shown here. in that case, please reach out to Communications and marketing with your request.

iconoGraPHy: meet tHe Family


Use keylines to anchor text, emphasize messaging, or brand affiliated groups.

the length of the keyline can vary, but it should generally be, at minimum, the length of the word it is placed above.

the weight of the keyline should be light in relation to the text with which it is paired. keylines should act as an accent, and not overpower the text that they support.

When anchoring a keyline, make sure that it is left-justified or right-justified to the respective text, and is spaced out equally to the leading of the text.

keylines



Visual and Editorial Style GuideHarvard Graduate School of Education: brand and visual identity Guidelines

Visual and Editorial Style Guide


Photographyphotography plays a critical role in your audience’s emotional reaction to your communications. in order to respect the school’s rich heritage and convey the gravitas expected of graduate study at HGse, images should lean toward the journalistic and evocative, featuring excellent composition and a minimum of whimsy.

this is an example of an overlay.


in order to be successful in selecting visuals, HGse photo editors should pay careful consideration to two key aspects of images.

1. High qualitythe best images for HGse’s site will be thoughtfully planned and well-executed. though more casual photographic styles have risen to popularity via instagram and Flickr, an image must have high-quality composition, focus, and clarity to carry a webpage or document. When shooting and selecting images, be sure to pay attention to the need for copy space and avoid layering any design elements over an image’s focal point.

2. differentiated Point of View“moments of insight” is the most brand-authentic point of view for HGse. this pov evokes the potential changes that education brings about in an individual’s life. in this approach, selected images should attempt to capture and prioritize the seminal moment of an educational experience or achievement, and convey a time, place, and feeling.

Whether the image features HGse students, or students who benefit from policies or teaching by HGse students, a sense of pride and accomplishment should always be palpable. With few exceptions, avoid images that show disappointment, disillusionment, or frustration, even if they relate to the topic-at-hand.

PHoToGraPHy: seleCtinG imaGery


PHoToGraPHy: buildinGs and loCations


PHoToGraPHy: people


PHoToGraPHy: obJeCts


in an effort to reach the right audience at the right time, HGse maintains two sub-brands on the Web: Har vard Ed. Magazine and Usable Knowledge.

Harvard Ed. Magazine targets alumni, internal stakeholders, and others close to the ed school with long-form storytelling, updates from graduates, and on-campus events.

the Usable Knowledge website seeks to reach education practitioners in the field with easy-to-access education research.

While the sub-brands share many of the brand attributes of HGse, they have a unique identity. the primary audiences’ attributes and benefits vary in sub-brands.

Sub-brands

project

makingcaringcommon

Websites

logos


/harvardeducation

@hgse

@harvardeducation

in marketing and advertising collateral, aim for a clear hierarchy of elements in order to communicate quickly and effectively. the most prominent items should be the logo and a single call to action, as in the examples shown.

Marketing and Advertising

marketing brochure

banner

social media Cards

#througheducation

Share your story.

Harvard Graduate School of Education

stayconnected

#througheducation

How Has education cHanged you?


interior pages

When determining the layout of an advertising and/or marketing piece, use a highly structured grid-system.

Grids regulate large amounts of content, and also ensure consistency throughout the respective piece. it is also necessary to incorporate an ample amount of white space to give the eye a place to rest.


marketing materials for the same event should use the same elements throughout the design to unify the look.

save-the-date invitation

dinner invitation

menusignage

main invitation

&critical conversations bold ideas

Office of the DeanLongfellow Hall13 Appian Way Cambridge, MA 02138

campaign_envelope.indd 1 6/17/14 3:39 PM

&Dinner reception

6 p.m. reception 6:45 p.m. Dinner

campaign KicKoff

gutman Library, 1st floor mary and paul finnegan gallery

September 19, 2014 6 – 8:30 p.m.

Kindly reply using enclosed card or contact Karen Tobin-Guild at [email protected] or 617-496-2301.

This is a private, invitation-only dinner and is not transferable.

campaign_dinner.indd 1 6/17/14 3:41 PM

LOCAL NEW ENGLAND FALL SALAD

Baby Arugula, Roasted Squash and Parsnips, Topped with Pepita Seeds, Fresh Cranberries, and a Nutmeg Vinaigrette

ENTRÉE OPTIONS

Fresh Oregano Rubbed Sirloin Napped with Local Tomato Ragu and Shallot Jus with Frizzled Leeks, Colorful Fingerling Potatoes, Baby Carrots and Wilted Greens or Wild Stripe Sea Bass with Provencal Vegetables and Basil Fume, Ginger and Scallion Studded Quinoa, Baby Carrots and Wilted Greens

VEGETARIAN ALTERNATIVE*

Ginger Sweet Potato Mousse with Arugula, Red Lentils, and Tomato Chutney Served with Baby Carrots and Haricot Vert

*Available upon request.

DESSERT

Vanilla Poached Pear & Apple Mousse in a Cinnamon Allspice CrustDrizzled with Cider Reducation and Burnt Caramel Ice Cream

Salad and all entrée options are gluten-free. Gluten-free dessert available upon request.

SEPTEMBER 19, 2014

CAMPAIGN KICKOFF DINNER

September 19, 2014AppiAn wAy, CAmbridge, mA

Join the Harvard graduate School of education community for a day of critical conversations and bold ideas in education.

&critical conversations bold ideas

campaign_launch_invite.indd 16/20/14 1:45 PM

AGENDA AT A GLANCECHECK-IN Appian Way

A CONVERSATION WITH SECRETARY OF EDUCATION ARNE DUNCAN

CRITICAL CONVERSATIONS (See back of name badge for your assigned session and location.)

LUNCHEON

BOLD IDEAS FOR EDUCATION: 8 FOR 8Location: Askwith Hall/Live stream in Larsen Halland Gutman Conference Center

COMMUNITY CELEBRATION with President Drew Faust, Dean James E. Ryan, Yo-Yo Ma, and other special guests

Block Party on Appian WayMusical guest: Familiarrevolution with Janelle Bechdol, Ed.M.’14

8:00 a.m.

9:00–10:15 a.m.

10:30–11:45 a.m.

12:00–1:30 p.m.

1:45–3 p.m.

3:15–4:45 p.m.

4:45–6:15 p.m.

LARSEN HALL SESSIONS

CRITICAL CONVERSATIONS

From Asia to the Americas: Global Education in the 21st Century(Larsen G08)

BOLD IDEAS FOR EDUCATION: 8 FOR 8 (Live stream locations 106 and G08)

10:30 a.m.

1:45 p.m.

mailto:[email protected]


one of the best ways that we can communicate the strengths and impact of an HGse education is through our written content on the Web and in print. We rely on every member of the HGse community to help tell the HGse story. Why is an HGse education so transformative? What are the unique advantages of the Harvard experience? What makes Cambridge and boston such an ideal place to be a student? every time you write a blog post, news story, program description, or alumni profile for the HGse website, you add a chapter to this story.

the following editorial guidelines help us tell HGse’s story online in a clear, cohesive, and compelling voice. our writing style is based on research into the way we read. by following these guidelines, we will more effectively engage with prospective students, research collaborators, and community partners.

WritinG For tHe Web

web vs. Print

When writing for the Web, we first need to understand how we read online vs. in print. When reading in print, we’re more likely to read each individual word and finish long passages. on the Web, we’re scanners. our eyes dart around the page scanning for information: bold headers, links, photos, and select keywords. We are much less likely to read long chunks of text in a web browser, and not at all on a mobile device.

write like a Scanner

there’s an inverse law to writing for the Web: the more you write, the less anyone is to read it. avoid large blocks of text at all costs. instead, break information down into short sections with bold subheads. subheads are like titles for each section of the page. use subheads as a hook to catch the reader’s eye as she scans for key information. once you have her attention, you have three to four sentences (100 words, maximum) to keep it. tell your story quickly, clearly, and creatively, and provide embedded links to learn more.

HoW We talk about HGse

excitement is infectious. When we talk about HGse programs and people, we should share our genuine excitement and invite readers to experience the HGse difference for themselves. Harvard is a prestigious university, but that doesn’t mean that our writing is stuffy and formal. avoid academic jargon and use specific examples as much as possible. employ direct address — “you” instead of “students” — to engage the reader as part of the story.

WronG style: “the mind, brain, and education m.ed. program provides students with an interdisciplinary study of the biological and cognitive processes related to educational policy and practice.”

riGHt style: “in the mind, brain, and education program, you will learn how to address some of the fundamental questions of education — how do we learn, and what can we do to improve outcomes for all learners? — using the latest scientific insights from biology and cognitive science.”

HGSE Editorial Guidelines


The Lede: who, what, when, where, How, why

Important Supporting details

Minor details

inverted Pyramid

in journalism, reporters generally follow the inverted pyramid rule when writing a news story. start with the most important information, called the lede, and fill in the rest of the story, with increasing detail, in the paragraphs that follow. a webpage should read the same way. a reader should know exactly what the page is about by quickly scanning the page title, header, and first couple of sentences. if the subject interests them, they will dig deeper, scan subheads, and click on links.

Page Title and Header

the page title is the very first thing the reader will see. page titles should be short and clear. unless you’re writing a news story or blog post, stick to the facts and keep the title to five words or fewer. the header, on the other hand, is your first chance to really tell your story. the header is like the subtitle of a book. in 30 words or less, make a compelling case for reading the rest of the page.

WronG Header: “technology, innovation, and education is a yearlong master’s program at the Harvard Graduate school of education.”

riGHt Header: “in the technology, innovation, and education program, you will design creative solutions to meet the greatest challenges in teaching and learning.”

Embedded links

Web readers are mostly scanning for links. We go to the Web to quickly find information, and links offer a fast way to “dig down” to the details. embedded links are text links embedded in the natural flow of a sentence. by embedding a link, you increase the odds that the reader will actually read the surrounding text. you can also include adjectives and other descriptors in the link text that help to tell your story.

WronG Way: “Click here for a list of our master’s programs and doctoral programs.”

riGHt Way: “We offer 13 master’s programs and two doctoral programs that will prepare you to make an impact in every facet of education.”

WronG Way: “HGse was founded in 1920. learn more about our history as a leader in education research, policy, and practice.”

riGHt Way: “Founded in 1920, HGse is one of the nation’s top education schools within one of the world’s best universities.”


multiple Points of Entry

not all web readers scan the same page in the same way. some readers focus on the menus along the left and top of the page. others scan the body of the page for subheads, links, and bulleted lists. don’t be afraid to link to the same information in multiple places. if the information is important enough, you want to make sure that the reader can easily find it in several different places.

Tone & voice

in writing, tone and voice describe the “attitude” of a writer toward the subject and the reader. avoid using a formal, detached, or overly academic voice when writing for the Web. instead, convey a genuine excitement about the subject; talk to the reader directly using clear and compelling language; and invite the reader to learn more. Here are some useful tips:

use direct address – third-person construction can come across as too formal online.

WronG Way: students in the tie program can create their own Web apps.

riGHt Way: in the tie program, you can create your own Web apps.

use active voice – in web copy, active voice is clearer and more engaging than passive voice. by combining direct address with active voice, you draw the reader into the conversation.

use calls to action – reading a website is only the beginning of the conversation. at the end of each page, include calls to action that encourage readers to contact HGse, talk to an admissions counselor, read more stories of impact, visit campus, and more.


With a few exceptions, HGse adheres to ap style in all publications, both print and online. you can purchase hard copies of The Associated Press Stylebook at the Harvard Coop or download online and mobile versions at apstylebook.com.

the following entries cover some of the most common style rules for writing about HGse and its programs:

• Capitalization

• degrees and schools

• Frequently used terms

• Geographical locations

• numbers

• people and Job titles

• publications

• punctuation

• time and seasons

• Web and email addresses

Capitalization

course names: use title caps on course names without italics or quotation marks.

• Bridget Terry Long teaches The Economics of Colleges and universities.

fellow or scholar: Capitalize only if it’s part of the official name.

• Reynolds Fellow

• Urban Scholar

• He is a fellow at the Gates Foundation.

Programs: Capitalize the names of programs, including the word “program.” Do not capitalize “program” when used alone.

• Technology, Innovation, and education program

• Mind, Brain, and Education Program

• Students applying to the program should turn in applications by may 15.

Title case: Capitalize all words except prepositions of five or fewer letters, conjunctions, and articles.

• Duck in the Truck

university and school: Do not capitalize the words “school” or “university” when used alone, not as part of an official name.

• The university announced today that ROTC would be returning to campus in september.

deGrees and sCHools

degrees: always use periods with degrees.

• Ed.M.

• Ed.D.

• Ed.L.D.

Programs: programs do not use periods.

• HDP

• MBE

• TIE

HGSE Editorial Style Guide


School name: spell out the full name of the school the first time it is used; the acronym can be used on subsequent uses. periods should not be used. (“ed school” may also be used in second and following instances. it should be capitalized.)

• Each fall the Harvard Graduate School of education hosts a career fair that includes national and international education organizations. HGSE students find the fair provides an excellent start for their job searches. [or: ed school students find the fair provides an excellent start for their job searches.]

universities with multiple campuses: Write out full name of the school. use an en dash prior to the campus site.

• Example: University of Texas–Austin.

Frequently used terms

afterschool (when used as an adjective)

catalog

childcare

coauthor

cochair

codirector

cowriter

decisionmaking

decisionmaker

education policy

english language learners

first-year program

high school

high school student

master’s student

middle school

nation-building

nonprofit

nonviolent

policymaker

postdoctoral

preschool

schoolwide

third-grade teacher

third-graders

two-year-old child

university-wide

yearlong


GeoGrapHiC loCations

atlanta

baltimore

boston

Chicago

Cincinnati

Cleveland

dallas

denver

detroit

Honolulu

Houston

indianapolis

las vegas

los angeles

miami

milwaukee

minneapolis

new orleans

new york

oklahoma City

philadelphia

phoenix

pittsburgh

st. louis

salt lake City

san antonio

san diego

san Francisco

seattle

Washington

the major cities listed above (as defined by The Associated Press Stylebook) do not need to be followed by the name of the states.

all other domestic cities and towns need to include state names.

• He visited Boston on his way to Waterbury, Connecticut.

avoid using two-letter post office abbreviations for states, except when referring to a political party.

• The statue is in Concord, Massachusetts. senator ted kennedy (d-ma) helped provide the funding.

School districts: Capitalize all words if you are using the official name of the entity. otherwise, all are lowercase except the city name.

• Boston Public Schools, San Diego Unified school district

• San Diego public schools, public schools in boston

united States: do not abbreviate when used as a noun. it is acceptable to abbreviate as part of a name or an adjective. use periods in text; do not use periods in a headline.

• He lives in the United States.

• She works for the U.S. Department of Energy.

• He is a U.S. citizen.

• US Senator to Speak on Education Reform


numbers

range of numbers: en dashes, rather than hyphens, should be used to indicate a range of numbers.

• 1960–66

• Pages 149–50

• $1,300–$1,800

figures or words: spell out numbers under 10. use figures for 10 and higher. Follow these rules, even when a sentence contains both types.

• She is taking four classes.

• She also works 35 hours a week.

• He has five cats and 13 rabbits.

Exceptions: Dollar figures ($2 million), percentages (8 percent), page numbers (page 48), addresses (1 appian Way), time (8 p.m.), numbers between one thousand and ten thousand that can be expressed in terms of hundreds (He wrote an essay of fifteen hundred words. she wrote an essay of 1,432 words).

ordinals: do not use superscript for nd, th, or st.

• 31st, 42nd

Starting sentences: spell out numbers at the beginning of a sentence.

• Thirty-five people attended the seminar.

Plurals: Form plurals of acronyms by adding an “s”; do not use an apostrophe.

• MBAs

• PTAs

• YMCAs

people and Job titles

alphabetization of non-married names and hyphenated last names: Always alphabetize by the first letter of the last name. if a person uses a non-married name and her married name without hyphenating, alphabetize by the name that comes last. a hyphenated last name is treated as one element and is alphabetized by the first letter of the first word in the pair. the following list is in correct alphabetical order:

• Mary James, Susan Moore Johnson, John klein, ellen Condliffe lagemann, ann marshall, Jane moore-Johnson

capitalization: as a general rule, if the title comes before the name, the title should be capitalized. If the title follows the name, it should be lowercase. in letters and lists, a title can be capitalized even when it follows the name.

• Dean James Ryan visited the KIPP school last week.

• James Ryan, dean of the Harvard Graduate school of education, visited the kipp school last week.

courtesy titles: do not use mr., mrs., or other courtesy titles unless part of a formal name.

• We went to Mr. Tux to get clothing for the prom.

dean james ryan: James ryan is referred to as dean James ryan, unless in the signature of a letter, in which case he is referred to as James ryan, dean of the Faculty of education.

degrees: list after people’s names with no space between the last period and the apostrophe. For more than one degree, list in ascending date order and separate by commas. use only HGse degrees; non-HsGe degrees can be used in lists, however.

• John Doe, Ed.M.’02, Ed.L.D.’14


publiCations

Books, journals, magazines, movies, software, collections of poems, long poems, plays, operas and major musical compositions, paintings, and other artworks should be italicized. Only capitalize and italicize “the” or “magazine” if that is how the publication uses it. (the masthead will provide this information.)

• The New York Times

• Gone with the Wind

• Newsweek

• the Boston Herald

• the Mona Lisa

• Har vard Ed. Magazine

punCtuation

commas: always use the serial, or oxford comma.

• The American flag is red, white, and blue.

En dash and em dash:

• For instructions on how to make an en dash or em dash, see http://support.microsoft.com/kb/76985.

Percent: percent should be spelled out; the percentage symbol should only be used in lists.

• Mitt Romney received 47.2 percent of the popular vote in the 2012 presidential election.

• 2012 presidential election results:

• Barack Obama: 51.06%

• Mitt Romney: 47.2%

Periods: there should only be a single space after periods.

Possessive: singular proper names ending with “s” are made possessive by adding an apostrophe.

• Katherine Boles’ op-ed was about the profession of teaching.

quotation marks: quotation marks should always be outside other punctuation, with the exception of question marks, dashes, semicolons, and exclamation marks that are not part of the quotation.

• He said he was “going to Longfellow Hall.”

• Did he say, “I am going to Longellow Hall”?

doctor: do not use “dr.” for academic or medical doctors.

• Jane Doe, a pediatrician at Mount Auburn Hospital, visited the school in June.

Emeriti faculty: include a comma before the word “emerita” or “emeriti.”

• Courtney Cazden, professor of education, emerita

Endowed professorships: endowed professorship titles are not used in narrative settings (with the exception of specific development communications).

• professor Howard Gardner has a new book coming out in may.

middle initials: only include if the person’s name commonly includes the initial.

• Michael Rodman

• Michael J. Fox

names: refer to people by their full names on first mention and by last name after that.

• John Doe, Ed.D.’82, is a professor of education. doe teaches educational history and policy.

http://support.microsoft.com/


times and seasons

Seasons: Do not capitalize names of seasons unless part of a formal title.

• He will graduate in summer 2005 and start work in the fall.

• In September, we will attend the Fall Harvest Festival in Wellesley.

Time: do not use 12:00; use either noon or midnight. Do not use double zeros for any time. When using a.m. and p.m., use lowercase and include periods. if indicating a range of time, do not use a.m. or p.m. after the first time unless it is different than the following time. use an en dash to indicate time range.

• He arrived at noon. Class starts at 8 a.m.

• The meeting is from 1 –3:30 p.m.

•The meeting is from 11 a.m.–1:30 p.m.

Web and email addresses

Email: spell email with a lowercase “e,” except at the beginning of a sentence. do not use a hyphen.

Print: Write email addresses in lowercase and italicize. Do not use hyphens to break email addresses.

• Her email address is [email protected] vard.edu.

web: Write email addresses in lowercase and link to the address, but do not italicize. do not use hyphens to break email addresses.

• Her email address is [email protected].

urls: urls are typically all lowercase; it is not necessary to include “http://” or “www” when writing a url as part of a text. only use “www” if it is necessary. (some sites require the leading “www.”) A URL should be italicized in text.

• She wrote an op-ed that appeared on cnn.com.

online: use “online,” not “on-line” or “on line.”

website: Website is one word and is lowercase unless used at the beginning of a sentence.




Web content managers or editors translate HGse’s messages on gse.har vard.edu. the primary goal for a content editor should be to create a positive, easy-to-read, and accessible experience for visitors to our site. With this in mind, content editors must follow a number of general writing and style guidelines.

CHoosinG your template

the HGse website, gse.har vard.edu, has a number of templates designed and ready for content. these templates will help you display your messages “on brand” and will give visitors a consistent experience as they move across our site. you will always use one of the following templates and should not display content outside of prescribed brand templates.

universal Page

ontent editors will use this page more than any other page in the template suite. it is the workhorse template and offers ultimate flexibility for an editor. editors have the ability to style headings, provide in-line images, set teaser text, offer a pull-out quote, display data in tables, create unordered and ordered lists, and

more. use this page for content detail pages, when a visitor has already filtered through the navigation and wants to collect information on a specific topic.

news/feature Story Page

this page includes all of the controls and features of the universal page. additionally, it displays story author and date information for readers. the news/feature story page also allows comments, powered by Facebook, on your story.

academic/landing Page

the most common use for this page in the HGse site is for master’s and doctoral academic program descriptions. it offers visitors a content well for overview information and an accordion structure for deeper-level information. you can also use this template as a landing or routing page in some instances.

faculty Profile Page

similar to the academic/landing page, this page first offers overview content and then provides detailed information via accordion. the Faculty profile page also includes name, title, and contact information fields.

the following pages exist in the HGse template suite, but are only used once in the site design and will not be available for general content editor use:

• Home Page

• PPE Landing Page

• News Page

• Topic Page

• Library Page

some HGse supported sites, such as Harvard Ed. Magazine and Usable Knowledge, have templates unique to their web properties. those templates are not included in the above list.

web Content Management


stylinG your Content

name your page.

do not leave pages with generic names such as, “index” or “story template,” but give each page you create a clear and concise name, such as “Student Clubs and Organizations.”

Employ headers.

visitors to your page will quickly scan to understand if their desired information is included. Headers help readers quickly digest contents and make decisions about which actions to take next. use the <h1> tag for the first heading of the page. subheadings should follow as needed: <h2>, <h3>, <h4>, etc. do not link your heading text; rather, link the appropriate body copy text below the heading. your headings should be short and to the point, with the related text immediately following.

contextualize links.

you should link words and phrases from your content. using phrases such as “click here” or “follow this link” confuse HGse visitors who are scanning the page and are difficult for screen readers to understand.

title lists of links to best describe the content, such as “other student resources.” if your link directs to a non-Html file, such as a pdF or Word document, indicate that to the visitor by including (pdF) or (.doc) immediately after the link.

Generate attention.

You may want to emphasize a point, a date, or an action item for visitors. rather than using capitalization, we recommend employing WysiWyG styles, such as italics, bold, and call-out quotes appropriately and only as needed. underlining should not be used, as this traditionally signals a hyperlink and will confuse visitors. a style used to generate attention should only be used once or twice on a page of content, otherwise its importance is diluted.


use the styles available in the wySiwyG.

We selected styles available in WysiWyG to match our brand and identity. please do not use HTML/CSS to change the font, font size, font color, or text alignment. if you wish to create a table or display data, use the table or accordion styles available to you in the WysiWyG. do not create your own styles for data displays.

remember that HGSE sites are responsive to visitors’ browsers and devices.

this means the text and images will adjust to different viewpoints automatically. adding extra spaces or paragraphs to hack or force a visual layout may cause a page to look broken or

corrupt for some users.

makinG Content aCCessible

images

always include alt tags with your uploaded images. these alt tags should succinctly describe the image. these will help visitors using screen readers to navigate the page.

Pdfs

information should be displayed in Html/Css (in a webpage format) as often as possible. avoid using pdFs, as they create another task layer for visitors. When pdFs are necessary, they should be produced and reviewed in official pdF software to ensure they are accessible to screen readers. accessible pdFs have searchable text, interactive form fields, no time limits, headings to indicate reading order, and alt text for non-text artifacts.

multimedia

Content such as video and audio should be accessible to those who cannot hear, those who cannot see, and perhaps, those who do not use english as their primary language. videos on the website should include captions that appear in-line with the video and that are equivalent to the content in the video. transcripts that describe what was said and what was shown are also important for those that cannot access web audio or video content. Finally, audio descriptions help those with visual disabilities understand the actions on the screen.

TemplatesHarvard Graduate School of Education: brand and visual identity Guidelines

Templates


the careerminute

Email Templates




Preparing Leaders To Educate the World


Lorem Ipsum


Pudiorrum eturiam repro dem quid magnient, sam facim ab is mus re, seque consed utes pa quiditio exersperio cus molorio.

• Uptatur sit ario molo tem ea aut ipsaerf eriberes quae nonsedia sum eturestincto conecum ea se ditisto.

• Udiores equistota sed quaestiur, quia il ilitatia sum nat restem facit, eium quosae derovid quo doloriasit laborroatem ducidem nimilignis sinisit quat.

presentations should obey all preceding rules regarding image selection, logo usage, and brand messaging.

When using presentation templates, resist the temptation to reduce text size or use autofit functionality. large type is easier to parse, especially in large rooms. ideally, a slide’s text should only support the verbal point being made. the less text on a slide, the better. one rule of thumb regarding type size in presentations is to estimate the age of your oldest audience member and use a point size half of that. Seventy-year-old professor in attendance? use 35 pt.

technologist and entrepreneur Guy kawasaki suggests following the 10/20/30 rule: a presentation should be no longer than 10 slides, should last no more than 20 minutes, and the font size should be at least 30 pt. that’s not always possible, but the point stands: type size should not be adjusted below a certain threshold.

Presentations


frequently Asked questions

Harvard Graduate School of Education: brand and visual identity Guidelines

if you do not find what you are looking for in this manual, please do not hesitate to contact HGse Communications & marketing with your questions.

WHat does a brand identity Guide do?

a brand and visual identity guide shares top-level messages and a recognized visual identity to an internal team of communicators. For HGse, this book builds on some well-established brand and identity guidelines and also formalizes some of the newer work done by Communications & marketing, dean James ryan, and the leadership team. the HGse brand and visual identity Guide helps HGse faculty and staff quickly understand the most effective way to communicate a message in print or on the web.

WHy does HavinG an inteGrated brand imaGe matter?

Following brand and visual identity guidelines ensures that diverse audiences have a consistent experience in their many interactions with HGse. repeated consistent interactions with a consistent HGse brand will reinforce key HGse messages and priorities. additionally, they help HGse send the right message to the right individual at the right time, increasing our chances for a successful interaction.

HoW Will tHis aFFeCt my proGram/department/initiative/etC.?

most of the brand and visual identity guide will feel familiar, as it represents years of hard work on the part of many individuals. some of the newer, formalized brand and visual identity guidelines will require you to consult with Communications & marketing and make minor changes in your messaging or imagery. the changes your team makes will help audiences recognize us as one HGSE.

Can my proGram/department/initiative/etC. develop our oWn symbols, iCons, imaGes, type treatments, Word marks, or loGos?

the overall objective is to create a consistent look so that all visuals appear familial and appropriate. more often than not, your team or group will need to use an item from the already established visual system. if, after reviewing the brand and visual identity guide, your team identifies a need for a visual item not yet addressed, please contact Communications & marketing.

Frequently asked questions

fAqs

Harvard Graduate School of Education: brand and visual identity Guidelines

HoW Can i CommuniCate tHat my proGram/department/initiative/etC. is a unique Group WitHin HGse?

Audiences should recognize HGSE as one brand. aligning with that brand will help individuals to recognize, understand, and interact with your group better. being part of the HGse brand is a distinguishing feature in and of itself.

to further differentiate your group, provide compelling, clear, and actionable content for appropriate audiences. it is also important that key stakeholders respond quickly and positively to audiences; it is very difficult to recover from a negative brand association.

my unit Has speCial CirCumstanCes tHat Warrant additional Consideration. WHo sHould i ContaCt?

it is impossible for a single set of guidelines to cover all circumstances. if you have questions or wish to discuss any special circumstances that your unit may encounter, please contact us.

ContaCt uscommunications & marketing 13 appian Way, longfellow Hall [email protected] vard.edu

617-496-5037

Frequently asked questions



“no one else, no otHer institution, Has tHe privileGe and opportunity

to simultaneously prepare tHe most talented leaders and innovators

Here and abroad, address tHe most pressinG questions in eduCation,

and Work as a trusted partner WitH tHe most inFluential individuals and

orGanizations aCross tHe Globe.”— dean James ryan

Business

Exemple de charte graphique : Harvard