MetLife Visual Identity GuidelinesIssue 1: December 2016

PREPARED BY METLIFE CUSTOMER EXPERIENCE + DESIGN

MetLife.comPhotography Guidelines

MetLife Digital Font ComparisonApril 2017

HD Images 3

Image Ratios 5

Image Composition 14

Dos and Don'ts 17

Table of Contents

HD Images

HD Images

High Density Image Creatives (HD images), also known as Retina images (Apple’s branded term), are used for High Definition displays, including desktop, tablet, and mobile screens.

HD screens display images at a high pixel den-sity. This means you get twice the amount of pixels in the same amount of space as you would in a traditional display, which creates a crisper icon or image.

Image Ratios

Screen sizes should be considered when select-ing images to ensure they are correctly displayed across platforms.

Focal points need to be considered for desktop, tablet, and mobile screen sizes.

1 2

1. Desktop and Tablet

2. Mobile

Hero Ratios

Screen sizes should be considered when select-ing images to ensure they are correctly displayed across platforms.

Focal points need to be considered for desktop, tablet, and mobile screen sizes.

1 2

1. Desktop and Tablet

2. Mobile

More Content Module Ratios

Screen sizes should be considered when select-ing images to ensure they are correctly displayed across platforms.

Focal points need to be considered for desktop, tablet, and mobile screen sizes.

1 2

1. Desktop and Tablet

2. Mobile

Large Promo Ratio

Screen sizes should be considered when select-ing images to ensure they are correctly displayed across platforms.

Focal points need to be considered for desktop, tablet, and mobile screen sizes.

1

1. Desktop and Tablet (image is hidden on mobile)

Lead Form Promo Ratio

Screen sizes should be considered when select-ing images to ensure they are correctly displayed across platforms.

Focal points need to be considered for desktop, tablet, and mobile screen sizes.

1 2

1. Desktop and Tablet

2. Mobile

Small Promo Ratio

Screen sizes should be considered when select-ing images to ensure they are correctly displayed across platforms.

Focal points need to be considered for desktop, tablet, and mobile screen sizes.

1 2

Product Card Ratio

1. Desktop and Tablet - please note, with more or less content, image height can vary.

2. Mobile

Screen sizes should be considered when select-ing images to ensure they are correctly displayed across platforms.

Focal points need to be considered for desktop, tablet, and mobile screen sizes.

1 2

Category Product Card Ratio

1. Desktop and Tablet

2. Mobile

Image Composition

Have a strong point of focus (focal point) to ensure a clear concept is delivered to the user in a memorable way.

Hero image composition changes when viewed on various devices.

1 2

Hero Image Composition

1. Desktop and Tablet

2. Mobile

3. Example

3

Have a strong point of focus (focal point) to ensure a clear concept is delivered to the user in a memorable way.

1 2

Product Card Image Composition

1. Desktop

2. Tablet

3. Mobile

4. Mobile Example3

3 4

Dos and Don'ts

• Focal point is considered for desktop, tablet, and mobile breakpoints

• The positioning of the focal point in the top right is correct.

• There is a simple background where text can be positioned in the top left.

• Most of the subject can be seen on Desktop, Tablet, and Mobile breakpoints.

• The concept of the image is still understandable if part of the image is obstructed.

Hero Component DO

1

2

3

Screen sizes should be considered when select-ing images to ensure they are correctly displayed across platforms.

1. Desktop Hero image

2. Tablet Hero image

3. Mobile Hero image

Hero Component DO

Screen sizes should be considered when select-ing images to ensure they are correctly displayed across platforms.

1. Desktop Hero image

2. Tablet Hero image

3. Mobile Hero image

1

2

3

• Focal point is considered for desktop, tablet, and mobile breakpoints

• The positioning of the focal point in the top right is correct.

• There is a simple background where text can be positioned in the top left.

• Most of the subject can be seen on Desktop, Tablet, and Mobile breakpoints.

• The concept of the image is still understandable if part of the image is obstructed.

Hero Component DO

Screen sizes should be considered when select-ing images to ensure they are correctly displayed across platforms.

1. Desktop Hero image

2. Tablet Hero image

3. Mobile Hero image

1

2

3

• Focal point is considered for desktop, tablet, and mobile breakpoints

• The positioning of the focal point in the top right is correct.

• There is a simple background where text can be positioned in the top left.

• Most of the subject can be seen on Desktop, Tablet, and Mobile breakpoints.

• The concept of the image is still understandable if part of the image is obstructed.

Hero Component DO

Screen sizes should be considered when select-ing images to ensure they are correctly displayed across platforms.

1. Desktop Hero image

2. Tablet Hero image

3. Mobile Hero image

1

2

3

• Focal point is considered for desktop, tablet, and mobile breakpoints

• The positioning of the focal point in the top right is correct.

• There is a simple background where text can be positioned in the top left.

• Most of the subject can be seen on Desktop, Tablet, and Mobile breakpoints.

• The concept of the image is still understandable if part of the image is obstructed.

• The focal point is unclear and spread out across the image.

• The image is very busy.

• The text is hard to read because there isn't enough empty background.

• A lot of the subject is hidden under the modules on Desktop, Tablet, and Mobile breakpoints.

• The concept of the image is unclear when part of image is obstructed.

Hero Component DON'T

Screen sizes should be considered when select-ing images to ensure they are correctly displayed across platforms.

1. Desktop Hero image

2. Tablet Hero image

3. Mobile Hero image

1

2

3

• Focal point is positioned on the left side of the image - the text is hard to read because it is po-sitioned over the focal point.

• Most of the subject is hidden under the modules on Tablet and Mobile breakpoints.

• Concept of the image is unclear when part of image is obstructed.

Hero Component DON'T

Screen sizes should be considered when select-ing images to ensure they are correctly displayed across platforms.

1. Desktop Hero image

2. Tablet Hero image

3. Mobile Hero image

1

2

3

• Focal point is positioned on the left side of the image - the text is hard to read because it is po-sitioned over the focal point.

• Most of the subject is hidden under the modules on Tablet and Mobile breakpoints.

• Concept of the image is unclear when part of image is obstructed.

Hero Component DON'T

Screen sizes should be considered when select-ing images to ensure they are correctly displayed across platforms.

1. Desktop Hero image

2. Tablet Hero image

3. Mobile Hero image

1

2

3

• Focal point is positioned on the left side of the image - the text is hard to read because it is po-sitioned over the focal point.

• The text is hard to read because there isn't enough empty background.

• Most of the subject is hidden under the modules on Tablet and Mobile breakpoints.

• Concept of the image is unclear when part of image is obstructed.

Hero Component DON'T

Screen sizes should be considered when select-ing images to ensure they are correctly displayed across platforms.

1. Desktop Hero image

2. Tablet Hero image

3. Mobile Hero image

1

2

3