Mockup for Gradience main website

[tfuxu]

We should redesign our main website to make it more GNOME-y.
As of now it looks a little bit bland with that default template that we use in Lume, and there's not really any content there except for the How to contribute? section, with a footer under it, which consists of a link to Discord server and the Gradience main repo.
It would be nice to have a main page that looks more like the page of some GNOME project, like what we've done in gradienceisahack.github.io website.

A great inspirations in my opinion for this redesign would be forty.gnome.org and repainter.app (mentioned by daudix some time ago).

[0xMRTT]

That's a nice idea. I would like to mention that repainter.app isn't open source and the forty.gnome.org to (maybe i'm wronge for the gnome one ?). I would also mention https://collision.geopjr.dev/ and https://libadwaita.geopjr.dev/

[tfuxu]

That's a nice idea. I would like to mention that repainter.app isn't open source and the forty.gnome.org to (maybe i'm wronge for the gnome one ?).

I mean, we're not going to copy them one to one, but we can get some inspiration from how they look, to slightly influence the final look of our page.

Also about forty.gnome.org website, almost every GNOME project site has a note at the bottom, that says it is distributed under the Creative Commons CC-BY-SA license, so if we based our website on that page, we would just have to give a credit in the footer, such as This page was based on ... or something like that, just like we did on gradienceisahack page.

[tfuxu]

I would also mention https://collision.geopjr.dev/ and https://libadwaita.geopjr.dev

Great suggestion! Geopjr sites have always looked very nice to me, and they are pretty creative in their look, so they should be a good example.

[0xMRTT]

Yes 👍

[tfuxu]

What is the current progress on this mockup? Are there perhaps any drafts already created?

[daudix]

I have nothing :/

[tfuxu]

Okay, no problem

[daudix]

I will start making one right now 😉

Edit: actually tomorrow, 1 AM is not the best time

[daudix]

Current state of mockup (WIP)

No, I did not worked on this all 4 days, only today's night :(

[tfuxu]

Wow, looks really good!

[daudix]

Added WIP mockup

https://github.com/GradienceTeam/Design/raw/main/Mockups/web/gradience/gradience-wip.png

[0xMRTT]

I like it, what about adding an "explore more theme" in the "wide range of palettes" section ? Which will redirect to the explore page ?

[daudix]

[0xMRTT]

I mean ...

[0xMRTT]

Make the highlighted section scrollable horizontally and show at the end a see more theme button ?

[daudix]

I like the idea!

[daudix]

Basically this (https://repainter.app)

[daudix]

BTW, I like how theme colors are presented

[daudix]

Moved mockup from WIP status

[daudix]

I think the mockup is in good shape now, any preferences on adding/changing something?

@tfuxu @0xMRTT

[tfuxu]

Maybe instead of a black background, we could use a subtle gradient (something like in https://usebottles.com), or an image under slightly transparent background, for which I could create a parallax effect in CSS.

[daudix]

Hmm, idea with paralax is nice, not sure about what image we can use

[tfuxu]

I thought initially about adding here a Pretty Purple background, but I think that it is too dark in contrast to the rest of the webpage.

[daudix]

Hmm, actually why not

[tfuxu]

Actually, it looks quite nice

[daudix]

[daudix]

More than nice

[daudix]

Slight black tint (20%) makes it even better

[daudix]

[daudix]

With/Without tint (blur 20%)

[tfuxu]

Hmm, without the blur it looks better IMO.
I'm leaving it as-is in PR for now, because I don't know yet how to do those filters for the background images.

[daudix]

OK

[0xMRTT]

I like the blur but maybe less Blur will be better ?

[daudix]

Hmm, not sure about readability

[daudix]

10% / 15% blur

[0xMRTT]

And what about light/dark mode ?

[daudix]

Yeah, it pretty useless in our case

[daudix]

So, what amount of blur you like?

[0xMRTT]

10% ?

[tfuxu]

Yea, 10% should be alright

[daudix]

OK

[tfuxu]

We should also change colors for 'Get Gradience' button, because it's currently slightly hard to look at, and it is completely disqualified from the WCAG standard test.

[daudix]

Good catch, I will try to find color that look good and have good contrast

[daudix]

Alright, should be fine now

[daudix]

Can we make the paralax effect in header more like this?

https://codepen.io/robatronbobby/pen/vYjQZNa

See "Method 2" here

[tfuxu]

I can do that, but what image should I use for this instead of the current one?

[daudix]

What about replacing pretty purple background with svg and rotate it on 90° so we have scalable, long enough image?

[tfuxu]

Okay, I replaced it with SVG version, but I'm not sure about rotating it. I don't think it would look good.

[daudix]

I can try to make square version

[tfuxu]

Why making it a square?

[daudix]

To be compatible with mobile and desktop

[tfuxu]

But it already is, and on desktop it might be too stretched on higher resolutions.