Enhancing Main Navigation Bar Clarity with Color Highlighting

[dAtA-TRoN]

Description

The main navigation bar of the RiMusic app should be highlighted with color to ensure a clear distinction of the control elements from other ordinary buttons within the app. This suggestion aims to enhance user experience and increase usability.

⚠️ Please note that the attached mockups serve as examples only and ARE NOT to be understood as final designs. ⚠️

Suggested Solution

To highlight the main navigation with color, I suggest dynamically adjusting the background color of the main navigation bar to match the selected theme.

Additional Context

The change aims to improve user-friendliness by making the main navigation bar stand out distinctly from other interface elements.

[AnyoneMouse]

I can imagine others liking it. But I personally don't so I'd like if it's implemented it is optional. Or wait, is it again only for dynamic theme? In any case, if it's implemented for all the themes I'd like it to be optional for ModernBlack theme at least.

[dAtA-TRoN]

I can imagine others liking it. But I personally don't so I'd like if it's implemented it is optional. Or wait, is it again only for dynamic theme? In any case, if it's implemented for all the themes I'd like it to be optional for ModernBlack theme at least.

Don't worry, it's just an example, as I mentioned before. The main point is simply to make the main navigation bar visible, as it often gets lost among all the other icons. If you have any ideas on how to solve it better, feel free to share.

The problem is that we want to have the main navigation bar on every screen soon. And it needs to be clearly recognizable as such. The following screenshot illustrates why this is necessary quite well:

[sayyid5416]

No please, this request hurts.

[sayyid5416]

a better approach would be using shadow as suggested in #1437

[dAtA-TRoN]

No please, this request hurts.

Ha, you yourself advocated for wanting the bar to be highlighted, remember? Don't pretend otherwise now.

[dAtA-TRoN]

a better approach would be using shadow as suggested in #1437

See.

I notice two challenges with your approach: How do you intend to depict such a shadow in the sidebar navigation? And what about in a black/pitchblack theme?

[fast4x]

I like the idea, shadow is nice but i think is for future... color of navigation buttons is pretty.

I would say that the background is related to the theme set

[dAtA-TRoN]

I like the idea, shadow is nice but i think is for future... color of navigation buttons is pretty.

Thanks fast4x, but perhaps we should brainstorm a bit more on this until everyone's satisfied, don't you think? It was really just a quick and dirty mockup.

I would say that the background is related to the theme set

Yes, that's what I thought too. I just don't know if it should be that bright. I'm not a graphic designer 🤷🏻‍♂️😂.

[fast4x]

Of course, I respect everyone’s ideas, I have to summarize all the ideas. Adding the background does not change the current characteristics of those accustomed to a uniform background. Those who use a dynamic theme would see the difference. I like the idea...

[dAtA-TRoN]

Of course, I respect everyone’s ideas, I have to summarize all the ideas. Adding the background does not change the current characteristics of those accustomed to a uniform background. Those who use a dynamic theme would see the difference. I like the idea...

But I use the 'material you' design. Would I be able to see the difference too 🥲?

[sayyid5416]

OK, I get your point, it's not that bad (atleast until drop shadow is implemented 😄). But if you plan to implement it:

• Do not make it this much round as shown.
• Make the color subtle, not too contrasty to take away the attention.

[dAtA-TRoN]

OK, I get your point, it's not that bad (atleast until drop shadow is implemented 😄). But if you plan to implement it:

• Do not make it this much round as shown.
• Make the color subtle, not too contrasty to take away the attention.

I mentioned earlier that this is just a mockup to illustrate my point, and it's not the final design. I didn't mean to be too insistent. I simply noticed an issue that needs addressing -there are pages in the app where the navigation bar can't be distinguished from the standard controls, which isn't ideal. So feel free to share your ideas; let's see where it takes us. fast4x quickly agreed, and it seemed like he already had a good idea about it. But hey, if you have time, create a mockup too. Perhaps your solution is way better. Just make sure to consider all positions of the navigation bar, as that's the tricky part -bringing it all together.

[sayyid5416]

there are pages in the app where the navigation bar can't be distinguished from the standard controls, which isn't ideal.

That's why I opened #1437

But hey, if you have time, create a mockup too. Perhaps your solution is way better.

I would still bet my money on drop shadow, as its subtle, looks professional, and superior (design wise - my opinion btw 😉)

Just make sure to consider all positions of the navigation bar

Drop shadow can be added in all positions btw 😅

[dAtA-TRoN]

I've also mentioned to you before that I think the idea of using drop shadow is really cool. I'm just wondering how exactly you plan to implement that on a sidebar.

[sayyid5416]

I'll share some mockups as soon as I got time.

[dAtA-TRoN]

I'll share some mockups as soon as I got time.

Cool.

[sayyid5416]

@dAtA-TRoN Added few mockups in #1437

[dAtA-TRoN]

@dAtA-TRoN Added 2 mockups in #1437

Man, this looks awesome 🔥!

We've only touched on the light theme up to now, so we still need to cover the black/pitch-black theme. If you have any suitable ideas for that... The colored themes don't really require any additional explanation. I believe they function more or less automatically.

[fast4x]

But I use the 'material you' design. Would I be able to see the difference too

slightly,