cfpb / design-manual

⚠️ THIS REPO IS DEPRECATED ⚠️ A set of design principles and standards for the Consumer Financial Protection Bureau.
https://cfpb.github.io/design-manual/
Creative Commons Zero v1.0 Universal
98 stars 71 forks source link

American Flag #302

Closed designlanguage closed 9 years ago

designlanguage commented 9 years ago

@nataliaf pointed out that the American flag isn't in our illustration library, so let's see if we can change that. There is this flag that had been used before in a couple instances:

293ab6e4-d892-11e4-8d56-c5d440c218d5

We wanted to update the flag to the correct number of stars and stripes, and also use our star minicon for the stars. So here is where we landed:

12b35d7a-d894-11e4-949e-b7dced4e3358

We also have this version of the flag that isn't in our library. If we go forward with this new flag, this would also have to be updated.

201503_cfpb_how-small-businesses-play-a-role-in-the-rulemaking-process

Should we update our library to include this flag as an illustration?

Dnpizarro commented 9 years ago

I would agree with @designlanguage that having both versions of the flag (outdoor & indoor) would be good additions to our illustration library. I don't think that our rounded star is working as nicely as the pointed stars. I think that for this illustration we can be closer to the real thing, meaning sticking with the original pointed stars, versus making it look more illustrated.

ajbush commented 9 years ago

Thanks for doing this @designlanguage I'm in need of these for something we're working on.

I'd vote to use the normal pointed stars as well.

duelj commented 9 years ago

I would advocate for keeping the standard star version as the rounded star seems to get kinda "muddy" if the flag is housed in a 200px circle (like it is used on the you have a right page). This was a screenshot taken at actual size on citrix (which views at the lower resolution). I think not having the rounded corners on all the stars might make for a crisper image.

screen shot 2015-04-23 at 2 30 14 pm

nataliafitzgerald commented 9 years ago

@duelj - Could you post what the current flag illustration looks like when viewed through Citrix - for comparison? Regardless of where we land on the star style, we will still require the update to the number of stars and stripes.

duelj commented 9 years ago

@nataliafitzgerald I don't have an image of your flag illustration with the correct number of stripes and stars in a format without the rounded stars so I'm afraid I can't share that. But I agree it would be nice to see. I just took a screen shot of the current illustration at http://www.consumerfinance.gov/you-have-the-right/

Dnpizarro commented 9 years ago

@designlanguage are you working on the updated file with the correct number of stars? @duelj not sure if it was you that created the draping flag version in George's first post, but if so could you share that file with him so that he can update that version as well.

@nataliafitzgerald do you have any further thoughts on the star styling (pointed vs rounded)?

duelj commented 9 years ago

@Dnpizarro Just sent some flag files to @designlanguage which contains the draping version.

Dnpizarro commented 9 years ago

Thanks @duelj for forwarding those files.

designlanguage commented 9 years ago

The reason we wanted to try a flag with rounded stars is because many of the details in our other illustrations are rounded. Here's just a sampling:

screen shot 2015-05-05 at 9 55 35 am

The calculator buttons and screen are rounded, so is text on the cellphone and dog tags; the dollar sign on the bill is also rounded. I haven't found many sharp elements in our illustrations (edges beyond 90 degrees), so rounded stars on the flag feel more harmonious with other illustrations to me.

Here's the 50 pointed-star flag:

screen shot 2015-05-05 at 9 25 22 am

Justin brought up a good point with low resolutions. The rounded stars read more as circles when they're lo-res. In a 200 pixel circle, the pointed star flag reads a little better, but not significantly:

screen shot 2015-05-05 at 9 25 09 am

I thought finding a middle ground might solve the lo-res issue. In other words, having the stars be a bit rounded, but not as dramatically as we first showed. Here are slightly rounded stars:

screen shot 2015-05-05 at 10 36 55 am

And here it is in lo-res:

screen shot 2015-05-05 at 10 39 13 am

What do you all think? What are the merits of pointed stars vs rounded?

duelj commented 9 years ago

Yea, rad. If everyone likes the rounded corners that's cool, figured not everyone is blessed by the retina displays like we are and thought the hard edges would render better. In your low res examples I think the rounded stars might actually view better at smaller sizes, the pixel hinting seems to make larger white shapes which seems helpful.

Dnpizarro commented 9 years ago

@designlanguage I see your point about the sharp edges and I think the in between version works much better. @duelj made an interesting observation about the rounded stars rendering better, but I'm still leaning towards the in between version since at larger scales the viewer will pay more attention to details.

designlanguage commented 9 years ago

Thanks @duelj & @Dnpizarro. Any other thoughts on rounded vs pointed? @nataliafitzgerald - What do you think?

duelj commented 9 years ago

I am pro the "in between rounded" star after seeing it at small size and I think at larger sizes it was working as well. Funny that the rounding actually worked better at low-res, thanks for taking the time to explore it! It seemed like Daniel was also on board with your modified rounded version.

Sounds like this could be ready for design approval from @nataliafitzgerald

George's modified rounded version

hi-res low-res
04532b4e-f314-11e4-8459-fba3e2a6f4ef 248826da-f314-11e4-9844-a73956676c77
mebates commented 9 years ago

Hiiii - I'd like to use this in a social graphic for Monday. Can we get approval, @nataliafitzgerald? And get it on the Google Drive? Thanks!

Dnpizarro commented 9 years ago

@nataliafitzgerald do you think we can get final approval for this graphic at today's Design Manual meeting?

Dnpizarro commented 9 years ago

@designlanguage will be adding the flag to the illustration library.

stephanieosan commented 9 years ago

During the design manual meeting, we decided to use the minicon stars.

designlanguage commented 9 years ago

I've added the minicon flag to the illustration folder in CMYK and RGB. Let me know if you have any questions.

Dnpizarro commented 9 years ago

Thanks @designlanguage for finalizing this work!!

As a general question to everyone, are we no longer updating the illustrator file with all of the illustrations? Or are we moving towards just updating the approved objects folder? Or are we updating both?

stephanieosan commented 9 years ago

I'm fine with either, but I do like the illustrator file with all the illustrations. As a person who doesn't do a ton of illustrating, it's really convenient to be able to open a single file and scan the landscape of what's already been built to see if anything fits my needs.

mebates commented 9 years ago

I haven't used the all-illustration file in a long time. Let's discuss this quickly at the Design Manual meeting on 6/29.

Otherwise, I believe that this issue is closed. Nice work everyone!