Graphic Standards: Hero

nataliafitzgerald commented 9 years ago

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.

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

screen shot 2015-08-13 at 9 02 30 pm

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 https://github.com/cfpb/design-manual/issues/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 commented 9 years ago

@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 #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 commented 9 years ago

@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 https://github.com/cfpb/design-manual/issues/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: https://github.com/cfpb/design-manual/issues/337#issuecomment-131171901
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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

@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

screen shot 2015-09-11 at 2 38 50 pm

Examples

screen shot 2015-09-11 at 2 37 49 pm

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

screen shot 2015-09-11 at 2 37 54 pm

Examples

screen shot 2015-09-11 at 2 37 57 pm

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

screen shot 2015-09-10 at 11 44 41 pm

Examples

screen shot 2015-09-10 at 11 44 18 pm

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

screen shot 2015-09-10 at 11 49 03 pm

Notes

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

At 768px

screen shot 2015-09-10 at 11 50 43 pm

Notes

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

At 768px

screen shot 2015-09-10 at 11 52 19 pm

duelj commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

Here it is with 30px spacing

screen shot 2015-09-14 at 2 01 11 pm

screen shot 2015-09-14 at 2 01 23 pm

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

screen shot 2015-09-14 at 2 01 31 pm

screen shot 2015-09-14 at 2 01 48 pm

jenn-franklin commented 9 years ago

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

jenn-franklin commented 8 years ago

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 screen shot 2015-09-22 at 9 58 45 am

Second-level page screen shot 2015-09-22 at 10 03 28 am

jenn-franklin commented 8 years ago

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

Style at desktop size

hero_2 hero_1

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

tablet_2 tablet_1

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

mobile_2 mobile_1

Changes in style

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

jenn-franklin commented 8 years ago

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

stephanieosan commented 8 years ago

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

nataliafitzgerald commented 8 years ago

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 commented 8 years ago

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

Desktop

hero_desktop_1 hero_desktop_2

Tablet

hero_tablet_1 hero_tablet_2

Mobile

hero_mobile_1 hero_mobile_2

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/cfpb/design-manual/issues/327
The header size drops at 600px. @nataliafitzgerald Dropping the size for tablet is something I'm exploring further.

stephanieosan commented 8 years ago

Pull request here: https://github.com/cfpb/design-manual/pull/362

mebates commented 8 years ago

@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 commented 8 years ago

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?

screen shot 2015-12-08 at 10 32 20 am

stephanieosan commented 8 years ago

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

cc: @jimmynotjim @virginiacc

jenn-franklin commented 8 years ago

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

nataliafitzgerald commented 8 years ago

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 commented 8 years ago

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

jenn-franklin commented 8 years ago

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 commented 8 years ago

Pull request here: #384

Scotchester commented 8 years ago

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

jenn-franklin commented 8 years ago

Thank you! I don't have any reservations.

jenn-franklin commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

Ok, sounds good. Thanks @jimmynotjim!

cfpb / design-manual