Website re-design

there has been talk on github about re-designing the supercollider website https://supercollider.github.io/.
i’m starting a thread here so that more people can join in on the discussion about what it should be like, both technology and design-wise.

for starters, what do people think about the current website? what works? and what doesn’t? what type of content should the new webite have to make it better, more practical and more interesting to users? do you have any inspiring websites that may be a good starter for discussions?

i’m thinking the supercollider website should be informative, easy to navigate and cleanly designed for the artist, programmer, technical person, musician, teacher and other types. but also playful/experimental, like the supercollider itself and the people using it.

maybe a short intro section (1. download, 2. install. 3. run code) would be nice to get new users onboard? also, given the experimental nature of sc, algorithmic composition and computer music it would be nice to have some content showing a snippet/performance/session (audio/video/image) or similar (look at the Videos section here https://www.haskell.org/) to demonstrate the capabilities of sc. the current website looks clean, but too clean. it’s missing firstly some colourful content to make it shine, and it’s missing an identity, in my opinion. i think the sc logos look good and clean, and we should consider them when designing something new.

Hello

I think it should essentially be a one-page website.

Sections

Definition of Done

  • mobile and tablet friendly
  • use open-source font ? example : IBM (!) Plex
  • nice color palette : use Coolors ?

Look’n’feel inspirations

I think SuperCollider website has been developer-friendly and computer-science-based-user-friendly, but not musician-friendly and artist-friendly.

Musicians and artists foremost seek some comprehensive videos of a (complete) performance of a work (or an extraction of its rehearsal) in which a simple introduction on the piece, the usage of the GUI surface and full codes are included.

Thus, “Works using SuperCollider” must be easily accessed (It is not easy to find on the current website) where various genres are included.
For example, sc-140 includes excellent examples, but it shows only a few sides of SuperCollider. It would be great if various genres using SuperCollider, i.e.:

for musicians - ‘acousmatic concerts’, ‘works for solo instrument and live electro-acoustics (or fixed media)’ and ‘works for ensemble and live electro-acoustics (or fixed media)’;

for artists - ‘exhibitions’, ‘sound installations’ and ‘multimedia works’.

Also, an introductory video to listen to sound using these codes must be easily accessed.

Without these, a starter seems to have difficulty in assuming what she or he, as an artist, could do with SuperCollider.

2 Likes

Just a note that whatever work is done, the look/feel of sc3-plugins’s website (https://supercollider.github.io/sc3-plugins/) should match.

thank @htor and @geoffroy for stepping up and volunteering to do this. it’s long overdue!

pretty much anything you do is going to be better than the current website, so don’t feel the need to make it perfect before you roll it out. i’d suggest publishing it half-done and incrementally improving it.

I do Information Architecture (among other things) professionally and so would be happy to lead on getting a structure/layout/prototype done. But I lack the patience for design by committee. So I could take you all on informally as a client if that works, but otherwise I think it would be better if I bowed out. Which I know sounds arrogant, but I’ve done enough pro-bono work over the years to know what works for me personally. Or if you want to bounce ideas off me, I’m happy to tell you what I think would and wouldn’t work.

Either way - good luck.

i think it would be benefitial to work close together with the community, to sort out what is needed – with everybody’s opinion taken into consideration – and it would be nice to see your idea of a prototype, at least a description of what you think it should be like. i doesn’t have to be all in or nothing! a sketch/structure/proto is a good starter for further discussions.

Yeah that’s fine. The way I usually work is:

  • Discovery Process - who are our users, what do they want to do, what are our pain points?
  • Personas and Scenarios - In this case a quick sketch of who are our core and secondary users are, why they’re on the site and what they need.
  • Sitemap/Wireframe - A low fidelity sketch (probably in Axure which creates a pseudo website you can use). I then usually hand this over to the designer. We have a designer right… :slight_smile:

And then I collaborate with the designer/developers to make sure the site meets the users needs.

Each of those phases assumes a process that once a deliverable is created, there’s a certain amount of feedback/negotiation. I just find this process works better if I create something, solicit feedback, make changes - move onto the next phase. It also helps reduce the vague discussions about “wouldn’t it be nice if”, helps prioritize stuff and helps you actually get the thing finished.

So if people want to throw stuff out I can collate it and start on creating a simple document.

So if people want to throw stuff out I can collate it and start on creating a simple document.

yes, please do!
as i mentioned in the first post, there are probably different users with different backgrounds that are going to be using the website (artists, programmers, teachers, newbies…) so as long as we cater to those types and scenarios (watching videos, learning, looking up docs/examples etc.), we should be good.

I also think that an introductory video is a must!

More images would also make the website more friendly for musicians and amateurs.

Some sections showing basic approaches (live coding, algorithmic composition, interactive music, sound installations, spatialization, etc) is also demanded.

A blog section is also crucial for the whole community.

Yes yes yes!!! I totally agree with all of this. Let’s do this!

I raised the question of the front page examples on the sc-dev mailing list the other day as well. I think this is very important:https://www.listarc.bham.ac.uk/lists/sc-dev/msg59313.html