[FEATURE] Design the app

[YuriDevAT]

Description

For the now the app has its default style. Since the app is in its final stage we will need a design which makes it appealing for developers to use. I guess a fun 👻 style would make sense.

Acceptance criteria

• The styling is appealing for users
• the styling is accessible (font-size, color contrast,..)
• The app is centered horizontally with a decent spacing to the top

Let's discuss themes before we move further with it.

Screenshots

No response

Additional information

No response

[YuriDevAT]

The app is for user's to check how many HTML tags they know. It should be a fun app for them to use, nothing serious if they do not know that many (yet). So bright colors and a quite fun font would be nice I guess?

[medinamohamed]

Hi, I'm looking into contributing to my first open source project. I would love to try to design this app and implement it.

[YuriDevAT]

Thank you for your interest, @medinamohamed. This ticket is currently open for discussion, so only rough drafts should be done to discuss further steps in which direction it should go. Please feel free to upload your first draft, including what your thoughts on color and fonts are. 😄

[CorinaMurg]

I like the idea of having first an open discussion about the design! Thinking first about the colors and the mood we want the app to convey is important. And yes to fun, bright colors! 🙌

[YuriDevAT]

Two vague color combinations are currently coming into my mind:

• Kind of Complementary: Dark and light version of one color, a accent color added. What comes to my mind would be purple or blue, with accent yellow.
• Usage of the original logo color of HTMl in a monochromatic way, adding a complementary color

[CorinaMurg]

I had to learn about color combinations during the pandemic when I was a teacher using a LOT of color in my geometry lessons. Until a student let me know he was color blind. I love the combinations you suggested, they are the least likely to cause issues when we consider color blindness. (I'll have to go back to do some research, but I think a yellow closer to orange rather than a lemon-yellow is usually recommended.)

[medinamohamed]

I love the idea of orange & purple. It's perfect for a Halloween theme. For fonts , I was thinking a bold sans serif font like Monserrat for the heading and the regular version for the sub-heading. Also, I think that the text should stay in white for the best contrast. I added the logo but the placement is really up to discussion ,I did a quick draft on figma to visualize this. also I am not sure what's the best way to represent the inputs , maybe a grid?

[medinamohamed]

I considered accessibility for the font, but it's not really fun 😅

[YuriDevAT]

It's a nice start @medinamohamed. Thanks for making sure that color contrast is high enough for foreground color to background color to all combinations (white on purple, orange on purple, white on orange) 🔝
Yeah, since it is Hacktoberfest and Halloween is coming up soon, the color combination seems got to go to me 👍🏽 We can figure out how to style the list in another issue. Just make sure that the text color is white as well in the meanwhile.

[CorinaMurg]

I like how fast our once-little app is growing! So exciting!

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

[YuriDevAT]

I am totally with you here, @CorinaMurg! I also prefer light-mode over dark mode. Let's keep it for Hacktoberfest sake with this colors but put our thought on it afterwards.

We do have the possibility to make this issue a discussion which then appears in the discussion section of the repo. But I do not try it out now in case something gets lost for earning the hacktoberfest badge. :)

Or we start a new discussion about color right away. I am excited to finally use certain CSS attribute like prefers-color-scheme and such, which will be useful here.

[CorinaMurg]

Sounds good! It can definitely wait until after this month. I was only thinking that long term it would be great to have both options. And just to be clear: I LOVE that we are going with a Halloween theme. Really great choice @medinamohamed!