search

supercollider / supercollider.github.io

Website for SuperCollider
http://supercollider.github.io
32 stars 79 forks source link

2022 new website design #263

Closed gusano closed 2 years ago

gusano commented 2 years ago

More than 3 years after saying that I'd do it ... it is finally done! Here's a new design proposal with the following changes:

Some remarks:

Here's a preview: http://gusano.github.io/supercollider.github.io (check it on your mobile ;)

And some screenshots:

Light theme

sc-2022-light

Dark theme

sc-2022-dark

Code examples (with audio)

sc-2022-code

Gallery (with images or embedded vimeo/youtube video)

sc-2022-gallery

Mobile view

sc-2022-mobile

Fix #175

dyfer commented 2 years ago

Thank you so much, @gusano ! That's a lot of work, very much appreciated.

I feel like design decisions are tricky as this will be the new "face" of SC :) Here is my feedback/suggestions:

gusano commented 2 years ago

That's a lot of work, very much appreciated

I admit that it was a bit more work than what I initially thought but I'm happy to contribute

  • the website is a strict improvement over the current one :)

yes it is :)

  • I'm not sure about the green color for the "SuperCollider" lettering - it "jumps out" for me a little bit. It seems we typically use monochrome graphics throughout the project (?)

Yeah I like it but didn't bother asking around as it would be impossible with everybody having a different idea/POV... The redesign has been mentioned for the last 4 years so I just did something on my own. The idea is that one can change that easily (I need to cleanup a couple of files and add this kind of things to the doc).

  • I feel that Examples could be a separate page (not embedded in the main, but accessible through navigation on top)

Yeah why not... I still like the idea of having a couple of examples on the main page (like 2?)

  • IMO "documentation" and "sccode.org" could also be references in the main menu on top

Documentation is there and is called Help (like on the original website) but otherwise :+1:

  • SC 140 page looks great, thanks! I'd consider making a link to it a little more prominent on the "Examples" page/section, maybe it could have its own sub-heading?

:+1:

  • Projects: I like the idea of having "projects" section (again, maybe also linked in the top nav bar?), but I'm a little concerned with our limited maintenance resources whether we'll be able to keep it updated and representative.

This was asked a lot by the community so I think we should keep it as it is (I have a few commits that allow embedding youtube and vimeo videos in there). I agree it should be in the top menu as well.

  • Looking through the source, it wasn't clear - which file is the source for the download page?

I need to fix that, it should be a download.md page at the root.

  • the slanted lettering is interesting... maybe it's a bit too slanted for me? not sure

As said before, I chose and like that design, and the idea is that it should be easy to change, I'm gonna cleanup variables.scss and add the slanting (and the green color) there so if the community want to change that, they can ;) But I'm not gonna change it myself as I don't have much free time now, I'll leave that to the community to refine/change design things.

  • I'm not sure about linking "open source" to our github

Why that?

gusano commented 2 years ago

@dyfer I just pushed a bunch of changes, if you wanna check

dyfer commented 2 years ago

Looking great, thanks for making the changes!

I understand that it's already a lot of work and you don't want to spend extra time refining design elements like color/slanting. We can certainly make these changes later as we go.

  • Projects: I like the idea of having "projects" section (again, maybe also linked in the top nav bar?), but I'm a little concerned with our limited maintenance resources whether we'll be able to keep it updated and representative.

This was asked a lot by the community so I think we should keep it as it is (I have a few commits that allow embedding youtube and vimeo videos in there). I agree it should be in the top menu as well.

Sounds good.

  • Looking through the source, it wasn't clear - which file is the source for the download page?

I need to fix that, it should be a download.md page at the root.

I see it now. The only hesitation here is that for the every new SC release we'll need to update two files - downloads.md at the root and _data/download.yml, is that right? I wonder whether the convenience of the quick links at the main page is worth that extra work for every release. Maybe it's more about remembering to change it in two places than the actual work that concerns me. But again, this would be easy to change if we wanted to remove it (e.g. just link to the downloads page there) so it could stay as is for now.

EDIT: the possible issue with this is already visible in this PR: the main page says version 3.12.12, instead of 3.12.2. I just see making a similar mistake updating the website myself down the road.

  • I'm not sure about linking "open source" to our github

Why that?

I think mainly because "open source" is now underlined, which is putting an emphasis on these words within the primary blurb about the project, where I think "open source" is as important as "audio synthesis", "composition", "musicians" etc. But it's not a big deal, as you said it's easy to change later if others also feel that way.

I'm only superficially familiar with jekyll, are there any technical aspects of this PR that should be reviewed in more detail or are we only concerned about the design here?

Also, I see you've added a tag in September 2021, should we add another one before pulling this in to mark this milestone?

gusano commented 2 years ago

I see it now. The only hesitation here is that for the every new SC release we'll need to update two files - downloads.md at the root and _data/download.yml, is that right? I wonder whether the convenience of the quick links at the main page is worth that extra work for every release. Maybe it's more about remembering to change it in two places than the actual work that concerns me. But again, this would be easy to change if we wanted to remove it (e.g. just link to the downloads page there) so it could stay as is for now.

@dyfer Oh man I totally agree this needs to be fixed. TBH I never understood why we have so many downloads for sc when Pure-data, Processing, Max MSP, etc, only have one per platform. The download page hurts my brain but I admit that I have been on linux for such a long time now that I probably miss something obvious. I'd suggest the following:

I think mainly because "open source" is now underlined, which is putting an emphasis on these words within the primary blurb about the project, where I think "open source" is as important as "audio synthesis", "composition", "musicians" etc. But it's not a big deal, as you said it's easy to change later if others also feel that way.

Got you. I probably did that because I find it amazing for such a great piece of software to be open source in a capitalist world :) I'll leave it as it for now so it could be a good first (easy) task for someone who want to edit the website.

I'm only superficially familiar with jekyll, are there any technical aspects of this PR that should be reviewed in more detail or are we only concerned about the design here?

You should only check that it works out-of-the-box, i.e. fresh checkout, bundle install, etc... and runs locally.

I see you've added a tag in September 2021, should we add another one before pulling this in to mark this milestone?

I guess the tag should be added once the PR has been merged

gusano commented 2 years ago

@dyfer All set, editing downloads now only needs to be done in _data/downloads.yml :partying_face:

dyfer commented 2 years ago
  • I can add all downloads to a yml file so adding/removing downloads would be done in only one place
  • We keep the latest release downloads on the main page (it looks so much cleaner) and the dedicated Download page with all downloads

Great. I think adding everything to the yml could work. Alternatively, we could have only the current downloads in the yaml file and the downloads page would use that as the source as well (for the current version), while "previous versions" would be coded directly in the .md file... I'm not sure what's better, maybe everything in yml is cleaner? Sorry, I didn't see the update when I wrote this. Everything in the yml file is great and I appreciate updated instructions.

As for multiple versions... we have only two downloads per macOS and Windows (macOS - alt version to handle older systems, Windows - alt version for 32-bit platforms), so that's not too bad IMO. OTOH the Linux source download is probably used the least by end users... but providing relevant Linux download is definitely out of scope for this PR, so let's link to the source for now, as we have done to date.

I think mainly because "open source" is now underlined, which is putting an emphasis on these words within the primary blurb about the project, where I think "open source" is as important as "audio synthesis", "composition", "musicians" etc. But it's not a big deal, as you said it's easy to change later if others also feel that way.

Got you. I probably did that because I find it amazing for such a great piece of software to be open source in a capitalist world :) I'll leave it as it for now so it could be a good first (easy) task for someone who want to edit the website.

OK.

I'm only superficially familiar with jekyll, are there any technical aspects of this PR that should be reviewed in more detail or are we only concerned about the design here?

You should only check that it works out-of-the-box, i.e. fresh checkout, bundle install, etc... and runs locally.

Sounds good!

I see you've added a tag in September 2021, should we add another one before pulling this in to mark this milestone?

I guess the tag should be added once the PR has been merged

Okay. I'd probably add a note to the new tag that it's a "2022 redesign" or something like that, so that we have a better record of it down the road.

dyfer commented 2 years ago

One more thing: I think that "social" and "community" on the very bottom of the page is not very visible. The only information that's included only there is the the forum link I think. Maybe we can add the forum link to the top nav menu as well?

I we have the link to the forum in the main navigation, the bottom section doesn't really have to be there IMO, but again, could stay for now.

EDIT: Two more details, if you feel like making the change:

gusano commented 2 years ago

Maybe we can add the forum link to the top nav menu as well?

The issue with that is that the menu won't fit as much as before on smaller devices. What about replacing the Wiki link with the Forum one? Now the navbar would be kinda cluttered :)

EDIT: nevermind, I found a way by reducing the margin but now the menu is pretty full

dyfer commented 2 years ago

The issue with that is that the menu won't fit as much as before on smaller devices.

Hm. What do you think about combining "external" resources (forum, documentation, sccode.org) with the "online" section (on the main page) and linking to that? I'd consider calling that "Links" and maybe turning it into a new page.

Then the top bar would have: News Download Examples Projects Wiki Links

I'd even consider moving "wiki" to the Links page and out of the nav bar.

gusano commented 2 years ago

@dyfer Done.

dyfer commented 2 years ago

Thanks! I think it's great.

I've also run the website locally and it seems to work fine.

I'd love if others took a look before merging this (@telephon @joshpar @jrsurge ?)

telephon commented 2 years ago

I would like to, but I would have to learn first how to use jekyll. So I better just trust that this works – it is a massive improvement. We can have design suggestions at a later point.

muellmusik commented 2 years ago

Love it!

dyfer commented 2 years ago

I would like to, but I would have to learn first how to use jekyll. So I better just trust that this works – it is a massive improvement. We can have design suggestions at a later point.

Hi @telephon

  1. it works, I checked :)
  2. there's preview on @gusano 's fork: http://gusano.github.io/supercollider.github.io
  3. to check this locally, I followed the readme and got it to work with minimal difficulties (I'm on macOS and I had to use ruby/gem from homebrew, otherwise it was straightforward)
telephon commented 2 years ago

there's preview on @gusano 's fork: http://gusano.github.io/supercollider.github.io

Looks excellent – let's go for it!

dyfer commented 2 years ago

Thanks so much, @gusano !

gusano commented 2 years ago

Thanks @dyfer ! I pushed a v0.2-new-design tag as well.