search

ClimateTown / knowledge-hub

Your one-stop shop in the fight against climate change, containing important climate resources you wish you knew about yesterday.
https://hub.climatetownproductions.com
Creative Commons Attribution 4.0 International
36 stars 25 forks source link

[STYLING/DESIGN] Styling V2 #70

Open VeckoTheGecko opened 1 year ago

VeckoTheGecko commented 1 year ago

Describe your suggested improvement The site in its current form is visually ok, but not fantastic.

If someone has some creativity to spare, it would be great to breathe some new life into the website.

Describe the benefit Makes the site look more appealing and legitimate.

Would you be capable/willing to implement the improvement? No. This is beyond me (and my mostly analytical skills) 😅

Additional comments Please discuss here (or in Discord) about your proposed styling. Prototype in a Figma board, so that people can give feedback before commiting to a design. Figma mockup and actual implementation (in Tailwind) don't need to be done by the same person.

VeckoTheGecko commented 1 year ago

Related to issue #28

dmlb commented 1 year ago

When selecting colours for the re-design consider contrast levels:

Screen Shot 2023-05-17 at 4 44 38 PM

And dark modes user-prefers queries

VeckoTheGecko commented 1 year ago

Just curious, the cards are low contrast with the background to give a sublte card vibe. Is that considered bad practice? (and whats the fix?) Or are these contrasts mainly for text on background?

valdelaseras commented 1 year ago

Disclaimer: I'm not a UX designer ( web dev who works with UX a lot though )

I believe low contrast is generally not a great practice, unless the content it concerns is meaningless / trivial. When it comes to sufficient contrast, the main concern is text vs background. However, there's an argument to make that the "flow" of the UI should be clear ( and is definitely not trivial ) as visually impaired people, for instance, may have a harder time navigating a UI like that.

I think it's better to build for optimal usability first, then reassess your design and make some smart stylistic choices if you feel you still need it after.

VeckoTheGecko commented 11 months ago

I think the styling at the moment is good. If someone has an idea for a revamped site, please comment below (including a Figma design) and we can re-open.

@dmlb Feel free to open a new issue for contrast issues if you'd like

VeckoTheGecko commented 2 months ago

@razpt from the Discord server has suggested a Figma redesign in this Discord thread. Follow there for more information. Re-opening to explore this avenue