Images for project page tiles

[awfrancisco]

Need images

• cloud.gov
  • logo
• Military OneSource
  • military family
• Labor Wage and Hour
• Micro-purchase
• Treasury new ten
  • cash money
• Web Design Standards
  • firework and flag

Icons that would be good to replace

• Agile BPA
• CALC
  • graph from homepage
  • image from slide 5, 6, or 9 in this deck
• eRegs
  • header image from here
• C2
• betaFEC

[elainekamlley]

Working through these and will check off when they are done.

Need image

• [x] cloud.gov - [ ] Military OneSource
• [x] Labor Wage and Hour - [ ] Micro-purchase - [x] Treasury new ten
• [x] Web Design Standards
• striked out since they were removed from the web page in a different issue page

Icons that would be good to replace

• [ ] Agile BPA
• [x] CALC
• [x] eRegs
• [x] C2
• [x] betaFEC

[elainekamlley]

Waiting till #2620 is done to add images

[ShannonBad]

Logos - DataAct CloudGov Federalist.zip

This is a sketched preview of the logos on three different background colors, sharing so we can discuss them.

[elainekamlley]

Hey @ShannonBad, thanks for all your work on this! Discussed it with the team and we feel like the light background is the best option for contrast.

[ShannonBad]

Hi @elainekamlley, OK that sounds good. Do you need me to set up the files with background colors? Right now the files are only SVGs of the logos, on transparency. I have more icon/logos to upload here too - which I will do ASAP.

[elainekamlley]

@ShannonBad that would be great if you could set up those files. Another thought we talked about is setting up the logos with the light grey color: #f1f1f1. We don't want the image to blend in with the body of the page. What do you think?

Looking forward to seeing the others

[ShannonBad]

FILES: Logos - DataAct CloudGov Federalist 2.zip

I think the Federalist logo looks better on the grey background (#f1f1f1). I like the Data Act logo on the darker blue (because it stands out more) and the Cloud.Gov on white background (because of the cutout star) but might be too busy to have too many colors as the background? Let me know if you have any problems opening this zip folder.

[ShannonBad]

These are just a few ideas for the logo for Web Design Standards, they can be in any color. I am happy to make revisions based on your feedback.

Based on a conversation with Elaine, I have cropped the hero image from the Web Design Standards webpage and added it to the correct size for our web needs. File is attached here: Web Design Standards.zip

[ShannonBad]

A few ideas for the logo for Labor and Wage.

[elainekamlley]

@ShannonBad great work! Here's some of our thoughts:

1. Could you incorporate a web design standards image to the icon you made? I'll send that image to you directly
2. Labor and wage: We like the clock and coin one. Let's try experimenting with WDS colors for the clock and the coin since we know those are 508 compatible. Here are they colors
3. For the logo images, lets try it out! I can add the images to the project pages and we can see how they look overall. We can see what they look like with different backgrounds and how they look with all the same grey background. We can review that in next week's co working session.

[ShannonBad]

@elainekamlley Thanks for the feedback I will work on those updates. As well as work the other logos on this list, which are a little bit more difficult since they're more abstract. I also started playing around with the three "Partner with 18F" icons we had talked about - is that a different GitHub project page?

Re: 2. Colors - I will make those updates with only WDS colors so you can check it out, most of the colors in this version are from the WDS, with some complementary colors or contrasting colors added in. I thought because it's a logo and not actually the website itself, and since the other existing logos don't have the same colors as the WDS perhaps it wasn't an issue?

[ShannonBad]

Here's the WDS colors (in shades of blues and grey) of Labor and Wage!

I cleaned it up a little more and made sure it was web ready. This is the icon SVG file. Labor & Wage V1 Blues.svg.zip

[ShannonBad]

This is an example of adding a scrim of 30% of the grey color (#f1f1f1) on the left side photo & no scrim on the right side photo --- the grey color could be changed based on what is decided for the background colors for the icons, but the idea being by adding a scrim to the photo images we are making the page as a whole look more cohesive.

And this image to show what that might look like in a larger context of the page.

Here are some examples of WDS shades of blue, with various scrim percentages.

[ShannonBad]

One idea I had was for the projects that do not have any obvious icons (also for future projects with the same issues) to add in a pattern that is different for each post but still cohesive as a whole together. The colors in the pattern will be WDS and tie in with the icons themselves. The example here is of a sort of "network" pattern image - on the right side V4 we have the pattern with a white background, and on the left side V5 the pattern is in a grey (#f1f1f1) background.

[ShannonBad]

This is another version of the same pattern idea (as the previous post), however these "abstract" patterns are inspired by the EPA Graphics Standards System and the NASA Graphics Standards of the 1970s but using the WDS colors.