Design Manual home page design updates

[mebates]

Related to #273, is the type size for the intro paragraph in the Design Manual too large? Originally, the design was for much shorter content, so it looked nicer paired with the illustration. Now it's just a huge block with lots of white space below the illustration. I would suggest moving it to the H4 (18px) at either Regular or Medium.

[Dnpizarro]

@mebates I would agree that it feels like too much text, especially at that size. Could I make a content suggestion with regards to that first paragraph. I think the 2nd paragraph really introduces the DM well, maybe if we eliminated the first paragraph and just kept the 2nd one I think that could solve part of the issue.

[stephanieosan]

I think the first paragraph gives context about why it's important and worthwhile to the CFPB and the American public that the manual exists, though. It's the intro you need if you're not familiar with the CFPB and the dev/design team.

But, I agree. Overall it's a lot of content for that size.

[Dnpizarro]

@mebates will jump on this task for March Sprint.

[mebates]

Here's what the page would look like with the introduction block of copy at the H4 specs (18 px, Avenir Next Medium):

I think that we would also need to fix the gutter between the text and the illustration; the gap is too wide right now.

[mebates]

@Scotchester Do you know why that gap appeared to get bigger? I was just playing around in Chrome's developer tools.

[Dnpizarro]

@mebates I would agree, the spacing is too wide. Are you getting the same results in other browsers?

[Scotchester]

This happens because we have set a max-width on paragraphs of 35em, to keep measure widths to readable lengths. I would recommend not changing that; perhaps we can increase/change the illustration?

Might be cool to pull in some of the stuff @duelj did for the Beta hero graphic.

[mebates]

Okay I'll take a look at alternate hero illustration and/or type options!

[mebates]

Hey @Scotchester - we don't have that 35 em guideline in the Design Manual. (Web typesetting > Line length) Should it be there? Should it be that strict?

Also, how does that guideline relate to the grid? (Not sure what kind of grid DM is built on as compared to other web products, just asking for clarification)

[Scotchester]

It's largely based on numbers found here: http://webtypography.net/2.1.2

Yes, it probably is worth mentioning in that section as the recommended way to set it in CSS. I do think it should be strict (though if the average character width is 0.5em, it could be bumped up to 36 or even 37, to set the max width closer to the recommended max of 75 characters), because it's a pretty long-held rule of typesetting. It doesn't relate to the grid directly at all. It just constrains the width of paragraphs in situations where the available width in the layout is greater than 35em. (Which is 35 * the value of font-size.)

[mebates]

I've made no progress on this! Sorry @Dnpizarro

[Dnpizarro]

@mebates do you think we can make progress on this issue for the June Sprint? We can backlog this as well if that works.

[mebates]

Making progress on this one :open_mouth: ! Using some elements from the Beta illustration.

All intro type at 18 px, white background:

All intro type at 18 px, teal background (really tall hero, for us, with way too much text):

Standard 350 px hero with first graph at 22 px. Second paragraph below here but I'm not quite sure what to do with it:

[KimberlyMunoz]

Hey @mebates!

What was the final decision on this? We have some really content-heavy pages that would be affected by this and want to know if we can implement it.

Thanks!

[elizbond]

Feedback from Working Session

Intro before the "The Design Manual is an open-source..." Sidebar highlighting the information on how to engage

[duelj]

Thoughts during our working session (7/8/2015)

I had some thoughts around how the homepage might be rearranged if it were a landing page in the FJ mould. It would be nice to feature the three main sections of the design manual on the home page, especially if the hero is just an introduction, just an additional thought, I know it may not be feasible because it would require additional content.

[mebates]

Hey all - Here's an update to the Design Manual homepage design per our discussion last week, and @duelj's suggestion above. I removed our 'inspiration' section because I feel like it's kind of irrelevant now. The 'news' module would be sometime in the future.

[nataliafitzgerald]

This looks good!

Comments/questions/feedback:

• Can you narrow the width of the body text? The line lengths are feeling too long. Same feedback on the intro text block "The Design Manual is an open-source...".
• The space under the "What it includes" and Get involved" headers is too big. It looks perfectly centered between the paragraph before and the paragraph after. This is visually confusing. Not sure if this is the way it's coded or just how it's set up in your ai file.
• The space after the footer bar headers is too big as well "open source" and "a note about our standards".

[Scotchester]

Agree with @nataliafitzgerald on the measure width :)

The "What it includes" and "Get involved" headers should have 60px top margin, I think. That would solve Natalia's second point.

The footer header spacing is an existing bug, I think. I can take care of that in the course of this update.

I'd like to see another take with a white background in the hero area. I don't totally love the idea of using a tint of one of our secondary colors as the main use of color on the website created to showcase our branding, know what I mean? Might be worth looking at the two lighter CFPB Greens, too.

[nataliafitzgerald]

@Scotchester - As beautiful as the light teal tint looks, I support trying out white and the lighter greens to see if they may work. Brand always comes first.

[mebates]

I think the white is going to be tricky with the left gray sidebar. I like the light green and fixed the spacing:

[Scotchester]

Looks awesome! Let's roll with that.

[mebates]

I probably need to tweak the hero a bit to match the new hero guidelines.

[nataliafitzgerald]

@mebates - As you work to update the hero, we will need to cut down the subheading content so that it is no more than 3 lines at desktop or 185 maximum character count (including spaces). https://cfpb.github.io/design-manual/ui-toolkit/heroes.html

[keelerr]

I noticed the content was rewritten sometime last year... Is this what we're going forward with? Is there a desire to change anything else on the page beyond the hero?

[kurzn]

We will need to update the "what it includes" content to match the new IA once that is in place. What is the timeframe for getting the new homepage up? I'm guessing it will be ready before the new IA. So the rest of the page could get updated content, and then the "what it includes" can be updated once the new IA is pushed (assuming we want to keep that section at all).

I'm happy to take a stab at new content if need be.

Thoughts?

[mebates]

Here's the latest, with the hero updated to match standards. I tweaked the text slightly to get it to 185 characters. @keelerr and @kurzn I'm not sure if you're requesting further content changes from here. This should launch before IA changes, so let's just plan to update it after you make those.

One other thing I think we should update is in the footer; we give old examples. Can we point to Owning a Home, Planning for Retirement and eRegs?

[kurzn]

@mebates we can update it all at once after new IA push. Seems like the fastest option to get this up.

[kurzn]

@caheberer is this still in the cue to get updated?

[caheberer]

Yes, @Scotchester still has it (and far too many other things) on his plate.