Skip to content
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

[Enhancement] Color of the app #35

Open
YuriDevAT opened this issue Oct 22, 2023 · 5 comments · May be fixed by #58
Open

[Enhancement] Color of the app #35

YuriDevAT opened this issue Oct 22, 2023 · 5 comments · May be fixed by #58
Assignees
Labels
🕹 aspect: interface Concerns end-users' experience with the software CSS Work on CSS stylesheet ✨ goal: improvement Improvement to an existing feature 💪 skill: Accessibility Requires proficiency in Accessibility 💪 skill: Design Requires proficiency in Design 🏁 status: ready for dev Ready for work

Comments

@YuriDevAT
Copy link
Contributor

YuriDevAT commented Oct 22, 2023

Description

As a user, I want the design to be clear and welcoming. It has to meet color contrast and be easy to understand.

ToDo

Implement style using HTML and CSS regarding following prototype

HTMLQuizLightMode


Conversation on this issue

Just a quick question regarding our design: will we have a dark/light toggle? 🙏
Full confession: I am asking for very selfish reasons.
I had to do some research last year because of my experience as a user with dark mode designs. I had noticed that unless an app’s content was the only way to access particular info, I would otherwise shy away from them. I just find them hard to focus on. But knowing how popular dark/light themes had become, I was just curious what makes a user prefer one over the other.

At least according to research done in Germany in 2020, my experience is not that uncommon. While dark is certainly beneficial and recommended for some users, for the majority the so-called, ‘positive contrast polarity” was better with light mode. Here’s the article I saved last year: Dark Mode vs. Light Mode: Which Is Better? Happy to explore more to see if this is still relevant ! And greatly appreciate your patience with me. 🙏

Originally posted by @CorinaMurg in #18 (comment)

### Tasks
@YuriDevAT YuriDevAT added ✨ goal: improvement Improvement to an existing feature 🏷 status: label work required Needs proper labelling before it can be worked on 💪 skill: Accessibility Requires proficiency in Accessibility 💪 skill: Design Requires proficiency in Design 💬 talk: discussion Open for discussions and feedback labels Oct 22, 2023
@CorinaMurg
Copy link
Owner

Should I get started with a Figma mood board? Just so we have a visual about possible colors.

@YuriDevAT
Copy link
Contributor Author

Love that idea. Thanks Corina for starting this!

@CorinaMurg
Copy link
Owner

I have been looking for inspiration for the app's color palette, and remembered someone mentioned this to me a while ago:
https://coolors.co/palettes/trending
(Sharing just in case you don't know it yet)

@YuriDevAT
Copy link
Contributor Author

Yeah, there are so many of them out there, also "accessible color" ones. I think the first thing to decide would be if we have more than two colors. Color palettes always seem beautiful in combination but rarely when I use them (at least for me 🙊 )

Other ones (accessible Color Combos claimers):
https://toolness.github.io/accessible-color-matrix/
https://colors.dopely.top/contrast-checker/05024e-ada6a2
https://color.adobe.com/create/color-wheel

@CorinaMurg
Copy link
Owner

I am a bit overwhelmed by color palettes. I use them to compare different shades of the same color and maybe how two colors go together, but that's all.

I keep forgetting to confirm the original color combinations you suggested. I know there was a comment about (I think) blue/purple and yellow but I can't seem to find it.

This is a very basic mood board. Testing several shades of blue/yellow/orange/purple. Some shades of gray as well if we decide to add a color to the background for each group of tags. Feel free to add/delete/change colors.
https://www.figma.com/file/FnY3XGLmYCSpMKoEDEqcPF/HTML-Tag-Quiz?type=design&node-id=0%3A1&mode=design&t=iGiYRQNDJm494V4O-1

@YuriDevAT YuriDevAT self-assigned this Dec 25, 2023
@YuriDevAT YuriDevAT added CSS Work on CSS stylesheet 🏁 status: ready for dev Ready for work 🕹 aspect: interface Concerns end-users' experience with the software and removed 🏷 status: label work required Needs proper labelling before it can be worked on 💬 talk: discussion Open for discussions and feedback labels Dec 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🕹 aspect: interface Concerns end-users' experience with the software CSS Work on CSS stylesheet ✨ goal: improvement Improvement to an existing feature 💪 skill: Accessibility Requires proficiency in Accessibility 💪 skill: Design Requires proficiency in Design 🏁 status: ready for dev Ready for work
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants