In primary placements, photo-real devices are paired with 1:1 product screenshots. Primary product expressions are used for high-level storytelling. In primary placements, focus on the experience of using the app and not on the hardware.
Photorealistic devices are used in all primary expressions.
Always display content on the screen as it appears when the app is running.
content hierarchy
layout recommendations
Comp product shots into photo-realistic devices.
Isolate single components to emphasize payoff and ownable moments.
Comp product shots into devices in the hands (or in front) of actual customers.
Always display content on the screen as it appears when the app is running.
In secondary placements, stylized devices are paired either with 1:1 product shots, stylized product shots, or extracted UI to highlight a specific product or feature functionality.
Descriptive product expressions are used to enhance storytelling.
Product UI may be stylized to optimize available space (e.g: OA).
Product UI and devices are always shown straight on and never at an angle or bevelled.
content hierarchy
layout recommendations
Comp stylized or non-manipulated product shots into stylized devices.
Comp stylized or non-manipulated product shots into stylized devices.
Isolate a single component to emphasize payoff and ownable moments.
Isolate a single component to emphasize payoff and ownable moments.
Apple or Android devices may be used for primary product expressions. Space Gray iPhone 8 and iPhone 8 Plus are recommended and available for download.
Use device images “as is” and without modification.
Use either Apple or Android devices.
Use product images at a size that is clearly legible at the image resolution provided.
Stylized devices are paired with product shots in secondary product expressions.
Maintain contrast. Light or dark devices may be used at the designers’ discretion. Make sure to pair dark devices with light backgrounds and light devices with dark backgrounds.
Use only devices provided. Other than cropping, please don’t manipulate.
Product expression don’ts
Don’t use stylized device frames in primary placements on web.
Don’t put promo or any other elements on top of photo-real devices.
Don’t pair stylized product images with photo-real devices.
Don’t modify device images in any way.
Don’t use photo-real device frames in secondary placements.
Don’t use devices on unapproved background colors.
Examples
