-
-
Notifications
You must be signed in to change notification settings - Fork 260
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
Document flag design guidelines #8
Comments
Okay, here are some thoughts for now, and I of course am open to suggestions:
*Here's what the color palette looks like in my python code, taken from validate_colors.py. Should I upload this file? It helps to automate the color validation process. PALETTE = {
"#eee" : "white",
"#acabb1": "gray",
"#333" : "black",
"#a2001d": "dark_red",
"#d80027": "red",
"#ff9811": "orange",
"#ffda44": "yellow",
"#6da544": "green",
"#496e2d": "dark_green",
"#338af3": "light_blue",
"#0052b4": "blue",
"#026" : "dark_blue", # (only one usage - td - Chad)
"#4a1f63": "purple", # (only one usage - es-ib - Balearic Islands)
"#751a46": "dark_pink", # (only one usage - qa - Qatar)
"#ffeacf": "peach", # (only one usage - it-82 - Sicily)
} Also note that small changes may be made to the color palette over time. Here are some possible flags we could show as comparisons (Based on Britannica's Flags That Look Alike): |
Sounds like a great start! The flag comparisons are a really nice touch. The only thing I think is important to include beyond what you already wrote is the nature of the shape simplifications, with some examples for illustration. I feel that that may be the hardest bit of the design style to replicate without some guidance about the choices made so far.
To be honest I was happy that we could drop Python from the contribution process in #3, as that makes things simpler. I think only including the palette in the design guidelines document would be sufficient, especially since we can't automatically validate the other design aspects anyway, so manual review would always be needed for new / edited flags.
Not sure I understand what you mean here. Do you mean that the circle should be divided in a 16x16 grid and elements should match it whenever possible, even if that means deviating slightly from the official design, so as to minimize anti-aliasing? If so, I wouldn't use the word "pixel-perfect" since for many flags this won't be possible (e.g. those with diagonal lines, or small stars, etc.). |
Essentially, yes, and I agree that "pixel-perfect" is probably a misnomer but I've personally seen it used quite often in icon design. But you're right that isn't really possible with diagonal lines or small shapes. It's more about horizontal and vertical lines, I suppose. Here are some examples from the flags above as they appear in my browser at 32x32, screenshotted and upscaled to 128x128 (400%): Venezuela, Ecuador, and Colombia
Slovenia, Russia, and Slovakia
|
Fascinating read about the border artifacts. I have considered suggesting that we make the flags square with a circular mask, rather than actually cut out the shapes in circular sections, in order to make geometry simpler and more intuitive; I wonder if that could help with this problem... |
There is definitely merit to this idea and it's something I've been considering for a while. You're right that it would simplify geometry. The only thing is that in my experience svgo isn't able to properly handle SVGs with masks, especially if they're applied to multiple elements at once, so I think this would suffer from slightly larger files in most cases. |
I'd be happy to give this a try, now that I know you're receptive to the idea. I won't have the time to to work on it for the next few weeks, but sometime during this summer I should be able to cook something up :) |
From the conversation at #5:
Such design guidelines should be noted down in order to facilitate contributions to the project that expand the coverage of flags. Even a simple bullet list of high-level principles (with examples) would already be quite useful for this purpose.
The text was updated successfully, but these errors were encountered: