Add full bleed illustration option to hero graphic guidelines

[nataliafitzgerald]

Add full bleed illustration option to hero graphic guidelines

User story
Updates to hero graphic guidelines #461

Description

The full bleed illustration hero option has been available to users (and in use) for quite some time but the Design Manual does not include this option.

Full bleed illustrated hero:
https://www.consumerfinance.gov/consumer-tools/prepaid-cards/

Task

Add full bleed illustration option to hero graphic guidelines

• Develop usage guidelines
• Create supporting images
• Update Design Manual

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 bleed heroes:

Illustration (bleed)

• On large screens, illustration bleeds top and bottom
• Small and large screen images should contain the same elements but can differ compositionally
• Large screen image dimensions are based on maximum possible hero height at 601px width
• To conserve vertical space, small screen image should be as short as possible
• Illustration dimensions for large screens (exact): 470px x 638px (2x: 940px x 1276px)
• Illustration dimensions for small screens: 570px (exact) x 320px (maximum) (2x: 1140px x 640px)

Large screens (601+)

Small screens (600-)

[jimmynotjim]

@Scotchester Is 638px the tallest the hero is in height before breaking the image below the text? That seems wicked tall.

[Scotchester]

@jimmynotjim Correct. The 638 figure is a little annoying to calculate, but it's what the max height of the hero image should be on a 601px viewport, with the longest possible copy (i.e., tallest total hero space).

I won't spell it out further, because the current implementation has a width bug in it, which makes explaining the calculation cumbersome.

[nataliafitzgerald]

@jimmynotjim
Yeah, here's the bullet that I included to try to explain it on the page: "Large screen image dimensions are based on maximum possible hero height at 601px width".

The maximum height was determined by using the maximum height that would be created at the 601px width - based on the content guidelines. Here's the image where I tried to figure it out in illustrator.

[jimmynotjim]

@nataliafitzgerald ah sorry, I missed that bit. Thanks both of you for the clarification, it just seemed like an odd number.

[nataliafitzgerald]

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