Вы находитесь на странице: 1из 56

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 | Usability and Accessibility

As a brand committed to leadership in the • Avoid nonstandard technologies and plugins,


industry, the MetLife websites must be designed such as Shockwave or Quicktime,
for the highest-quality user experience. The that may prevent users from receiving
caliber of your content and the way it is content.
presented reflect on all of us. The information • Avoid frames, which complicate navigation,
architecture of the MetLife sites we use as measurement, tracking, and search.
examples later in this guide should help you • Avoid small fonts which may be hard to read.
structure your content. The writing guidelines in Body copy should be no smaller than 11
the next section should help you decide what to points; legal copy should be no smaller than
say and how to say it. And finally, it is important 9 points.
that all MetLife sites are accessible to everyone, • Consider translation issues. Double-byte and
throughout the world. Keep these accessibility right-to-left languages create special
principles in mind: needs.
• Provide a link to download Adobe Acrobat if
• Make sure your site is Americans with providing a pdf download, and always flag
Disabilities Act (ADA) compliant. Not sure? the size of a download so users on slower
Here’s a place to start: connections can make an informed choice
http://www.rit.edu/~easi/las/weblaw1.htm before downloading.
• Design for multiple browsers and platforms: • Avoid pop-ups whenever possible. Not only
At the very least you should test your sites do users find them annoying, but the
on, for Windows, versions 4 and higher of many pop-up blocking technologies out
Internet Explorer and Netscape, as well as there mean that depending on them for
AOL; and for Mac, Internet Explorer versions content or functionality is a gamble.
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.

7
Overview | Content

Visual identity is just one component of successfully • Contemporary and relevant • Make it short and sweet. Reading from a
communicating the MetLife brand. After all, we build • Smart and informative computer screen is 25 percent slower than
websites to provide content, and that content • Concise and well-organized reading from a printed page. Using 50 percent
resides, fundamentally, in the written word. Whether • Trustworthy and simple to understand fewer words will make users more comfortable.
someone is just considering becoming a MetLife When adapting printed materials for the Web,
customer or has a long and deep relationship with A good way to test copy is to read it aloud. Does it cut superfluous copy.
us, we must provide them everything they’re looking flow easily as you speak it? It should if it is friendly, • Make it move. Use the active voice to propel
for, and more, through clear, informative, accessible informal, and informative. Does it give you a sense of sentences forward. This will help keep the reader
writing. And beyond that, our writing must reinforce satisfaction? It should if it is smart, simple, and well- interested. Notice the different feel between
the MetLife brand, by being human, friendly, and organized. these two sentences: “The ending of the movie is
smart. sad, so Sue is crying.” “The movie’s ending
The goal is simple: to present clear, relevant devastates Sue; she sobs at its tragic beauty.”
This section of the style guide is intended to ensure information that will help the customer or prospect Strong, active verbs bring writing alive.
that all our online content reinforces our brand to make informed and sound decisions, in a way that • Make it self-sufficient. Because of the non-linear
intent, delivering on the promise that “MetLife will feels contemporary, makes the customer nature of the Web, users may not see pages in
be known the world over for empowering people to comfortable, and inspires trust. the order you expect. So make sure every page
feel protected, guided, and hopeful about their works independently and is self-explanatory. A
lives.” Keep the core MetLife brand values in mind when Web page should never begin with
writing in the MetLife voice. They reflect our heritage “Therefore…” because your reader will have no
MetLife’s history spans over 135 years, but we don’t and convey the philosophy that governs our idea what you are referring to!
want to sound dated or old-fashioned, because we relationships with one another and with our • Make it flow. Because of the immense volume of
want our customers to know we understand the way customers, and can be a great resource in helping information online, your readers need you to
they live now. And even though we are a big you to frame your thoughts. guide them. Lead the way through the important
company, we should never be bureaucratic – our information, include hyperlinks to secondary
voice should represent who we are as people: proud A Web style of writing: Even more than other information, and, where appropriate, offer
and passionate about what we can do for our types of writing, Web writing demands sharpness, contact information. Take advantage of Web
customers. clarity and conciseness. Here are a few points to design elements like linking and insets to
guide you. break up large amounts of information.
All writing for MetLife should share certain qualities. • Make it current. Avoid labeling a page “coming
It should be: • Make the first screen count. Always present the soon.” If you must include material that is under
• Human and empathic most important points right up front; we only construction, provide a specific date when the
• Friendly and approachable (even funny, where have a few seconds to capture the customer’s page will be complete or the content available.
appropriate) attention. So that first screen needs to inform, Then, of course, honor the commitment.
• Informal and conversational engage and inspire.
8
Overview | Content

• Make it interesting. Always focus on the reader. Emphasize key points: Words and phrases that are headlines and subheads should be brief. Don’t crowd
Content should be user-oriented, meaningful, critical to the information being presented can be your headline with multiple thoughts; you will only
and benefit-focused. emphasized using bold or italic type. However, these inspire your reader to ignore it the more you try to
• Make it human. Use your voice, not that of a devices should be used very sparingly. Too many say, the less you actually will. A good headline is
large, impersonal organization. Use English, not emphasized points confuses the reader and actually ruthlessly concise. Rely on subheads to expand your
jargon. Say “happens,” not “transpires,” and makes nothing stand out. Do not use underlining for thought when necessary, and trust that an engaging
“you,” not “policy holders.” emphasis; underlining should be reserved for links. headline will entice your reader to keep reading, so
that you can communicate everything you hope to
Scannability: A study by Web usability experts say.
Bullet points:
Jakob Nielsen and John Morkes revealed that 79
• Use bullet points for lists of three items or more.
percent of users scan the page, picking out individual Avoid punctuation in headlines and subheads, and
• Keep bullet copy brief. Items longer than three
words and sentences. So it’s important to write only capitalize the first word and proper nouns.
lines begin to look too heavy and undermine the
content with that in mind. Break up your thoughts Using initial caps throughout the headline looks
effectiveness of using bullet points in the first
and ideas and structure them in logical chunks. dated.
place.
Make your writing understandable at a glance, by
• Capitalize the first letter of the first word for
breaking it up into easy-to-digest “morsels,” using
each point, whether it is a phrase or a complete Common mistakes: Writing for the Web is only
subheads, bullet points, lists, captions, and
sentence. about six years old, so we’re all still learning. Here
hyperlinks.
• Avoid mixing phrases and complete sentences in are some common mistakes to avoid.
Simple sentences: Use simple rather than the same bulleted list. Choose one or the other.
compound or complex sentences whenever possible. • Rambling. Make sure you’re not writing text that
Use periods at the end of bullet statements
The longer the sentence becomes, the less is unnecessarily long. Make sure you break up
unless they are something as short as a list of
“scannable” it is, and the more difficult it is to read your thoughts into digestible morsels. Edit
names.
on a screen. 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
Know your audience: Remember, a crucial part of use active verbs whenever possible.
organizational structure for your material at the
the MetLife brand vision is that we want “to build • Do not use “and” or “or” before the last item in
start of the project. Not only will this help you
financial freedom for everyone.” That universality is the bulleted list, as this makes the list visually
break up your thoughts into morsels in a logical
an important differentiator for us. Whether we’re confusing.
way, it will also help you keep your site current
speaking to a consumer or a corporate human
by making it easier to make changes and
resources manager, the MetLife voice applies. On the Headlines and subheads: A headline should
updates.
other hand, we are speaking to one person at a convey the category or the key point and the most
time, so tailor your message and tone so that each powerful benefit. Paired with a clear, explanatory
person feels like you understand their needs. subhead, the headline engages the customer and
attracts interest to the content on that page. Both
9
Overview | Content

• Page proliferation. Often sites force users to • “Download” is one word. MetLife proprietary usage
wade through layers of unnecessary pages or • The “Web” is capitalized, but “website” should Financial services, and insurance in particular, are
take extra steps to accomplish their goals. Make not be (and “website” is one word). highly regulated businesses both in the United States
sure your site is built around the customer’s and internationally. Please consult the MetLife
experience, not your own internal business model Numbers: Please follow AP style Brand Center for information about legal
or an old prose document. Think of each step requirements, and remember that all materials must
your user will take, and make it as efficient as • Spell out whole numbers below 10, use numerals
be submitted for legal review before they are
possible. for 10 and above. However, if necessary for
released.
• Sloppiness. Unfortunately, many people assume emphasis in a headline, numerals may be used
that because the Web is informal, poor grammar for numbers less than 10.
is acceptable. This is simply not the case. Bad • Spell out any number that appears at the
grammar and spelling undermine the profes- beginning of a sentence.
sionalism and trust of the MetLife brand and are • Spell out “first” through “ninth” when they
simply unacceptable. Check your grammar and indicate sequence in time or location, e.g., first
spelling. Always. base, First Amendment, first in line.
• Always spell out “percent,” rather than using the
% symbol, in body copy. In charts and graphics,
Style and usage
the symbol may be used.
Capitalization: In headlines and subheads, the first
word should be capitalized, along with any proper
Phone numbers: Telephone numbers should always
nouns. In labels, such as “Your Products and
be formatted as follows: 1-800-123-4567.
Services,” each word should have an initial cap,
except for conjunctions and prepositions such as
Punctuation: Since headlines and subheads may or
“and” or “of.” Any time a complete sentence is
may not be complete sentences, for consistency
used, only the first word and subsequent proper
periods should not be used. Elsewhere, periods
nouns should be capitalized.
should be used at the end of all complete sentences.
Avoid exclamation points and ellipses (…), as they
Hyphenation, single, and double words: This can be
are relatively unsophisticated punctuation and
tricky, so here are a couple of examples of common
suggest sloppiness to many readers.
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.
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
Information Design | Site Types

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: Secondary Sites: Internal/Functional Sites:


This category includes, first and foremost,
This category includes more transactional sites This category includes the sites that are used
MetLife.com. It also includes the online
that reside either within or as adjuncts to the within MetLife to help us do our jobs. It includes
presences of affiliates like NEF. The main
master brands, like MetDental, or the MetLife anything from online time-reporting
guidelines for all MetLife properties are derived
intranet, MyMetLife. Another example would be applications to ePay statements. As internal
from MetLife.com; in section IV you will also
MetLife Advice, which exists within MyBenefits. sites, these properties should take their cues
find the differences that arise when designing
To the audience, the look and feel need to be from the intranet, but with a simpler, more
for an affiliate.
clearly consistent with the master brands. But streamlined approach appropriate
the differences in function and the need to to the functions they provide. None of these
provide efficient, transactional activity, require sites have yet been redesigned, so no examples
adjustments to the guidelines. These are given in this guide, but you will find some
adjustments are detailed in section IV. 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 Since color is one of the most powerful elements of
the Light Palette from the general brand guide. the MetLife brand, color use online should be
consistent with color use in other media. However,
there are special considerations that arise because of
HEX VALUES
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