cfpb / design-manual Goto Github PK

In the "More information" section, what are the URLs the bracketed words are supposed link to?

• Illustration page
• Beams pattern page

The green bar appears when some pages are selected, but not others. (Seems fine on hover though)

Needs to be fixed for Color and Beam Pattern.

Doesn't appear when on the Color page:

Appears fine when on the Logo page:

At the CFPB, we have three different levels of iconography and illustration that we use throughout our web and print experiences. In the fall of 2013, the need for an iconography set to represent the Office of Servicemembers Affairs became apparent. The current state of the set is listed below.

Illustration

Isoscon

Business owner feedback is still pending, are there any revisions?

Minicon

Current feedback - try a smaller stroke weight in the interior of the dogtag.

The current README doesn't have the proper instructions for installing dependencies and using Grunt.

Hey team, here is a pass at the wallet. Let me know your thoughts. I tried small variations in the spine and the stitching around the i.d. slot.

The version below has horizontal lines in the spine to add detail. Seems like it may not be necessary but wanted to share this option.

And the version below removes the stitching around the i.d. slot. This version also removes the dark imprint of the credit card.

I'm checking out the Design Manual in Chrome and it looks like we have that 8px margin around the body again.

I compared this pull request to the current code and they are consistent. Is it still not importing normalize.css correctly?

@Scotchester Would you mind taking a look when you have a minute, since you resolved this issue the last time? Thanks!

When you have a chance, could you add this into the Isocons Asset Library, per @Scotchester's call out in PR 93? Thanks lady! :)

At the CFPB, we have three different levels of iconography and illustration that we use throughout our web and print experiences. With Getting out of Debt acting as a prominent consumer guide, the need for an iconography set was brought to our attention. This iconography set is not to be confused with Debt Collection. This set specifically addresses the various ways a consumer can get out of debt. The current state of the set is listed below.

Illustration

This is currently not complex enough for a consumer-facing illustration.

Isocon

Needed

Minicon

http://cfpb.github.io/design-manual/identity/typography.html

• Fix figures displaying HTML bug (FEWD task)
• Set max-width for ps
• Add visual assets from Style Guide (content task)
  • Replace typesetting image placeholder
• Style type hierarchy details like color swatch detail lists (FEWD task)
• reducing padding below the rows of example text
• adding some letter-spacing to give the characters more breathing room

Here are a couple of concepts for the safe. I feel like the door and lock style kinda comes down to preference, there are a million ways we could style it but these were a couple that I liked. I didn't know if there were any specifics that we should consider for the style, I assumed a closed door was mainly what we were looking for.

Here are my initial thoughts for the car to be used in industry facing graphics. I first started below with the restricted green color palette to keep within the style we are developing.

I received feedback from @mebates to try a few tweaks. Her feedback was that the...

• wheels seem a bit small and the spokes a bit too prominent
• main bulk of car seems a bit high or thick, compared to the windows section
• Like the shapes you're using for windows and headlights.
• Like the simple shading back to front

I took a second pass at incorporating her feedback and those updates are below. The wheels are enlarged but I added detail to the spokes after looking throughout the illustration style and noticing that the tires could use more fidelity to fall in line with everything else.

Identity:
Remove 'Brand Guidelines' (I'm not sure what this is)
Remove the word 'principles' from Color and Typography. All of these have principles, right? I think this was a remnant of when we had color and typography repeated in the UI section.

UI elements:
Remove 'Markdown' and 'HTML Elements' and 'Typography' (appears in Identity section)
Hide 'Grid and layout'. Not currently on the sitemap but could come up later

Would love for @dezzie and @stephanieosan to confirm that they agree with these requests. Thanks!

Explain why and how we're using it

On a page like Design Principles, the H2 style is so far above the line below it that it visually links with the content above it. Can we fix this?

• Recut Desktop and Mobile scale images without white space (@ohsk)
• Set min-width or min-height to Web scale and Print scale logo assets so they do not scale down with browser width (@iuloshi)
• Create new style for image details (Avenir, no bullets)

The primary nav (Overview, Guides...) should be 18 px, not 20.

I added a css class to the current, or "active" header. I just added a background color to show that the class is working. We will need a comp for the active state.

Here were some different options for the calendar illustration that I put together. It's first use will be in Mollie's Ideas 42 video so I am not sure if there will be specific needs because of that or not.

http://cfpb.github.io/design-manual/identity/isocons.html

• Build out Asset Library (4 columns with rules)

At the CFPB, we have three different levels of iconography and illustration that we use throughout our web and print experiences. In the spring of 2014, the need for an iconography set to represent the Office of Older Americans became apparent. The current state of the set is listed below.

Illustration

Isoscon

Minicon

When viewed as a set, there is an obvious disconnect between the icons.

Watching the car #46 , wallet #48 and safe #44 illustrations shape up has me thinking about the way we're using shadows and highlights in our illustrations. Do we have any guidelines (or thoughts) about when and how to use those yet?

Shadows-related questions

• For shadows, do all of our illustrations have a consistent light source? If so, what is it?
• When are shadows implemented, just when elements sit on top of one another (which is how they're being used in the wallet) or within objects too? I'm looking at the shadows on those tires (unless we're considering those highlights?), and they're creating definition of the rounded tires itself, versus in the wallet, the pocket of the wallet casts a shadow on the dollar? Also, the closed wallet isn't casting a shadow on the dollar. And nothing on the purse is casting a shadow. What's our thinking about that?

Highlight/Reflection questions

• Have we defined what gets a reflection? Just certain types of materials? Plastics, metals, glass, etc?
  
  
  

Then there's also where we use two-tones to create dimension.

Not sure if those should be considered shadows or highlights or a separate thing entirely.
On the safe:

I'm not necessarily saying we need to get into this much detail with our definition of standards and illustration style, since overall, these illustrations still feel like a set, but it does seem like we're beginning to use our shadows and highlights in different types of ways.

Main nav needs responsive styling

Documenting minor stylistic tweaks to be made to the Photography page prior to replicating to other sections of the Design Manual.

Type hierarchy:

• <h1 class="page-title"> should be set to font-family: "Avenir Next", to match our H1 standards.
• <h2>Stylistic guidelines</h2> should be set to font-family: "Avenir Next", to match our H2 standards.

Horizontal rule colors:

• <hr> below anchor links at the top should be Pacific 20% (#CCE3F5)
• <hr> between content (ie. between photos) should be Gray 20% (#E3E4E5)

Content sizing / spacing:

• Increase spacing between <ul class="toc"> anchor links and blue horizontal rule below to 20px.
• Make feature image same number of columns wide as the section descriptions, like the red tints here indicate. Adjust intro paragraph width to match the gold tint.
• 30 px vertical spacing between section title and horizontal rule, and 20 px vertical spacing between horizontal rules and section content, as shown here.

Hopefully Brad Frost's workshop today will have some insight into how to make those tables responsive! Also relates to Minicons page > Asset Library tables.

We should settle on a format for all elements in the UI toolkit (why don't we just call it a pattern library?).

Blatantly plagiarizing from the design pattern library panel at SXSW, one format could be:
-Name
-Description
-When/where to use
-Design rationale
-Examples & Variations
-Open issues

I think the open issues element is pretty genius, though if we stick with Git, issues may make more sense.

Some other models we can look at:
Yahoo
eBay
Bootstrap

I think this is worth getting input from all disciplines on the design team (FEWD, UX, Graphic Design).

http://cfpb.github.io/design-manual/identity/minicons.html

• Build out Asset Library (FEWD)
• Add scaling and color image examples (content task)

Developing copy for home page and interior landing pages (Guides, Identity, UI) on this wiki: https://github.com/cfpb/design-manual/wiki/Overview-Explanatory-content

Copy is loaded on live site now for home page and Identity. Need some help to craft words for 'Guides' and 'UI Toolkit', please edit the wiki if you have some ideas, or comment below.

Two options for the home page design, one more complex with a feed of recent updates and the other with a simple image.

grunt less successfully compiles CSS, but grunt watch runs into this error:

Do I need to reinstall grunt?

cc: @ascott1 @Scotchester

It is under the wrong category. @dezzie is updating the Site Map on the ReadMe to account for this.

The icon in the expandable demo is MIA

Hey guys! As a heads up, I updated the layout of the Video page. Looks like we need some more example screenshots for the Stylistic Guidelines categories. There are placeholders for now.

http://cfpb.github.io/design-manual/identity/video.html

Thanks! @mebates @stephanieosan @ohsk

Need to update the order of the sections in Identity to reflect the sequence found in the Style Guide 2.0:

• Logo
• Color
• Typography
• Minicons
• Isocons
• Illustration
• Beam pattern
• Photography
• Video

At the CFPB, we have three different levels of iconography and illustration that we use throughout our web and print experiences. With upcoming project plans for Debt Collection, the need for an iconography set has been brought to our attention. The current state of the set is listed below.

Illustration

Needed

Isocon

Minicon

Questions to consider:

How do these relate? What are the commonalities across the set? Does it work?

Per Capital Framework docs, it doesn't look like the double arrow icons have made it into the minicon font yet. Is that a later enhancement @ohsk?

http://cfpb.github.io/design-manual/identity/logo.html

Create three column layout (the latter two for images)

Create Table repo, use digital product guide as a starting point. There is a tables less file in the repo as well.

Our videos often depict a person speaking in front of a stark white backdrop. It's clean, modern, and in keeping with our visual identity. That said, when these videos are placed on our website with the same pure white background color, the subjects feel like video overlays (think: Clippy). This could be fixed by adding a 1px border to all videos.

Here's a mockup of our mortgages page.

Before:

After:

I need to figure out if we need to use legacssy and autoprefixer. These are commonly used in the captial framework grunt files.

If I go to the "Guides" section of the tool and click on "Accessible interfaces", the left hand nav should have a green bar to the left of the words "Accessible interfaces". But, it's missing. My suspicion is this is somehow related to the fact that "Accessible interfaces" wraps to two lines (it's the only page that this happens for, and it's the only page that has a two-lined title).

Accessible interfaces page:

How it should work (and currently works on all other pages):

Here is a first attempt at the purse, I will do some other options but I wanted to see how people felt about using the stitching pattern strokes or if I should abandon that approach. This also seems like we would stylize the shoulder strap like this but the radius of the curves have to be more substantial for the thickness of the strap to seem right. Interested to hear your thoughts.

This content is already written in our brand guidelines (pgs 6 & 7) and good-to-go. Someone just needs to add it.

Using this page as an example:
http://cfpb.github.io/design-manual/identity/illustration.html

Eliminate 'Identity' from above the side nav; no title needed there.
Eliminate the work 'Identity' from 'Identity: Illustration'

The only signal for the section should be the primary nav.

This will run the build & test tasks
This should be the default task

I started to wire this up with grunt copy scripts and jekyll includes. Once the Capital Framework demo page are complete, then we can re-run bower to grab the latest demo code.

During the latest regroup, our illustration guidelines went through a tedious exploration. As we began updating our illustration library to include the latest guidelines, we recognized the need for a few financial items to add to our assets for a fully functioning library. Each item will be addressed in its own issue.

High priority

1. Car @ajbush [https://github.com//issues/46]
2. Calendar @duelj [https://github.com//issues/43]
3. Purse @duelj [https://github.com//issues/45]
4. Wallet (womens / men’s) (@ajbush) [https://github.com//issues/48]
5. House keys @ohsk
6. Car keys @ohsk
7. Safe @duelj [https://github.com//issues/44]
8. Getting out of debt [https://github.com//issues/40]
9. Desktop computer [https://github.com//issues/207]

Backlog

1. Debt collection [https://github.com//issues/39]
2. Folded documents
3. Pay stubs
4. Retirement [https://github.com//issues/47]