Document flag design guidelines

[waldyrious]

From the conversation at #5:

The repo is mischievously titled circle-flags, ultimately allowing for expansion to include virtually any type of flag, so long as it follows the correct design scheme and has the right color palette.

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.

[HatScripts]

Okay, here are some thoughts for now, and I of course am open to suggestions:

• Flags should only use colors from the circle-flags color palette*
• Flags should be pixel-perfect when saved in a raster format at 16x16, 32x32, 64x64, etc. (Note: Many icons probably break this rule at the moment)
• The flags should be recognizable and unambiguous, even at small sizes
• The flags should stray from their original designs as little as possible, but exceptions include:
  • The color palette
  • The aspect ratio - The original designs should be are horizontally scaled down to an aspect ratio of 1:1, but the elements within them, e.g. stars, should maintain their aspect ratios.
  • The circular shape - Elements within the
  • The simplification of elements - target 16 - 32px

*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):

• Chad and Romania
• Senegal and Mali
• Indonesia and Monaco
• New Zealand and Australia
• Ireland and Côte d’Ivoire
• Norway and Iceland
• Venezuela, Ecuador, and Colombia
• Luxembourg and the Netherlands
• Slovenia, Russia, and Slovakia

[waldyrious]

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.

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.

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.

Flags should be pixel-perfect when saved in a raster format at 16x16, 32x32, 64x64, etc.

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.).

[HatScripts]

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

✔️ The yellow, blue and red don't bleed into one another ❌ Ecuador's eagle's wingspan bleeds into the yellow ❓ Venezuela's stars can probably be clearer than currently displayed

Slovenia, Russia, and Slovakia

❌The white, blue, and red bleed ❌We also have anti-aliasing issues around the outer edges of the flags (For more info see this question on the graphic design SE)

[waldyrious]

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...

[HatScripts]

I have considered suggesting that we make the flags square with a circular mask

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.

[waldyrious]

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 :)