UI improvements

[Falconbird18]

I feel like the current Freetube UI could use more work to polish it. Here is what I have been working on. Please give feedback and comments!

[efb4f5ff-1298-471a-8973-3d47447115dc]

Hi @Falconbird18 could you lay out the changes you made? The only ones that I see is making everything more rounded.

[Falconbird18]

1. I made all corners have a 15px border radius.
2. I removed almost all box shadows.
3. I made the background color the same.
4. I added more variables to themes.css
5. I worked on the side bar, the scroll bar only shows when you hover over the side bar (This is still not perfect yet).
   These are all the main changes I have done, I could find more if you are interested.
   Old version:
   
   New version:
   

[absidue]

Maybe some of the suggestions could be considered but as with the massive design overhauls proposed in the past by other people, they seem to sacrifice usability and accessibility for the sake of making it look more trendy.

E.g. removing all visual differences between the top bar, side bar and content makes the app much harder to use, if you want them to all be the same color, you need to add borders or shadows between them so that they are still clearly visually separated.

I also don't like the sound of even more theming variables, it's already hard enough to add a new theme as it is (the theme pull requests tend to go through lots of review cycles and then are usually abandoned by their creators), so please try to avoid making the theming even more complicated.

[Falconbird18]

Thank you for your great feedback!
I absolutely agree that the user experience should be the first priority. You are completely right that the sidebar and the top bar should have some separation. I feel a bit stupid to not have realized that.

[efb4f5ff-1298-471a-8973-3d47447115dc]

I appreciate the list and thankyou for understanding our points about the UX. Could you maybe explain in more detail why you made the changes that you did.

[Falconbird18]

Sorry for the late reply,
One of the reasons I think that the FreeTube UI needs some redesign is because of all the shadows.
Before

For example, the refresh button for the subscriptions has shadows all along the bar. I think the shadows can be distracting, and can separate
the whole bar from the background.
After

Another change I made was to remove the cards (I just changed the background color), to unify the background color.
Before

Notice how the card around a video changes color when you hover on it. I thought this was necessary to really show
the video was selected and would play when clicked on. Before, only the cursor changed.
After.

I also changed the header and sidebar. The design was ok before, but in my personal opinion, my version looks better.
Before

After

Please note that these are my personal opinions, and any feedback or suggestions are welcome.
Thanks everyone

[absidue]

For example, the refresh button for the subscriptions has shadows all along the bar. I think the shadows can be distracting, and can separate the whole bar from the background.

That's intentional it's not meant to blend into the background, but from looking at the rest of the screenshots blending everything together into one big thing even though they are completely separate UI elements with different purposes, seems to be your goal.

[Falconbird18]

I personally disagree with you, but I will be happy to improve the UI in a way you like. If that means discarding my changes and reverting back to the old UI and going from there, that's ok with me.

[absidue]

Things that slightly concern me about this:

• It looks like you are going for cloning YouTube's UI, which isn't inherently a bad thing, but it does mean that things that don't have an equivalent in YouTube's UI, like the last refresh timestamp, are just weirdly placed above the title, instead of being properly integrated into the UI.
• In your screenshots you seem to have got ridden of any indication that a video has been watched, I'll give you the benefit of doubt here and assume you just forgot to take a screenshot that included them, as I hope you didn't think that removing features in the name of design was a good idea.

[Falconbird18]

Here is a screenshot with a watched video.

I wasn't trying to clone the YouTube UI, and I think FreeTube should be different, but easy to get used to.
Do you have particular preferences for UI? What exactly is your idea or vision for the UI? Knowing this will help me improve the UI and UX in
a way you are happy with.
Thanks

[kommunarr]

Hi @Falconbird18, taking a look at this now.

• With regards to the rounding, this is something I've looked into before, but it's got some awkwardness to implement that would take some time & effort to address. To list a couple of examples I can see in your image: the junction point of the side nav and the top nav, as well as the video progress bar protruding with rounded bottom edges.
• As absidue mentioned, the video refresh section does blend into the background without any shadow or divider there. This one seems like a non starter.
• As abisdue also mentioned, moving the video refresh timestamp like this does not seem to be providing any benefits, and it's in fact a bit more jarring since it's still misaligned with the heading.
• The remaining unique aspect of making the background color the same is a change I like, although we're pretty much accomplishing this in an only slightly different way in Make layout full-width #5294.

With all that said, though, we appreciate your enthusiasm and hope you can pursue more ways to support and improve the project.

[Falconbird18]

Yeah, I do agree with you that at least the rounding I have done is too much.
And I am aware that the video refresh timestamp is misaligned. It's an issue that I haven't fixed yet, but is on my radar.
Also, thank you so much for the encouraging response!

[lamborghinipth]

performance is the most important -> shouldn't rounding corners, using borders, using shadows or using too much CSS style.