search

Language-Mapping / language-map

Front-end codebase for Language Mapping web map
https://languagemap.nyc
MIT License
6 stars 4 forks source link

Establish UI color scheme #30

Closed abettermap closed 4 years ago

abettermap commented 4 years ago

Description

Create a color palette around which to base the theme. This does not refer to map symbology, which is complex and dynamic and will therefore have its own issues and considerations largely unrelated to the UI choices.

Related items

Online tools

...in case we don't have something to start from.

Resolution

Existing references

Theming is easiest if there's some kind of baseline to start from. Thoughts/questions:

Considerations

Primary/secondary color should be harmonious in MUI palette (also here).

abettermap commented 4 years ago

Another handy Material color tool that belongs in the list: https://material.io/resources/color/#!/

rperlin-ela commented 4 years ago

Just to reiterate what may have been clear over Zoom... Neither elalliance.org nor languagemapping.org has a very up-to-date locked-down visual identity, so there's considerable latitude here. We can certainly draw on the ELA color palate if we agree that works for this, but no need to be limited by it.

abettermap commented 4 years ago

Ok good to know. Does Bridget have any skill with colors and/or fonts? If so, would she be able to provide any input?

If not, I did find the MUI color palette page I was looking for. The "palette" is referred to by the color name (e.g. blueGrey), so if any of those say "linguistic diversity map" to you then we could just roll with that. Just need a secondary palette color to go along with it. For reference, the two I'm using in the style guide are blueGrey and brown.

I think it's possible to deviate from those palettes, but Google really thought their whole design system through, not to mention all the MUI components are based around those palettes. Even subtle things like button color on hover is automatically set to a desirable tone that's based on the palette.

abettermap commented 4 years ago

@rperlin-ela How do these colors look? I was wrong about MUI color limitations and it’s actually easy to customize. The green-ish is a slightly darker shade than your print map and the red-ish is slightly darker than its complimentary color.

70CF32AF-B3DE-4658-A1D6-568E80B40158

CE13464B-71CD-49A9-AC67-EBA606A7A80B

C2F40BA2-D73C-44C2-AD4E-6870EFE5E68A

abettermap commented 4 years ago

Could technically use primary 24/7 but a second color might keep it livelier. Open to ideas either way.

rperlin-ela commented 4 years ago

I don’t have the sharpest eye for color, but I like it and feel the continuity with the print map, and the red-ish feels complementary.

On Jul 9, 2020, at 3:22 PM, Jason Lampel notifications@github.com wrote:

 @rperlin-ela How do these colors look? I was wrong about MUI color limitations and it’s actually easy to customize. The green-ish is a slightly darker shade than your print map and the red-ish is slightly darker than its complimentary color.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

abettermap commented 4 years ago

Ok sounds good, I’ll close this then and we can always open up a new issue if anything looks off color-wise.