Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
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