Graphic Standards: Hero

[nataliafitzgerald]

Overview

The purpose of the Hero graphic is to "provide a brief overview of the purpose for a group of pages and indicate to users that they are in the right place to accomplish their goals." The Hero graphic sits at the top of the content hierarchy, so visual design elements, such as the height of the graphic and type size, must reinforce this position. Graphic standards must be flexible enough to accommodate different types of content yet also provide some limits, particularly in terms of the amount of content. Concise and engaging copy is key to the success of the Hero graphic.

Related issues and documentation

Hero graphic standards and hierarchy: #301
UX pattern discussion: https://docs.google.com/document/d/120S1FyRaIAefcVgODGhnaO99ycigH_-5_4cI5KAfE4A/edit#

Proposed standards for desktop size

Dimensions and measurements

Hero Height: 300 px
Content width = 8 columns
Illustration width = Up to 4 columns
Illustration height = 180 px

For top facing illustrations, the width of the image should extend no wider than 4 columns. The height should be set to 180 pixels to leave 60 pixels of padding on top and bottom.

For front facing illustrations, the width of the should be limited to 4 columns maximum. The shelf line at the base of the illustration should extend 4 columns. The height should be set to 180 pixels to leave 60 pixels of padding on top and bottom.

Text content should be vertically centered within the space and the text box should extend 8 columns in width. The padding above and below the text content should be no less than 60 pixels top and bottom.

Typographical specifications

Header: 34 pixels (H1)
Subhead: 26 pixels (H2)
Link: 22 pixels (H3 Medium)
Eyebrow: 18 pixels (H4)

The following hero graphics have been tested applying these standards:

Remaining items to tackle as part of this issue:

• Explore and determine design standards for different breakpoints. @stephanieosan has already posted some work on this in Shrink Primary Nav pixel size #30. So, we can pull that in and tweak it as needed. Should we design for 7 breakpoints or 3?
• Will a photo or a video ever appear as a Super Hero? If so, we should address the design of these.
• Further define best practices for illustration compositions (number of objects, color, backgrounds, text contrast, etc.)
• Define content parameters in terms of character counts, etc.
• Are there any types of typographical content that we have not represented in these explorations?
  
  
  @stephanieosan @Dnpizarro @huetingj @kurzn @klocraft @duelj @ajbush

[duelj]

@nataliafitzgerald the documentation on this looks nice will be really interesting to hear thoughts around some of the details you mentions

• Had you considered any max character counts for this hero type? With the hard 300px height specification, were you thinking about limiting the description copy to 4 lines?
  • For responsive sizes, (couldn't find anything in issue Shrink Primary Nav pixel size #30 you mentioned above)
  • Just wanted to note FJ breakpoints as you begin exploring: 1290-800px, 799-600px, and 599-320px if you wanted to try responsive layouts that would work across those sizes.
  • I had not heard about 7 breakpoints, where is that being used? If you went that route how would you imagine it fitting into the FJ style that's using fewer breakpoints on the rest of the page?
• A little confused by the OAH example with the link at the bottom. I see from the UX notes that a super hero can have a CTA. But it seems like since this is featuring a tool without talking about the specific tool the hero message is kinda murky. Seems like that instance would fit the mould of a featured content hero.
  • My impression is that video in a hero would also fall under featured content and should reserved for that hero style.
  • UX question: What is the difference between the CTA on a super hero and a featured content hero.
    

[nataliafitzgerald]

@duelj -

• Yes, we were definitely planning on setting the max (and probably the minimum too) for number of characters. In general we would like to start to push in the direction of better curated content that is succinct and inviting. Having a character limit will be very helpful as we work through content with stakeholders. This has been a pain point up until now, i.e. stakeholders often write content that is too lengthly for the hero space.
• For responsive sizes, yes we will test this using the FJ breakpoints you listed. For the exploration that has already been done at various sizes, the issue is Hero graphic standards and hierarchy #301. That was done a while ago, though, so take it with a grain of salt. We will re-explore as part of this issue.
• In terms of the OaH hero example, these are merely design layout examples. As we push forward we can update the content to reflect content strategy for what the words should be in these heroes. I could change the content to lorem ipsum if that would help (perhaps it would). For UX/content guidelines you can refer to this issue: Design Patterns for Page Intros #337 (comment)
• Distinguishing between the call to action on a super hero and featured content is a good question. @kurzn - Can you provide more background on this?
• In terms of the breakpoints (and I don't want to veer off into a conversation about that in this issue), it appears that there have been discussions on this in various places - and there is perhaps some inconsistency between different projects (OaH, FJ, etc.). On KBYO it sounds like the code is spec'ed for 5 breakpoints. https://[GHE]/CFGOV/know-before-you-owe/blob/master/src/static/css/cf-theme-overrides.less @Scotchester or @danny8000 could provide more details if you want to add them to an issue that specifically discusses breakpoints. For the purposes of the hero exploration I will only use the breakpoints that are spec'ed in this issue: https://[GHE]/flapjack/Getting-started-with-Flapjack/issues/45

[duelj]

I agree with bullet point one and with forklifting content for FJ we have found how the length, formatting, etc. of content can really affect a design concept. Our intro sections are a great example. Our hope was all of them would have a title and a succinct sub-heading description with some instances of a short description paragraph. But in forklifting most content doesn't have a short description to use as a subheading which makes the style seem inconsistent. I think the hero's and intros being a first impression could really benefit from more consistency (as you mentioned) in the content format.

CTA -- UX

Also, looking forward to hearing some more insight on the UX intention of the CTA differences between the hero styles. The guidance seems like it would be helpful as we refine styles so we can think about specific use cases.

[nataliafitzgerald]

In working on the KBYO landing page with @danny8000 I was able to see the hero graphic standards specified above within the browser. Seeing this at desktop size, the 300px height felt quite tall and the H2 text for the subhead felt large. Have other designers had that experience? @caheberer @stephanieosan @klocraft So, I tried another option for the purpose of experimentation. I'd love to hear what you think @stephanieosan and @huetingj

Device width: 1290-767

This is the approach I posted initially. The content fits well in the space but I am worried about how large the subhead text and the box height when viewed on a desktop computer. It looks fine on a laptop.

Headline in H1 (34px), Subhead in H2 (26px)

Here's an alternate approach trying out H3 for the subhead and reducing the height to 270. This means that the hero takes up less vertical real estate. There's also a little more space for content.

Headline in H1 (34px), Subhead in H3 (22px)

I had to create layouts at different widths for this project so I took an initial stab at exploring this (I have not tested this out on other use cases).

Device width: 768-321

Headline in H2 (26px), Subhead in H4 (18px)

Device width: 322 and below

Headline in H2 (34px), Subhead in H4 (18px)

One thing I noticed is that for the hero graphic, the 1290 to 767 range is too broad which comes to play at the landscape tablet size. It is beneficial to break to the 768-321 specs a lot sooner. So, that's another item to discuss (but I know we have a lot in flux or becoming standardized right now with breakpoints so perhaps this is already being addressed).

Device width: 322 and below

Headline in H2 (34px), Subhead in H4 (18px)

I have posted my illustrator as well as full size PNGs here (if there is a better folder, let me know @stephanieosan @huetingj
https://drive.google.com/a/cfpb.gov/folderview?id=0B3epifaWXQGRfklvdXAyOEhUS2k3X3k2Z3JhT3VYTjltUW9yd1NBQXdoZFc5aXVkaklRTVk&usp=sharing

Adding @Scotchester

[jenn-franklin]

@nataliafitzgerald and I discussed hero dimensions on Wednesday, and the OaH team discussed them today. We want to look at the design in code and tweak there as we write the guidelines. Here are the details.

Desktop

Examples

Notes

- Hero is 270px in height - Text spans eight columns, is 60px from left edge, is 45px from top edge, is left- and top-aligned (we are not vertically aligning the text because it's too much technical workaround) - Illustration is 180px in height, centered within four columns - Header is H1, subhead is H3 and starts 15px underneath the header - CTA is a Pacific blue link at 16pt and 15px below the subhead. Can be used to highlight something such as a tool. - A Pacific blue primary button 15px below the subhead can be used for an action (such as submitting a complaint).

Tablet

Examples

Notes

- H1/H3 becomes H2/H4 - Text is 30px from left edge - Text and illustration are 30px from top - Text spans eight columns, illustration is centered within four columns

Mobile

Examples

Notes

- H2/H4 - Text is 30px from top, illustration is 30px below text, color background ends 30px below illustration

Here is our exploration of how a photo or video could fit into the hero. Because we don't see any use cases for this right now, we are not going to write it into the design manual at this time.

At 1290px

Notes

- Text spans seven columns, video/photo spans five and bleeds

At 768px

Notes

- Text spans seven columns, video/photo spans five and bleeds

At 768px

[duelj]

Couple of questions come to mind:

Is there any more background to making the hero so short other than, "[s]eeing this at desktop size, the 300px height felt quite tall..."

I ask for couple of reasons, the first we are finding that as we look to a hero acting as an introduction to a page it has to bear the weight of the introduction section that we were using previously. From the content end there is a concern of whether the hero will offer enough real-estate to effectively introduce users to a page. But we have been trying to decide if pages should have both a hero and an intro section since they serve similar purposes with different levels of emphasis.

As I was looking I could not find many examples of websites (including those that we reference for inspiration) having hero heights of below 300px. The trend seems to be moving toward larger, more expansive heroes and relying on the user to be comfortable scrolling.

Energy	DOI	Wellington	Whitehouse	Politico

At what width do the heading levels drop a size? When this happens do the rest of the page's headings follow this pattern?

In V1 after we worked on simplifying out breakpoints we have heading levels drop one level (for h1-h3, h4-6 remain the same) at the 599px width breakpoint. This also happens to be when we change to mobile links assuming at this screen size most devices will likely be touch input based. This pattern worked well for us, we dropped the heading size to allow for better line lengths on smaller screens across the page. I wondered if this was something that had been considered in on the above hero explorations and at what width the heading size actually drops (or is it at 768px)?

What was the thinking behind changing the text spacing size in the hero format?

Since we have been working to establish web header spacing, I was curious why the H1 & H2 in the hero use 15px rather than the 30px being discussed in the DM? Is this the only place this is expected to happen?

In the examples above the CTA is mentioned but not shown. Was this intentional or had those examples not been explored yet? Would the hero's height remain the same if a link CTA were included with its spacing and all?

[jenn-franklin]

Good thoughts @duelj! Looking at the 15px spacing specifically— @nataliafitzgerald do you have thoughts about this regarding using 15px instead of 30px after an H1 as defined in the design manual?

[jenn-franklin]

Here it is with 30px spacing

With 30px spacing, it'd serve us better to change the hero back to 300px to ensure enough space for text.

[jenn-franklin]

My take is to have it as 30px so as not to break from the design manual and other H1/H3 paragraphs.

[jenn-franklin]

We definitely questioned height, too. I think the homepage should have a large hero. Could see a hero relationship like airbnb has on some of its pages.

Homepage

Second-level page

[jenn-franklin]

@nataliafitzgerald and @benguhin, can you please review? thank you!

Style at desktop size

Spacing

- Total height is 285px. - Top and bottom margins are 45px. In the case that there is minimal text and/or not a CTA, the designer may choose to add 15px padding at the top (making 60px total) to make the text appear more centered. - Left and right margins are 60px.

Color

- Full-width colored background with black text and standard Pacific blue link style. Text and links must be accessible on background.

Text

- No breadcrumb should appear in or above the hero. - Text spans seven columns. - Text is left- and top-aligned. - Headline is H1 and no longer than two lines. - Body copy is H3, begins 30px below headline and is no longer than three lines. - A CTA link may be used and should be 16pt, Pacific blue and appear 30px below body copy. - A CTA button may be used, should be primary button size/style and should appear 30px below body copy.

Visual

- Illustration is 195px in height, centered within five columns to the right of the text area and does not bleed. - Illustration is simple in style but not minimal.

Style at tablet size

Changes in style

- Top and bottom margins are 30px. - Left and right margins are 30px. - Total height is flexible. - Illustration is vertically centered.

Style at mobile size

Changes in style

- Left and right margins are 15px. - Illustration is 30px below copy and spans width (to 15px margins).

[jenn-franklin]

Hey, @nataliafitzgerald and @benguhin! Any chance you might be able to check this out today? Thanks!

[stephanieosan]

Design manual page version of this here: https://stephanieosan.github.io/design-manual/ui-toolkit/heroes.html

[nataliafitzgerald]

I met with @huetingj this afternoon to go over the FCM. She will sum up what we discussed and add that to this issue. We identified some open questions and made some adjustments. We should be getting close.

[jenn-franklin]

We submitted pull requests to the design manual and capital framework with the following designs.

Desktop

Tablet

Mobile

Changes and considerations since my last post

- Links are underlined. They continue not to include an arrow. - The background and link colors reflect the new values in https://github.com//issues/327 - The header size drops at 600px. @nataliafitzgerald Dropping the size for tablet is something I'm exploring further.

[stephanieosan]

Pull request here: #362

[mebates]

@huetingj @stephanieosan - I'm seeing source files for hero graphics in two places on Drive. Which one is correct (and can we delete the other?).

Google Drive/Brand 2.0/Templates/Web/Hero graphic
or
Google Drive/Brand 2.0/Templates/Web/Website templates/consumerfinance.gov/New patterns

[mebates]

Hey team - @nataliafitzgerald @huetingj @stephanieosan : I'm starting to work on a new hero for the Tax Insert webpage. We won't have a call to action or link in the hero, so I'm wondering how to use the space. Does this look right to you?

[stephanieosan]

@huetingj What's the latest on how the spacing ultimately got coded up?

cc: @jimmynotjim @virginiacc

[jenn-franklin]

@mebates @stephanieosan we ended up vertically centering the text!

[nataliafitzgerald]

I didn't see an answer to @mebates question above about the multiple source files in different locations. I used my best judgement and moved the "Google Drive/Brand 2.0/Templates/Web/Hero graphic" into the "Previous versions" folder within "Google Drive/Brand 2.0/Templates/Web/Website templates/consumerfinance.gov/New patterns".

As far as I can tell the official source file is: https://drive.google.com/a/cfpb.gov/file/d/0B0w0ULKKFAtgUnpZNDY0R1RVRUk/view?usp=sharing. I think it would be safe to delete the previous version at this point but I'll want the green light from @huetingj.

[nataliafitzgerald]

What's the status of getting this into the Design Manual?

[jenn-franklin]

Here is the final file: https://drive.google.com/a/cfpb.gov/file/d/0B0w0ULKKFAtgMVZvVzhuQ29BODA/view?usp=sharing
(Google Drive/Brand 2.0/Templates/Web/Website templates/consumerfinance.gov/New patterns)

The DM page had been in design-manual master, but I just pulled it to my repo to update the spacing after paragraph headings to be 15px, reflecting the new standards. Here is the page: https://huetingj.github.io/design-manual/ui-toolkit/heroes.html @nataliafitzgerald feel free to give it a glance. If all looks good, I'll submit a pull request today. Just a note that the content structure does not follow any guidelines. When the UX team finalizes the content approach, I'll rework the page using those standards and submit a new pull request. Thanks!

[jenn-franklin]

Pull request here: #384

[Scotchester]

Merged. Any reservations about adding these pages to the navigation at this time?

[jenn-franklin]

Thank you! I don't have any reservations.

[jenn-franklin]

Scratch that— I'm going to follow up with @jimmynotjim to double check that everything is good to go. Will post again here when ready.

[jimmynotjim]

We're using these from Capital Framework in cfgov-refresh, and they seem to be pretty solid. I think we're ok to officially publish them.

[jenn-franklin]

Ok, sounds good. Thanks @jimmynotjim!