Interactive Guidelines

| Table of Contents

Overview 34 Detailed Site Samples

3 Introduction 35 Master Brand Sites: MetLife.com and NEF.com
4 Brand Positioning 50 Secondary Sites: MetDental and the MetLife intranet
5 Style and Corporate Identity 55 Internal/Functional Sites
6 Design Principles
7 Usability and Accessibility
8 Content
11 Technology Requirements

12 Information Design
13 Site Types
14 Navigation
15 Promotional Content
16 Layout
17 Levels

19 Graphic Design
20 Introduction
21 Logo and Snoopy
23 Color
26 Type
28 Navigation
30 Imagery
31 Information Graphics
32 Animation and Video
33 Promos and Banners

1
Overview
 Overview | Introduction

Introduction In our mission “to build financial freedom for

everyone,” the Web offers us an unprecedented
every person who visits our site, we will make
sure that financial freedom starts right here.
The site concept: chance to empower our customers. We can
deliver information, insights and tools that give About the guide: This guide has been developed
Financial freedom people control over their own experience and as part of the Metlife brand management
their own future. And isn’t that what freedom is program. Its goal is to make the process of
starts here. all about? No other medium can provide this kind creating and producing content on the MetLife
of rich, flexible, individual experience. websites as streamlined and effective as possible.
Of course, a site is in some sense a living thing,
We all know how fraught financial decision- one that grows and evolves, and so this guide will
making can be. People worry they’re not doing also change and adapt over time. So if you have
enough, or not doing the right things. They fear any questions or need a fuller explanation of
they don’t know enough, yet can be timid about anything discussed here, visit the MetLife Brand
asking “stupid questions.” Online, our customers Center at brandcenter.metlife.com and click on
can gather information on their schedules, on the “Help” tab.
their terms. They can use tools that embody our
expertise, without feeling pressured or shy about
a face-to-face encounter. They can execute a
specific task, or just play. By offering this variety
of experiences, with no appointment necessary
and no need to be self-conscious, our site offers a
powerful personal interaction with our
customers.

So our mission is to ensure that customers who

visit us online feel as if they are engaging in a
dialog with real people, people who will answer
any question, assist with any need, indulge any
quirk, and guide them towards their goals, with
honesty, clarity, and humanity. Because whether
it’s a prospective customer trying to get a feel for
what we offer or a lifelong MetLife policyholder
who wants a better way to manage a claim, for

3
 Overview | Brand Positioning

metlife.com
Making the MetLife brand come alive on the Web
demands an engaging online experience. Each of
us, in developing online content, must recognize
the opportunity to make a personal connection
with our customers. The idea that because this
isn’t a face-to-face interaction it is somehow
impersonal is a serious misperception that does a
disservice to both our customers and our
company. Remember, one of the main reasons
customers choose to use the Web is that they feel
less inhibited online. So we need to reinforce that
feeling, empowering them and making them
comfortable while providing the information and
tools they seek.

Think of the online experience as a conversation

between the customer and MetLife. Through
language, imagery, and technology, our goal is to
make that conversation engaging, productive,
and enjoyable. The MetLife websites, along with
all other electronic media, will serve as a
welcoming living room, a comfortable place for
this conversation to take place. Information
should be accessible. Tools should be powerful,
yet easy to use. Ideas and insights should bubble
up from the pages.

When we develop content with those goals in

mind, we will create a place that deepens and
enriches our relationship with our customers.
They’ll be glad they paid us a visit. And they’ll
know we’re glad they came.

4
Overview | Style and Corporate Identity

Corporate identity – consistency of visual

elements, written language, and user experience
in all marketing communications, from websites
to banners to advertising and beyond – is a key
element in the overall positioning of a successful
brand. The MetLife brand is built around a set
of core attributes that inform everything we do.
To learn more about these attributes, please
refer to the MetLife Brand Center at
http://brandcenter.metlife.com.

When we talk about style, we’re talking about

all the choices we make in creating content.
From choosing a color to deciding on
punctuation, all these choices add up to a
feeling we evoke in the visitors to our sites. In
this guide, you’ll find detailed information to
help you make the right choices – so the content
you develop will be clear, appealing, and an
embodiment of the MetLife brand.

5
Overview | Design Principles

In creating online content, consistency and

fidelity to the MetLife brand should always be
the guiding principles for design decisions.
When in doubt, look to the brand. In concrete
terms, this means that many questions can be
answered simply by looking at MetLife.com.
Since it is the premier online expression of our
brand, you will rarely go far wrong by following
its example. Of course, there may be times when
your site’s audience or function or other
requirements mean you’ll want to consider
slight variations from the MetLife.com approach.
So in section II of this guide we’ll detail three
types of sites, and how the guidelines apply to
each: what can change, what can’t, and why.
Once you identify which of the three types of
sites you’re creating, you’ll find guidelines
specific to the needs you’re likely to have.

6
 Overview
As a brand committed to leadership in the
industry, the MetLife websites must be designed
for the highest-quality user experience. The
caliber of your content and the way it is
presented reflect on all of us. The information
architecture of the MetLife sites we use as
examples later in this guide should help you
structure your content. The writing guidelines in
the next section should help you decide what to
say and how to say it. And finally, it is important
that all MetLife sites are accessible to everyone,
throughout the world. Keep these accessibility
principles in mind:
• Make sure your site is Americans with
Disabilities Act (ADA) compliant. Not sure?
Here’s a place to start:
http://www.rit.edu/~easi/las/weblaw1.htm
• Design for multiple browsers and platforms:
At the very least you should test your sites
on, for Windows, versions 4 and higher of
Internet Explorer and Netscape, as well as
AOL; and for Mac, Internet Explorer versions
5 and higher, as well as Safari. And the
growing popularity of Firefox means you
should test with it as well.
• Design for multiple platforms.
• Design for multiple screen sizes. Not just
800 x 600, but also 1024 x 768.
• Minimize download times by minimizing file
size. And remember, that includes images
and attachments.
| Usability and Accessibility
• Avoid nonstandard technologies and plugins,
such as Shockwave or Quicktime,
that may prevent users from receiving
content.
• Avoid frames, which complicate navigation,
measurement, tracking, and search.
• Avoid small fonts which may be hard to read.
Body copy should be no smaller than 11
points; legal copy should be no smaller than
9 points.
• Consider translation issues. Double-byte and
right-to-left languages create special
needs.
• Provide a link to download Adobe Acrobat if
providing a pdf download, and always flag
the size of a download so users on slower
connections can make an informed choice
before downloading.
• Avoid pop-ups whenever possible. Not only
do users find them annoying, but the
many pop-up blocking technologies out
there mean that depending on them for
content or functionality is a gamble.
7

Visual identity is just one component of successfully
communicating the MetLife brand. After all, we build
websites to provide content, and that content
resides, fundamentally, in the written word. Whether
someone is just considering becoming a MetLife
customer or has a long and deep relationship with
us, we must provide them everything they’re looking
for, and more, through clear, informative, accessible
writing. And beyond that, our writing must reinforce
the MetLife brand, by being human, friendly, and
smart.
This section of the style guide is intended to ensure
that all our online content reinforces our brand
intent, delivering on the promise that “MetLife will
be known the world over for empowering people to
feel protected, guided, and hopeful about their
lives.”
MetLife’s history spans over 135 years, but we don’t
want to sound dated or old-fashioned, because we
want our customers to know we understand the way
they live now. And even though we are a big
company, we should never be bureaucratic – our
voice should represent who we are as people: proud
and passionate about what we can do for our
customers.
All writing for MetLife should share certain qualities.
It should be:
• Human and empathic
• Friendly and approachable (even funny, where
appropriate)
• Informal and conversational
Overview
• Contemporary and relevant
• Smart and informative
• Concise and well-organized
• Trustworthy and simple to understand
A good way to test copy is to read it aloud. Does it
flow easily as you speak it? It should if it is friendly,
informal, and informative. Does it give you a sense of
satisfaction? It should if it is smart, simple, and well-
organized.
The goal is simple: to present clear, relevant
information that will help the customer or prospect
to make informed and sound decisions, in a way that
feels contemporary, makes the customer
comfortable, and inspires trust.
Keep the core MetLife brand values in mind when
writing in the MetLife voice. They reflect our heritage
and convey the philosophy that governs our
relationships with one another and with our
customers, and can be a great resource in helping
you to frame your thoughts.
A Web style of writing: Even more than other
types of writing, Web writing demands sharpness,
clarity and conciseness. Here are a few points to
guide you.
• Make the first screen count. Always present the
most important points right up front; we only
have a few seconds to capture the customer’s
attention. So that first screen needs to inform,
engage and inspire.
| Content
• Make it short and sweet. Reading from a
computer screen is 25 percent slower than
reading from a printed page. Using 50 percent
fewer words will make users more comfortable.
When adapting printed materials for the Web,
cut superfluous copy.
• Make it move. Use the active voice to propel
sentences forward. This will help keep the reader
interested. Notice the different feel between
these two sentences: “The ending of the movie is
sad, so Sue is crying.” “The movie’s ending
devastates Sue; she sobs at its tragic beauty.”
Strong, active verbs bring writing alive.
• Make it self-sufficient. Because of the non-linear
nature of the Web, users may not see pages in
the order you expect. So make sure every page
works independently and is self-explanatory. A
Web page should never begin with
“Therefore…” because your reader will have no
idea what you are referring to!
• Make it flow. Because of the immense volume of
information online, your readers need you to
guide them. Lead the way through the important
information, include hyperlinks to secondary
information, and, where appropriate, offer
contact information. Take advantage of Web
design elements like linking and insets to
break up large amounts of information.
• Make it current. Avoid labeling a page “coming
soon.” If you must include material that is under
construction, provide a specific date when the
page will be complete or the content available.
Then, of course, honor the commitment.
8

• Make it interesting. Always focus on the reader.
Content should be user-oriented, meaningful,
and benefit-focused.
• Make it human. Use your voice, not that of a
large, impersonal organization. Use English, not
jargon. Say “happens,” not “transpires,” and
“you,” not “policy holders.”
Scannability: A study by Web usability experts
Jakob Nielsen and John Morkes revealed that 79
percent of users scan the page, picking out individual
words and sentences. So it’s important to write
content with that in mind. Break up your thoughts
and ideas and structure them in logical chunks.
Make your writing understandable at a glance, by
breaking it up into easy-to-digest “morsels,” using
subheads, bullet points, lists, captions, and
hyperlinks.
Simple sentences: Use simple rather than
compound or complex sentences whenever possible.
The longer the sentence becomes, the less
“scannable” it is, and the more difficult it is to read
on a screen.
Know your audience: Remember, a crucial part of
the MetLife brand vision is that we want “to build
financial freedom for everyone.” That universality is
an important differentiator for us. Whether we’re
speaking to a consumer or a corporate human
resources manager, the MetLife voice applies. On the
other hand, we are speaking to one person at a
time, so tailor your message and tone so that each
person feels like you understand their needs.
Overview | Content
Emphasize key points: Words and phrases that are headlines and subheads should be brief. Don’t crowd
critical to the information being presented can be your headline with multiple thoughts; you will only
emphasized using bold or italic type. However, these inspire your reader to ignore it the more you try to
devices should be used very sparingly. Too many say, the less you actually will. A good headline is
emphasized points confuses the reader and actually ruthlessly concise. Rely on subheads to expand your
makes nothing stand out. Do not use underlining for thought when necessary, and trust that an engaging
emphasis; underlining should be reserved for links. headline will entice your reader to keep reading, so
that you can communicate everything you hope to
say.
Bullet points:
• Use bullet points for lists of three items or more.
Avoid punctuation in headlines and subheads, and
• Keep bullet copy brief. Items longer than three
only capitalize the first word and proper nouns.
lines begin to look too heavy and undermine the
Using initial caps throughout the headline looks
effectiveness of using bullet points in the first
dated.
place.
• Capitalize the first letter of the first word for
each point, whether it is a phrase or a complete Common mistakes: Writing for the Web is only
sentence. about six years old, so we’re all still learning. Here
• Avoid mixing phrases and complete sentences in are some common mistakes to avoid.
the same bulleted list. Choose one or the other.
• Rambling. Make sure you’re not writing text that
Use periods at the end of bullet statements
is unnecessarily long. Make sure you break up
unless they are something as short as a list of
your thoughts into digestible morsels. Edit
names.
ruthlessly. Brevity is the soul of Web content.
• Use one verb tense consistently throughout, and
• Lack of structure. It’s essential to set up an
use active verbs whenever possible.
organizational structure for your material at the
• Do not use “and” or “or” before the last item in
start of the project. Not only will this help you
the bulleted list, as this makes the list visually
break up your thoughts into morsels in a logical
confusing.
way, it will also help you keep your site current
by making it easier to make changes and
Headlines and subheads: A headline should
updates.
convey the category or the key point and the most
powerful benefit. Paired with a clear, explanatory
subhead, the headline engages the customer and
attracts interest to the content on that page. Both
9

• Page proliferation. Often sites force users to
wade through layers of unnecessary pages or
take extra steps to accomplish their goals. Make
sure your site is built around the customer’s
experience, not your own internal business model
or an old prose document. Think of each step
your user will take, and make it as efficient as
possible.
• Sloppiness. Unfortunately, many people assume
that because the Web is informal, poor grammar
is acceptable. This is simply not the case. Bad
grammar and spelling undermine the profes-
sionalism and trust of the MetLife brand and are
simply unacceptable. Check your grammar and
spelling. Always.
Style and usage
Capitalization: In headlines and subheads, the first
word should be capitalized, along with any proper
nouns. In labels, such as “Your Products and
Services,” each word should have an initial cap,
except for conjunctions and prepositions such as
“and” or “of.” Any time a complete sentence is
used, only the first word and subsequent proper
nouns should be capitalized.
Hyphenation, single, and double words: This can be
tricky, so here are a couple of examples of common
instances of confusion.
• “E-mail” is hyphenated, and does not need to be
capitalized (except at the beginning of a
sentence).
• “Online” is one word.
Overview | Content
• “Download” is one word. MetLife proprietary usage
• The “Web” is capitalized, but “website” should Financial services, and insurance in particular, are
not be (and “website” is one word). highly regulated businesses both in the United States
and internationally. Please consult the MetLife
Numbers: Please follow AP style Brand Center for information about legal
requirements, and remember that all materials must
• Spell out whole numbers below 10, use numerals
be submitted for legal review before they are
for 10 and above. However, if necessary for
released.
emphasis in a headline, numerals may be used
for numbers less than 10.
• Spell out any number that appears at the
beginning of a sentence.
• Spell out “first” through “ninth” when they
indicate sequence in time or location, e.g., first
base, First Amendment, first in line.
• Always spell out “percent,” rather than using the
% symbol, in body copy. In charts and graphics,
the symbol may be used.
Phone numbers: Telephone numbers should always
be formatted as follows: 1-800-123-4567.
Punctuation: Since headlines and subheads may or
may not be complete sentences, for consistency
periods should not be used. Elsewhere, periods
should be used at the end of all complete sentences.
Avoid exclamation points and ellipses (…), as they
are relatively unsophisticated punctuation and
suggest sloppiness to many readers.
10
 Overview | Technology Requirements

This section provides information about browser cannot call external files.
support, use of Flash, file formats, file sizes, and
other technical requirements. File Formats:

Browser Support: Pages must be coded to File type: Extension:

support version 4.0+ of Internet Explorer, HTML .html, .htm
Netscape, and AOL for Windows, and Internet GIF .gif
Explorer 5.0+ and Safari for Mac. You should JPEG .jpg
test on Firefox as well. For the MyBenefits PDF .pdf
employee portal, the requirements differ ASP .asp
slightly: Netscape Navigator 4.72 through 4.77, JSP .jsp, .jhtml
AOL 5.0 and 6.0, Internet Explorer 5.0 for the Cascading Style Sheets .css
Macintosh, and Internet Explorer version 4.01 JavaScript .js
through 5.5. Shockwave Flash .swf
Rich Text .rtf
Flash: Flash usage must be pre-approved by
MetLife project teams, and will be considered File Sizes: The target response time required by
based on value added to the site, with the MetLife Internet applications is 6 seconds. Based
caveat that file sizes must not inhibit download upon this requirement and the ubiquity of 56K
times. If use of Flash is approved, the version modems, the recommended page size is 40K.
used will be Flash 4, which has been included in Pages larger than 40K should be designed to
both Internet Explorer and Netscape since load incrementally in order to provide feedback
version 4.x. Note: There are technical issues that to the user and indicate that the page is actively
arise when Flash is used with the vignette loading.
content management system. Any flash element
used in vignette must exist as a single file; it

11
Information Design

Within Metlife’s online environment, there are three broad types of sites.
Any site you may create should fall into one of these categories.
Master Brand Sites:
This category includes, first and foremost,
MetLife.com. It also includes the online
presences of affiliates like NEF. The main
guidelines for all MetLife properties are derived
from MetLife.com; in section IV you will also
find the differences that arise when designing
for an affiliate.
Information Design
Secondary Sites:
This category includes more transactional sites
that reside either within or as adjuncts to the
master brands, like MetDental, or the MetLife
intranet, MyMetLife. Another example would be
MetLife Advice, which exists within MyBenefits.
To the audience, the look and feel need to be
clearly consistent with the master brands. But
the differences in function and the need to
provide efficient, transactional activity, require
adjustments to the guidelines. These
adjustments are detailed in section IV.
| Site Types
Internal/Functional Sites:
This category includes the sites that are used
within MetLife to help us do our jobs. It includes
anything from online time-reporting
applications to ePay statements. As internal
sites, these properties should take their cues
from the intranet, but with a simpler, more
streamlined approach appropriate
to the functions they provide. None of these
sites have yet been redesigned, so no examples
are given in this guide, but you will find some
general principles to guide development in
section IV.
13
 Information Design | Navigation

Top navigation: MetLife.com All MetLife sites use a tab-based top navigation
scheme as the primary means of organizing
content. While every site will have different
tabs, the leftmost one is always a link back to
the home page. Many sites will also use a left
nav area, and breadcrumbs, to help users
understand where they are and find the
information they need. Below are some
examples. For more information and specs,
please refer to Section IV.

Breadcrumbs: MetLife.com

Left navigation: MetLife.com

14
 Information Design | Promotional Content

Promotional banner areas are an important part of

many MetLife sites. Generally these occur only on
home pages, like the front page of MetLife.com, or
major section home pages, like the first Group
Benefits page, where they can highlight relevant
messaging. Below are some examples. For more
information and specs, please refer to Section IV.

Promo banner area: MetLife.com

Promo banner area: NEF.com

Promo banner area: MetDental.com Promo banner area: Intranet 15

Information Design | Layout

Making sure your content is presented in a clear,

accessible way is one of the main roles of page
layout. MetLife site pages are based on a grid, with
information grouped to facilitate navigation and
flow. Layout should try to adhere to a grid and line
up elements as much as possible. No more than
three columns are permitted. Below are some
examples. For more information and specs, please
refer to Section IV.

16
 Information Design | Levels 0-6

On MetLife.com, there are seven page “levels.”

They range from the main home page to deep,
nested pages. Each level down becomes simpler,
with less likelihood of images and promotional
copy and more functional, streamlined content.
The navigation between the levels is dynamically
generated by the content management system.
Here are some examples:

Level 0 and level 1 page: Metlife.com

17
 Information Design | Levels 0-6

Level 0 and level 1 pages: Intranet Level 0 and level 1 pages: NEF.com Level 0 and level 1 pages: MetDental.com

18
Graphic Design
Graphic Design | Introduction

The design of MetLife online properties has been

carefully planned as an extension of the overall vision
and attributes of the MetLife brand management
program. The information architecture and graphic
organization are designed to serve a worldwide
audience.

The guidelines that follow should be treated as a

template for all online development. It is crucial that
everyone who creates electronic communications for
MetLife maintains consistency, and these guidelines
are designed to make that easy. They have been
crafted to allow for sufficient localized interpretation
without sacrificing overall brand identity.

20
 Graphic Design | Logo and Snoopy

– – – – – – – 137 px – – – – – – – In all MetLife sites other than affiliate sites, the logo

––
appears in the main header. While in offline media,
29 px the Metlife logo has a specific amount of space

––
around it, Online, in the header, the proportion of
the logo size to Snoopy’s size is more important than
leaving the required amount of space below the
logo. Therefore, both the logo and Snoopy are
51 px
bottom-aligned and sized based on fitting Snoopy
11 px
into the header space with the required amount of
space.

MetLife logo specs:

• Size in header: 137 pixels wide x 29 pixels high

• Minimum size on any online page: 50 pixels wide
x 11 pixels high
• Color: Hex code 1065A9 (blue) or reversed out to
white
• Resolution: 72 pixels/inch

For more information about logo usage, consult the

MetLife Brand Center.

21
 Graphic Design | Logo and Snoopy

Snoopy: Snoopy serves as an ambassador for MetLife

and provides a warm, approachable quality that is
important to the MetLife brand and helps differ-
entiate us from other companies.

For more details about general Snoopy usage,

consult the MetLife Brand Center.

Snoopy Guidelines:

• Online, the primary use of Snoopy will be within

the identity band. This new element has been
created to unify the logo and “brand” Snoopy.
• Snoopy’s size is relative to the logo: Snoopy is
Correct pose to be used always twice as tall as the capital M of the logo.
with the Metlife logo • Whenever Snoopy is used, UFS approval is
required, and copyright information must be
Snoopy is always 2x height of the M
provided in a footnote.

22
 Graphic Design | Color

The primary palette for MetLife online properties is
the Light Palette from the general brand guide.
HEX VALUES
Since color is one of the most powerful elements of
the MetLife brand, color use online should be
consistent with color use in other media. However,
there are special considerations that arise because of
the technicalities of computer displays that do
require special consideration.

CC6E00 EBD33E ACB21D 81A9E4 CBDOD3 A184B7

The secondary palette is the Medium Palette from

the general brand guide.

HEX VALUES

A50A37 DAA900 748E16 466CBD 9BA1A5 756492

23
 Graphic Design | Color

The Dark and Deep Palettes from the general brand

identity system should not be used online; these
colors simply do not render well onscreen.

If any color can be called the soul of the MetLife

brand, it is blue. As you will see from the examples
in section IV, this is the main color we use in MetLife
online designs. Other colors may be used as accents,
HEX VALUE: 3976D1
but blue is the core.

24
 Graphic Design | Color

Example of tint of orange Important notes about color:

• Tints of colors may be used; this allows you to

achieve a variety of intensities without making a
page a jumble of different colors.
• Do not use gradients. MetLife uses strong, simple
blocks of color.
Example of tint of blue • The background of MetLife pages should be
primarily white, as white complements
the primary and secondary color palettes.
For more details about color usage on particular
sites, please see section IV.

Example of tint of grey

25
 Graphic Design | Type

Verdana: Because of its legibility and similarity to Frutiger in weight and spacing, Consistent use of the MetLife family of fonts is an
Verdana is the HTML font used as body copy on MetLife sites. essential extension of the overall brand identity
system. Frutiger is the main MetLife typeface, and
ABCDEFGHIJKLMNOPQRSTUVWXYZ should be used when possible; i.e., in graphics (Note:
in smaller sizes, Frutiger Bold or Black work best).

abcdefghijklmnopqrstuvwxyz However, because of technical realities inherent in

the online environment, there are two additional
acceptable fonts you should use online. Note:
Verdana is acceptable in the online environment only.
Arial is an approved typeface for other forms of
pc-originating communication; see

ABCDEFGHIJKLMNOPQRSTUVWXYZ
Arial is the HTML font used for small copy or figures in charts, graphs, and other infographics. http://brandcenter.metlife.com.Applications.corporate
/MBC

abcdefghijklmnopqrstuvwxyz

26
 Graphic Design | Type

Here are some examples of type usage:

Frutiger Bold (GRAPHIC)

Frutiger Bold (GRAPHIC)

Arial Regular (SYSTEM GENERATED)

Frutiger Bold (GRAPHIC)

Verdana Regular (SYSTEM GENERATED)

Frutiger Roman / Frutiger Bold (GRAPHIC)

Verdana Bold (SYSTEM GENERATED)

27
 Graphic Design | Navigation

As discussed in section II, the top tab bar is the

essential navigational element on MetLife sites. It is
designed to instantly communicate the fundamental
structure of the site, listing all the main sections.
From a design perspective, it is essential that this bar
be consistent across all MetLife properties. Here are
the details:

Buttons are evenly spaced to the width of the page.

The HOME tab is The other tabs have a consistent

set to a specific sixe amount of space to the left and
(98 x 18 pixels). right of the centered word within
the button.

28
 Graphic Design | Navigation

The top navigation is the only place where gradients

are used on Metlife.com. Since it’s a constant
element, it’s appearance can be softer than buttons
that appear elsewhere, which need to call attention
to themselves to invite clicking.

Orange underline is used as the on state for the top

navigation so you can easily identify where you are in
the site.

Dropdown menus within the top nav bar are

standard and not modifiable. Note: the width of the
dropdown conforms to the width of the tab.

ON state font: Frutiger 65 Bold | 12pt | Initial cap OFF state font: Frutiger 65 Bold | 12pt | Initial cap
ON state font color: 006AB6 OFF state font color: FFFFFF

29
Graphic Design | Imagery

Basic principles:

Photography is the recommended imagery for

MetLife communications, and can help to humanize
a text-heavy page online. The friendly, approachable,
caring personality of the brand comes through in
photography that is playful, whimsical, and
unexpected, with emotional imagery that focuses on
people and the things that really matter to them.
More complete information on the selection of
imagery can be found in the “Brand Elements”
section of the online Brand Center.

It is most appropriate to use photography on home

pages and introductory pages. Deeper pages should
be more functional. As you will see in section IV,
many MetLife home pages will prominently feature a
photograph near the top of the page, and may also
use smaller, accent photos. But be careful – too
many images can be a distraction. See section IV for
examples of correct photo use.

30
 Graphic Design | Information Graphics

Charts, graphs, and other information graphics can be

useful communication tools. However, particular care
should be taken when using them online. Small type
Print graphic can be hard to read, and too many graphics can
quickly overload a page. If you want to use an info
graphic, choose a single one and make it count.

A note: There is one graphic that should

appear on every page: the Print button.
See section IV for details about placement.

When conveying information through a graph you

should make things as simple as possible.

Different shades of solid colors should be used to

depict varying numerical information, whether in a bar
chart or a pie chart.

Graph Info Specs: Font = Verdana Regular, 10pt

31
Graphic Design | Animation and Video

Animation and video are compelling forms of

content, and you may be interested in using
them on your site. However, bandwidth
concerns and technical issues mean that, in
general, you should minimize animation – using
it only when absolutely necessary – avoid video
altogether. Streaming video is simply not
supported for MetLife sites. And while
animation can be useful in promotional content
like ad bridges, and may occasionally be
appropriate in interactive tools, for regular
content it should be avoided. All uses of
animation must be approved in advance.

32
 Graphic Design | Promos and Banners

454px x 186px Many MetLife pages will reserve space for

promotional content. Take advantage of these areas
to deliver key messaging, such as benefit-oriented,
seasonal, or other content you want to highlight.
Remember, a banner is an invitation – you don’t
need to tell your whole story here/ The idea is to
present one compelling thought that will entice a
user to click through.

Here are some examples; more details are provided in

section IV.

148px x 200px

33
Detailed Site Samples
Detailed Site Samples | Master Brand Sites

These sites are the purest expressions of our

brand online. As discussed at the beginning of
this guide, when in doubt about how to design
your site, if you look to MetLife.com for
direction you will rarely go wrong.
Accompanying the screenshots that follow,
you’ll find an explanation of the information
architecture and design principles that should
guide you in developing a site like these, as well
as detailed specs. And the NEF screenshots will
also highlight the differences that arise when
your site is branded with an affiliate’s name
instead of MetLife.

35
 Detailed Site Samples | Master Brand Sites

MetLife.com: Homepage MetLife.com

Color: The overall color theme for MetLife.com is

built around tints of the light brand color palette.
This is because of the corporate nature of the site
as well as the need to balance the strong brand
colors on a highly informational page. The most-
used color should be blue, specifically the MetLife
primary blue and tints of it.

The header is the strongest brand element on the

page. For this reason, we use the MetLife primary
blue as the background.

There are no gradients on this page. MetLife.com

uses simple blocks of color, with photography to
convey emotion.

Grid: MetLife.com is based on a three column

grid. The upper portion of the layout uses two-
thirds of the grid to encompass the large
promotional area.

36
 Detailed Site Samples | Master Brand Sites

MetLife.com: Homepage

Links: Arrows and text links are standard

throughout the site. The color arrows in
MetLife.com are orange. The color may vary from
site to site, but must stay consistent within each
site. Arrows placed in front of a link indicate a
task. Arrows placed after a link indicate a move
to different content.

Text link specs: Font = Verdana, 11pt

OFFSTATE Color = 2C8DC4
OVERSTATE Color = E98F2C

Note: Text links are treated the same way for all
MetLife properties.

Arrow specs: Top Color = E88F2B

Bottom Color = CE791C

Arrow enlarged
detail view.

37
 Detailed Site Samples | Master Brand Sites

MetLife.com: Homepage Header: In offline media, the MetLife logo has a

specific amount of space around it. In the online
header, the proportion of the logo to Snoopy is more
important than leaving the required space below the
logo. Therefore, the logo and Snoopy are bottom
aligned, and they are sized to fit Snoopy in the
header.

In a master brand site, the background color of the

header is always blue. The Metlife logo always
appears on the left side of the header with Snoopy
to its right. The Metlife logo and Snoopy are
separate elements and should not appear next to
each other. The search function always appears on
the right side of the header with the global
navigation above it.

Specs: Height = 88px

Width = 740px
Background color = 3976D1
Font = Frutiger 55 Roman, 11pt

38
 Detailed Site Samples | Master Brand Sites

MetLife.com: Homepage Promo area: In this example, the promo area

celebrates Snoopy’s 20th anniversary with MetLife.
Other examples may focus on MetLife products
such as Long-Term Care or Auto Insurance.

If there is no promotion, the area should contain a

single photo, preferably showing two people
having a personal connection.

The promo area should always have a horizontal

band at the bottom, where the tagline, “have you
met life today?” is placed. The link element, “Learn
about..” can be placed to its right.

Specs: Height = 454px

Width = 186px

39
 Detailed Site Samples | Master Brand Sites

MetLife.com: Homepage High priority link areas: This area is used for high
priority text links, usually reserved for contacting or
locating a MetLife Advisor.

Specs: Height = 43px

Width = 134px
Background color = BADCF8
Body font = Verdana, 11pt

40
 Detailed Site Samples | Master Brand Sites

MetLife.com: Homepage High priority info area: In MetLife.com, this area is

used for “Did You Know?” content. The “Did You
Know” area is yellow to give it warmth and differ-
entiate it from the rest of the page. It is a set size
with a predetermined number of characters. The
header is in all caps, to conform to the other
headers on the page.

Specs: Height = 276px

Width = 134px
Background color = FEDA5E
Header font = Frutiger 55 Roman, 11pt
Body font = Verdana, 11pt
Max Characters = 220

Note: In some cases, you may wish to combine the

main promo area, the high priority link area and
the high priority info area into a single large
promotional space. This is acceptable.

41
 Detailed Site Samples | Master Brand Sites

MetLife.com: Homepage Main content areas: The main content areas are
set up in a grid in the lower portion of the page,
below the promo area and “Did you know?” Each
area has a header on a color background. The
header consists of a main title in all caps with a
short descriptor following in upper and lower case.
If there is no descriptor the label should be in all
caps only.

The text area below contains content or links on a

white or tinted background. The Tools area is called
out with a different color, to differentiate it from
the business area.

Specs: (Header)
Height = 21px
Width = variable
Background color = A9D2F8
Font (all caps) = Frutiger 55 Roman, 12pt
Font (upper & lower case) =
Frutiger 65 Roman, 10pt

(Body copy)
Body font = Verdana, 11pt

42
 Detailed Site Samples | Master Brand Sites

MetLife.com: Homepage Footer: The color bar of the footer is used to

visually close off the page. It should be the same
color as the header, or a tint of the header color.

Specs: Bar Height = 23px

Bar Width = 740px
Background color = 75B1DD
Font = Verdana Regular, 11pt
OFF STATE Color = FFFFFF
OVER STATE Color = FEDA5E

43
 Detailed Site Samples | Master Brand Sites

MetLife.com: Subpage The new design for the interior pages of

MetLife.com has not been incorporated yet.
However, the screenshot at left shows the ideal
layout for the page and for all other Master Brand
interior pages.

Left Navigation: The navigation consists of bars

containing all the links for the section that the user
is currently in. One bar is highlighted to show the
specific page within the section that the user is on.

This text is all system generated.

Specs: Bar Width = 146px

Bar Height (one line) = 19px
Bar Height (two lines) = 32px
Bar OFF STATE color = A8D2F8
Bar ON STATE color = D0E6FB
Arrow OFF STATE Color = FFFFFF
Arrow OVER STATE Color = 146DA9
Rule = 1pt, Color= 63ADEE

44
 Detailed Site Samples | Master Brand Sites

MetLife.com: Subpage Page Header: The page header is system generated.

Specs: Font = Verdana Regular

Size = 16pt
Color = 000000

Main Photo: Every subpage has an image area just

below the page header. This photo should reflect
the warmth of the brand and relate to the content
of the page or section. There is a 4pt color bar just
above the photo.

Specs: Height = 408px

Width = 122px

Print This Page: Every subpage has a link to print

the particular page that the user is on. This graphic
is consistent throughout all MetLife properties.

45
 Detailed Site Samples | Master Brand Sites

MetLife.com: Subpage Main Content Area: The main content area may
consist of blocks of content containing links to
other products and services within the section, or
paragraphs of informational body copy.

Blocks of content may be differentiated by tinted

backgrounds to make them easier to read.

Specs: Body font = Verdana, 11pt

46
 Detailed Site Samples | Master Brand Sites

MetLife.com: Subpage Right side content: The right side is reserved for
links to other pertinent areas of the site and tools
that may help the user get more personal
information. The Tools area should be separated
with the use of color. Here, a tinted background is
used.

The right side content can also contain a promo

area. This can be a static or animated gif that
focuses on one product or service.

Specs: Width = 148px

Height = variable
Rule = 1px
Font = Verdana, 11pt

47
 Detailed Site Samples | Master Brand Sites

NEF.com: Homepage Master Brand Site: MetLife.com

To give you an idea of the difference allowed when

a Master Brand site is not MetLife branded, we
have used NEF.com as an example. Elements not
specifically called out here should be assumed to
follow MetLife.com

Color: NEF.com also uses tints of the light brand

color palette throughout the site. In addition, a
darker blue is used here as the strongest color on
the page, which sets NEF apart from MetLife.com
and supports its brand identity.

Header: The header is exactly the same as it is for

MetLife.com, with the exception of Snoopy. Snoopy
does not appear in non-MetLife branded site
headers.

Promo area: The promo area in this layout is simply

used for photography.

48
 Detailed Site Samples | Master Brand Sites

NEF.com: Homepage High priority link areas: This area is used for high
priority text links, usually reserved for contacting or
locating a representative.

High priority info area: In this page layout, the high

priority info area is used to call out products and
services.

Main content area: Here, body copy that introduces

and describes New England Financial is placed in
the main content area.

49
Detailed Sample Sites | Secondary Sites

Secondary sites provide an interesting design

challenge. Because while they generally exist in order
to enable users to complete transactions, and as
such have very particular functional requirements,
they also are a part of the face MetLife presents to
the world. So there is a balance to be struck. While
you should still start with the structure and feel of
the master brand sites, you will streamline and adjust
to ensure that the user’s experience is efficient and
successful. In concrete terms, this means that
secondary sites will tend to be shallower, with fewer
levels and fewer pages overall, and as such will have
simpler navigation. The primary functionality should
be accessible instantly from the home page. The
screenshots that follow will provide you with all the
details about creating one of these sites.

50
 Detailed Site Samples | Secondary Sites

MetDental.com: Homepage Secondary Site: MetDental.com

Color: The header maintains the strong MetLife

brand blue. However, in this case the secondary
color used is green. The MetLife green from the
light brand color palette and tints of it are used to
set MetDental apart as a secondary site.

Secondary header: On secondary sites, an extra

colored bar exists below the main header. The bar
contains the name of the site, and introduces the
color that will be used throughout the site.

Grid: As long as a grid is maintained, the columns

can be adjusted to suit the needs of each individual
site. For this site, the upper portion of the layout
uses a three column grid because of the need for a
more robust sign-in area on the home page.

51
 Detailed Site Samples | Secondary Sites

MetDental.com: Subpage Left Navigation: The design for the left navigation
consists of bars containing all the links for the
section that the user is currently in. The bar is
highlighted to show the specific secondary-level
page within the section that the user is on. Third-
level pages are shown when the user clicks on a
tab that contains third-level pages. The arrow
rotates 90 degrees and a list of third-level pages
follow.

This text is all system-generated.

Page Header: The page header is system-generated.

If the page does not have a main photo, a 1pt
color rule is used to separate the header from the
main content area.

52
 Detailed Site Samples | Secondary Sites

Intranet: Homepage Secondary Site: My MetLife

Color: The intranet reflects the medium brand color

palette rather than the light brand color palette
used for MetLife.com. The header maintains the
strong MetLife brand blue, but because this site is
for the employees of MetLife, the overall color
reflects a more personal, warmer and fun
atmosphere to humanize the intranet, versus the
more “professional” dominant blue of
MetLife.com.

An orange bar is used below the header, with the

name of the site. This orange serves as the
secondary color used throughout the intranet, and
is reflected in the footer.

Grid: As long as a grid is maintained, the columns

can be adjusted to suit the needs of each individual
site. For this site, the grid is simplified to a two-
column grid, breaking it up further within certain
areas when necessary.

53
 Detailed Site Samples | Secondary Sites

Intranet: Homepage Main Photo: Every subpage has an image area just
below the page header. This photo should reflect
the warmth of the brand and relate to the content
of the page or section. There is a 4pt color bar just
above the photo. In this case, an area the same
color as the bar is placed below the photo to
highlight links to special sections of the site.

54
Detailed Site Samples | Internal/Functional Sites

Since no guideline-compliant versions of this

type of property have been designed yet, we
can’t provide examples. But in general, here are
a few points to keep in mind if you are
designing a site or application like this.

• Since these sites are internal, take your

design cues from the MetLife intranet.
While your site may not be doing as many
things as the intranet, it’s still supposed
to serve the same audience. So colors and
style should flow from that design.

• Use the main elements of the MetLife online

brand: That means the header bar,
and, when necessary, the navigation, as well
as the typefaces and color palette.

• Keep it simple, but make it work: These

properties work best when the design is
clean. Let the function be the star. But that
doesn’t mean these pages shouldn’t be
designed. Using the guidelines will make
your pages look better and work better.

55