Add photo option to hero graphic guidelines

[nataliafitzgerald]

Add photo option to hero graphic guidelines

User story
Updates to hero graphic guidelines #461

Description

The full bleed photo hero option has been available to users for quite some time but the Design Manual does not make mention of this option. Is this a pattern we want to encourage users to use? If so, can we create guidelines for the proper selection of imagery for this format?

We currently have two full bleed photo heroes on the site. One is on the site homepage. That one does not use the basic hero pattern, however. The only site hero that uses the basic hero pattern and includes a photo is:
https://www.consumerfinance.gov/policy-compliance/

Task

Discuss the full bleed photo hero pattern and determine next steps:

• [ ] Should we continue to use this pattern on the site (with the exception of the Policy and compliance example)?
• [ ] If yes, are there remaining concerns about this pattern that need to be ironed out?
• [ ] Are there special considerations a user should make when determining the right image for this format?
• [ ] Should we set guidelines for images so that the left and right gutters match the background color of the photo - in order to create the sense of a bleed?

Ready Checklist

• Has acceptance criteria or is part of a user story
• Describes the smallest possible chunk of work
• There are no blockers to starting the task
• All information necessary for completion is available
  - All input from other disciplines (Design/Ux/Content/FEWD/BEWD) is attached
  - There are no outstanding questions for stakeholders

Acceptance criteria

• [ ] Usage guidelines are developed
• [ ] Supporting images are created
• [ ] Design Manual is updated

Done Checklist

• All work has been peer-reviewed
• Has been acceptance tested and meets acceptance criteria
• All code or assets are merged to master
• Documentation has been updated.

[nataliafitzgerald]

I've been working on this update as part of the overall hero page updates. Here's the content related to photo heroes:

Photo

• When selecting a photo include a 30px horizontal margin of clear space between text and image area
• Type contrast ratios cannot be mathematically determined for photos so special care should be paid when selecting these images
• Small and large screen images should contain the same elements but can differ compositionally
• To conserve vertical space, small screen image should be as short as possible
• Photo dimensions for large screens (exact): 1230px x 285px
• Photo dimensions for small screens: 600px (exact) x 338px (maximum)

Large screens (601+)

Small screens (600-)

[nataliafitzgerald]

Design Manual has been updated (updates have been merged). Closing issue.