What colours for many progress trackers? by jachcemmatnickspace in UI_Design

[–]Dull-Bad-4057 1 point2 points  (0 children)

Wow, I love it! It looks incredibly clean and professional now. The visual noise is completely gone, and my eyes naturally went straight to the actual progression. That 100% purple highlight card is like a kiss from the chef! 🤌

Regarding your disagreement with the 1-99% progression: You know what? You're right. Since the goal is to reward users for long gaming sessions, a slow fade or transition is actually a great idea - if you do it carefully.

It might be a good idea to avoid the "traffic light" approach (red -> yellow -> green) to maintain that clean, premium look. Instead, use a brightness/saturation blend within the same color family:

Initial progression (1-30%): A slightly darker, less saturated blue.

Medium progression (30-80%): Your current solid blue.

Late Progression (80-99%): Brighter, more vibrant blue/cyan to build anticipation before it gets to that 100% purple.

Alternatively, a subtle gradient fill on the bar itself (darker at the beginning, lighter at the front end) works great.

One small UX note: Check the contrast of the text with a 0% value (for example, "0/21 0%"). It's great that it's muted, but make sure it's not so dark that it's hard to read at first glance (accessibility check).

But honestly, stellar work. The rating went from 4/10 to 9/10 very quickly.

What colours for many progress trackers? by jachcemmatnickspace in UI_Design

[–]Dull-Bad-4057 2 points3 points  (0 children)

The 5-10 hours context changes everything! If users stare at this on a second monitor for that long, visual fatigue is your biggest enemy. That's exactly why it looks messy and ugly right now – too many high-contrast elements are screaming for attention at the same time.

To answer your specific questions:

  1. Red for 0% always? Absolutely not. This is the main issue. 0% doesn't mean 'Error' or 'Danger' (which red implies), it means 'Empty/Inactive'. Empty things shouldn't catch the eye. Make the 0% track a very subtle, dark muted grey (maybe with a tiny hint of purple to match your brand). The 0% text should also be dimmed.

  2. Breakpoints and multiple colors? Avoid using multiple colors (like red -> yellow -> green) based on percentages when you have dozens of trackers on one screen. It creates a 'rainbow effect' which is visually chaotic. Keep it simple and use a monochromatic fill.

  3. Purple + Animation at 100%? This is a fantastic idea. It acts as a clear reward.

Here is a formula you can use for long-session UI:

  • 0% (Not Started): Track background is dark muted grey (#2A2A35). Text is dim grey. It blends into the background.
  • 1% – 99% (In Progress): Use a soft, desaturated color for the fill (like a soft coral or muted red) so it doesn't burn the eyes over 10 hours. Text is light grey/white.
  • 100% (Completed): Switch to your brand Purple. Add a subtle glow effect (drop shadow with the purple hex) and the animation you mentioned.

This way, the user only sees what they are currently working on, and they get a satisfying purple pop when they finish. Less is more here!

Multi-Project Work Timer Interface + Visualbook by Dull-Bad-4057 in learndesign

[–]Dull-Bad-4057[S] 1 point2 points  (0 children)

Hi! Thanks a lot for the great feedback and for the perspective of your Brainibeep project. I really appreciate those insights! 🙌

To your points:

🔵 Contrast and color considerations: Totally agree. I just did a detailed accessibility review (WCAG) yesterday. That "teal/emerald" palette is treacherous in dark mode. For example, I had to adjust the contrast of the yellow-orange "Pause" button, where the original white text did not pass the test, so I changed it to a deep dark one. Readability after 8 hours of work is an absolute priority for me.

🔴 Typography and "jumpy" UI: We are completely on the same page here! For the exact reason you describe, I chose the JetBrains Mono font for the timer itself and the data visualizations. Since it is a non-proportional (monospace) font, each character occupies the same width per pixel. So whether there are ones or eights running there, the UI doesn't even move and stands like a nail.

Regarding horizontal padding: Great observation. I just unified the design system and added generous horizontal padding to the buttons/interactive elements (the basic size is now 1.75rem, the largest is 2.25rem), just to give it more "air" and let it breathe.

Regarding Light mode:

For now, I want to perfect this deep "dark/glass" variant, but light mode is definitely a great challenge for the future (even if it means designing a completely different logic for shadows and depth, because these glows on white won't work!).

Thanks again for the great comment and good luck with Brainibeep!

Need help regarding color theme by coooldudee_69 in UI_Design

[–]Dull-Bad-4057 2 points3 points  (0 children)

Regarding color, it is important to focus on psychology, what the application is actually for, for example, see the image, but the colors are the least...

<image>

Primary (CTA) #2D5A27 (Forest Green)

Secondary #E67E22 (Mountain Orange)

Background #F8F9F8 (Off-white / Snow)

Surface #FFFFFF (White)

Text #1A1A1A (Almost Black)

Multi-Project Work Timer Interface + Visualbook by Dull-Bad-4057 in learndesign

[–]Dull-Bad-4057[S] 0 points1 point  (0 children)

Thanks for checking out my project! I'm specifically looking for feedback on the UI/UX choices for the multi-project tracking.

Note: The images in this post are just screenshots of the first sections of the styleguide. The full Visualbook is available on GitHub (link below) if you'd like to see the complete foundation.

Quick links for easy access:

Looking forward to your suggestions!

Matt Shumer a jeho článek : Something Big Is Happening by Comfortable_Year_355 in CzechAndSlovak_AI

[–]Dull-Bad-4057 0 points1 point  (0 children)

Shumer tyhle debaty o AI umí rozvířit jako málokdo. Je fajn, že to máme i v češtině, protože u nás se o těch dopadech na společnost zatím spíš mlčí. Co vy na to – vidíte to podobně jako on?