New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Looking for feedback on v1 Look + Feel Mood Boards #80

Closed
angel opened this Issue Jun 24, 2015 · 10 comments

Comments

Projects
None yet
8 participants
@angel
Contributor

angel commented Jun 24, 2015

Hey All!

Here are 3 mood boards that we have come up with for the look and feel of the the pattern library. I would love everyone's feedback and thoughts on them. Thanks for your help!
#1. Modern American

Bright saturated colors, blocks of color, wider bold sans-serif fonts for headings

mood-board-modern-american
#2. Inspiring and Empowering

Colors rooted in old American propaganda, papers, and stamps, more airy feel, bold condensed sans-serif or serif fonts for headings

mood-board-inspiring-empowering
#3. Clean and Classic

Classic colors, more minimalist feel, traditional serif fonts for headings and body

mood-board-clean-classic

Don't forget to click on the image to see a larger version.

@mollieru mollieru changed the title from Mood Boards to v1 Look + Feel Mood Boards Jun 25, 2015

@mollieru mollieru changed the title from v1 Look + Feel Mood Boards to Looking for feedback on v1 Look + Feel Mood Boards Jun 25, 2015

@cew821

This comment has been minimized.

Show comment
Hide comment
@cew821

cew821 Jun 26, 2015

Contributor

I would love to see some more of the mood board examples come from services, instead of content sites. It's a bit hard to tell how the various proposals would impact something like a form or other transaction-oriented interaction from these mood boards.

That said, I think I have a slight preference for the first example, then 3, then 2.

Contributor

cew821 commented Jun 26, 2015

I would love to see some more of the mood board examples come from services, instead of content sites. It's a bit hard to tell how the various proposals would impact something like a form or other transaction-oriented interaction from these mood boards.

That said, I think I have a slight preference for the first example, then 3, then 2.

@mebates

This comment has been minimized.

Show comment
Hide comment
@mebates

mebates Jun 29, 2015

@angel This is the look and feel of the pattern library itself, right? Not the standards we're hoping other sites will use. (I remember @mollieru talking about providing a few options for that. Though it would make sense if this look/feel were one option). If so, I prefer the modern american look. Just be super-aware of 508 compliant type with thin fonts and light backgrounds. I would look at the 508 type/color field relationships before committing to colors.

mebates commented Jun 29, 2015

@angel This is the look and feel of the pattern library itself, right? Not the standards we're hoping other sites will use. (I remember @mollieru talking about providing a few options for that. Though it would make sense if this look/feel were one option). If so, I prefer the modern american look. Just be super-aware of 508 compliant type with thin fonts and light backgrounds. I would look at the 508 type/color field relationships before committing to colors.

@angel

This comment has been minimized.

Show comment
Hide comment
@angel

angel Jun 29, 2015

Contributor

@mebates yes, the latter! An option for the look and feel for the standards themselves. We will definitely be sure to pick 508 compliant colors as we narrow and refine the look and feel. If you have any favorite 508 resources please let me know! Thanks for your feedback!

Contributor

angel commented Jun 29, 2015

@mebates yes, the latter! An option for the look and feel for the standards themselves. We will definitely be sure to pick 508 compliant colors as we narrow and refine the look and feel. If you have any favorite 508 resources please let me know! Thanks for your feedback!

@CaliforniaKara

This comment has been minimized.

Show comment
Hide comment
@CaliforniaKara

CaliforniaKara Jun 30, 2015

Love how varied the different mood boards are! I dig the bold, confident nature of the fonts in #1, the aspirational, welcoming color scheme in #2, and the approachable nature of the images in #3.

If you think it'll help, here are the style tiles from PIF1 MyGov project: http://beta.presidentialinnovation.org/mygov/2012/11/05/style-tiles/ They're based on research done at Library of Congress and National Archives we did on how the federal government historically communicated with the people, and vice versa. You can click the image to see all 4 style tiles we created (the first 3, then the final).

CaliforniaKara commented Jun 30, 2015

Love how varied the different mood boards are! I dig the bold, confident nature of the fonts in #1, the aspirational, welcoming color scheme in #2, and the approachable nature of the images in #3.

If you think it'll help, here are the style tiles from PIF1 MyGov project: http://beta.presidentialinnovation.org/mygov/2012/11/05/style-tiles/ They're based on research done at Library of Congress and National Archives we did on how the federal government historically communicated with the people, and vice versa. You can click the image to see all 4 style tiles we created (the first 3, then the final).

@mollieru

This comment has been minimized.

Show comment
Hide comment
@mollieru

mollieru Jun 30, 2015

Contributor

Rad, thank you for sharing @CaliforniaKara!

Contributor

mollieru commented Jun 30, 2015

Rad, thank you for sharing @CaliforniaKara!

@mollieru

This comment has been minimized.

Show comment
Hide comment
@mollieru

mollieru Jul 3, 2015

Contributor

Transferring feedback from @mariamarrero from #127

"The mood boards contain very neat color palettes. Is the look and feel chosen only for the library or could these be choices for agencies to use? Some agencies may use colors that are similar, but not exactly, to meet internal color contrast requirements.

If this helps, a great color contrast tool that I always use to meet contrast requirements for foreground and backgrounds colors (text and graphics) is http://webaim.org/resources/contrastchecker/.

My favorite is the Modern American :) "

Contributor

mollieru commented Jul 3, 2015

Transferring feedback from @mariamarrero from #127

"The mood boards contain very neat color palettes. Is the look and feel chosen only for the library or could these be choices for agencies to use? Some agencies may use colors that are similar, but not exactly, to meet internal color contrast requirements.

If this helps, a great color contrast tool that I always use to meet contrast requirements for foreground and backgrounds colors (text and graphics) is http://webaim.org/resources/contrastchecker/.

My favorite is the Modern American :) "

@Scotchester

This comment has been minimized.

Show comment
Hide comment
@Scotchester

Scotchester Jul 4, 2015

The Modern American mood board resonates most with me right away, but it's more of an emotional response than a logical one. I do like the mid-century propaganda art source images for the inspiring and empowering board, but am not sure that it translates very well into a contemporary web design language.

👍 to @cew821's comment about wanting to see some more examples of services/transactions in these boards.

Re: Color contrast

While checking individual color pairs is great, I heartily recommend this whole-palette contrast evaluator tool, which lets you input all of the colors in your palette and evaluate each one against all of the others for acceptable contrast. The linked example shows how CFPB's current palette stacks up.

Scotchester commented Jul 4, 2015

The Modern American mood board resonates most with me right away, but it's more of an emotional response than a logical one. I do like the mid-century propaganda art source images for the inspiring and empowering board, but am not sure that it translates very well into a contemporary web design language.

👍 to @cew821's comment about wanting to see some more examples of services/transactions in these boards.

Re: Color contrast

While checking individual color pairs is great, I heartily recommend this whole-palette contrast evaluator tool, which lets you input all of the colors in your palette and evaluate each one against all of the others for acceptable contrast. The linked example shows how CFPB's current palette stacks up.

@maya

This comment has been minimized.

Show comment
Hide comment
@maya

maya Jul 7, 2015

Member

@Scotchester what a handy tool! Does CFPB follow AA (4.5:1) or AAA (7:1) color contrast ratios? What are we supporting?

Member

maya commented Jul 7, 2015

@Scotchester what a handy tool! Does CFPB follow AA (4.5:1) or AAA (7:1) color contrast ratios? What are we supporting?

@Scotchester

This comment has been minimized.

Show comment
Hide comment
@Scotchester

Scotchester Jul 7, 2015

Scotchester commented Jul 7, 2015

@carodew carodew closed this Jul 13, 2015

@carodew

This comment has been minimized.

Show comment
Hide comment
@carodew

carodew Jul 13, 2015

Contributor

Thanks for the feedback!

Contributor

carodew commented Jul 13, 2015

Thanks for the feedback!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment