[Feature Request]: Small UI redesign proposal

[pkrasicki]

Guidelines

• I have searched the issue tracker for open and closed issues that are similar to the feature request I want to file, without success.
• I have searched the documentation for information that matches the description of the feature request I want to file, without success.
• This issue contains only one feature request.

Problem Description

I would like to propose some small layout changes and background color changes for the default dark theme.

Proposed Solution

Before

Trending:

After

Trending:

Channel:

Video:

Mobile:

Changes:

• new colors for the default dark theme:
  main background: #0f0f0f
  sideNav, topNav, card: rgb(28,28,28)
• removed card background color from most pages
• smaller paddings - less wasted space on desktop and mobile, on 1080p resolution 1 more video fits in each row
• page title is centered
• inactive tab text color is a little brighter
• padding-bottom for tabs is set to 10px instead of 15px

Alternatives Considered

None.

Issue Labels

visual improvement

Additional Information

I can create a pull request implementing those changes.

No response

[absidue]

Personally I'm against all of the changes in this pull request, apart from the inactive tab colour. Let me explain.

The colour changes make the dark theme look a lot closer to the existing black theme, defeating the purpose of having multiple distinct themes.

While I see that your goal was to display as much content as possible, I think this proposed solution sacrifices usability, accessibility and looks, resulting in a cramped, overcrowded UI, that will overwhelm not just users with accessibility needs, but also everyone that isn't a productivity nerd. The "wasted" space as you call it, prevents that overcrowding.

Personally I think this pull request would worsen the user experience for most users.

[pkrasicki]

The goal wasn't really to fit as much stuff as possible, but after tabs were added to the subscriptions page and they take up a separate row, I noticed how much unused space there is in this application. For me it was getting in the way of viewing the content. Maybe it's because I've been using Piped lately (https://piped.video). My changes are inspired by that application. I understand if you don't like that style though.

The extra backgrounds also felt unnecessary and a bit distracting, so I removed them. The colors can be changed and you are right that it looks much closer to the black theme now.

I ended up doing those changes for videos and playlists too:

[o-data]

Perhaps if there is a Compact mode or the Theme can also can the layout it would avoid issue of personal taste and preference.

Personally I like see more on a row design.

[absidue]

@o-data We already have a row layout. In the "General Settings" set the "Video View Type" to "List".

[o-data]

Hi @absidue, sorry if I wasn't clear. I mean more video in a single row; '6' video like designed by @pkrasicki instead of the current '5'. That what I mean by 'compact'.

Totally understandable that it all about preference and as I don't have any coding skill, I just "Like" any Issues I find interesting.

[pkrasicki]

@o-data I have uploaded all of my changes into branch https://github.com/pkrasicki/FreeTube/tree/ui-redesign. It's based on the latest 0.19 release, so if you don't mind being stuck with that version, you can compile FreeTube from my branch. If you haven't done that yet, maybe you will be able to find someone who will help you.

[o-data]

@o-data I have uploaded all of my changes into branch https://github.com/pkrasicki/FreeTube/tree/ui-redesign. It's based on the latest 0.19 release, so if you don't mind being stuck with that version, you can compile FreeTube from my branch. If you haven't done that yet, maybe you will be able to find someone who will help you.

Why not just do a Pull Request on the change?

Compile is out of my skill levels, perhaps if you can emulate the Action > Build somehow I would certainly be able to try it.

Thank you.

[absidue]

In its current state this would not get approved if a pull request were created for it (we've discussed it and multiple devs have said they don't like it), firstly this looks overcrowded, which not only looks bad but is overwhelming and secondly we don't want FreeTube to look like a Piped rip-off.

The approach of just nuking any margin and padding you could get your hands on, resulted in something that looks worse than both FreeTube's existing user interface and Piped.

The big difference between this and Piped, is that Piped's layout was designed with full width in mind, so instead of just displaying more content like you have done, they either stretch the existing content or add extra spacing between the individual elements, depending on the page.

While we appreciate your enthusiasm to make changes to FreeTube's layout, unfortunately this proposal in it's current state would not get merged into FreeTube.

[pkrasicki]

Thanks for taking the time to consider my proposal.

The big difference between this and Piped, is that Piped's layout was designed with full width in mind, so instead of just displaying more content like you have done, they either stretch the existing content or add extra spacing between the individual elements, depending on the page.

You are right. My goal was to reduce the padding, so that there is more space to display the content. But I have no strong opinion on how the content should be displayed, so I didn't make any changes to the videos. We could make the thumbnails bigger and increase the gaps between videos. You can decide how to use this extra space and I can make the changes.

Unless you prefer to keep everything as it was? In that case I will close the issue.

[absidue]

At the moment it is probably better leaving it as it is. Considering that we've been making changes to improve accessibility in FreeTube recently, it would be counter productive to change to a design and layout that makes it less accessible in other ways (overcrowded and overwhelming and difficult to find what you are looking for).

Unfortunately your goal is to display more content, but to get something that looks good and isn't overcrowded and overwhelming, you would probably have to make enough changes to the display of the list items, that you would end up displaying the same amount of content just with a different design.

Basically if you want a full width layout for FreeTube you would have to make displaying more content a much lower priority than it currently is for you.

[pkrasicki]

My goal isn't to display more information. It just happened as a result of removing the padding. It was the easiest for me to do nothing about it, but maybe I should have made the videos bigger. We can do that.

As a user I want to see the content. Everything else should take as little space as possible. You can see it in the design of other similar applications:

YouTube

Piped

Odysee

They don't have a padding that takes up around 30% of screen width. They don't have an extra background around the content. Those are unnecessary things that we can easily remove and we can do it without negatively impacting accessibility. That is the main goal of my proposal.

[kommunarr]

Hello @pkrasicki, after discussing with the FreeTube team, we do think this bundle of changes is too specific to warrant its own mode at this time, but we would most certainly be open to having a full-width option for the app. If you could create a PR that implements just the full-width change and adds it to the Theme Settings, we would be glad to have that as a feature. Our only other stipulation is that we would like it to have a default value of disabled before we consult the community. Would you be amenable to this suggestion?

[pkrasicki]

Hi @jasonhenriquez, sure, I will give it a try. It will look like this when enabled:

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

Hi @pkrasicki just checking in how is your PR coming along?

[pkrasicki]

Hi @efb4f5ff-1298-471a-8973-3d47447115dc, I'm busy at the moment and don't have the time to work on it this month, but the feature is mostly finished. I've put the changes into a new branch. Unfortunately I based the branch on master instead of development. It also needs to be rebased on top of the latest changes and there are merge conflicts. Other than that it should be done, but might require some more testing on mobile. I will try to get back to it next month.

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

Based on #4379 (comment) im closing this, as that was the only feature that interested us.