UI redesign suggestions for main page

[pkrasicki]

Hi, I would like to suggest a few UI improvements for the main page and the light theme. I think you could make the page easier to read by doing only a few small changes.

Before

After

Changes:

• changed the background color of filters to a less distracting dark gray color rgb(73, 80, 87), which was already used for text
• removed the background and border for the cards on the right side
• the green buttons on the right no longer have a background to make them less distracting. I made their border and text a darker shade of green #008e3b to make the text easier to read
• the color of orange links is now darker #ce4500 to also make them easier to read. The original colors didn't have enough contrast, which you can see in Firefox (or Chrome) accessibility tool

Original contrast for green text:

Original contrast for orange text:

[krestenlaust]

Have you considered the principles of gestalt in your redesign?

It seems to me that this change would make it harder to distinct between the columns, which in turn would make the overall page more cluttered.

Suggested rename: "UI redesign suggestions for main page"

[pkrasicki]

If you are saying that we should make the page background darker and other backgrounds white, then yeah that's also a good idea. Here I set the body background color to the previously used card background color #f8f9fa.

This might be too subtle, so here is an example with a bit darker body color #f4f4f4.

I would still do the other color changes, I just didn't apply them for this screenshot.
Edit: I updated the screenshots to merge the changes

[krestenlaust]

That is definitely better than before, it's much more clear where the bounding boxes are. This might be a viable change now.

Should still be debated though, in general, a lot of people probably have suggestions for the websites appearance. This is one of those topics where you'd need someone to call the shots to make sure the experience is streamlined

[palitu]

It looks like relatively easy changes and I think that it looks better than before. the green selector buttons irk me!

I think this, even if not final has more appeal.

[pkrasicki]

I made a few small improvements and took some more screenshots:

Dark theme:

I made a Firefox addon, which will apply those styles for you when browsing Lemmy:
https://addons.mozilla.org/firefox/addon/lemmy-modern-ui-theme
https://github.com/pkrasicki/lemmy-modern-ui-theme-addon

[krestenlaust]

It looks great now, I think you should go for it with a PR, can't imagine they'd turn it down, with the effort you've shown :)

[dullbananas]

The white boxes and the navigation bar should have the same shadow style

[rstanuwijaya]

Looks nice! I like the contrast between the cards and the page background

[krestenlaust]

Maybe in another issue, we could consider trying to implement 60-30-10 or a similar color rule to have a neat color palette

[pkrasicki]

The white boxes and the navigation bar should have the same shadow style