AISongGen logoAISongGen

Patru teme, o singură piesă — folosirea culorii pentru designul player-ului

De ce aisonggen vine cu patru teme cu greutate egală în loc de un singur look canonic, și ce a schimbat decizia asta în legătură cu suprafața de ascultare.

6 min de citit

Look-ul implicit al unei unelte muzicale stabilește genul de muzică pe care oamenii o fac în ea. O unealtă synth în negru și mov îi împinge pe oameni spre piese synth. O unealtă folk în hârtie caldă îi împinge spre piese folk. Voiam ca aisonggen să se simtă neutru față de gen, așa că are patru teme care stau toate la egal la intrarea principală.

Cele patru atmosfere la care am ajuns

  • Sonic Teal — varianta rece, clinică, default. Arată ca interiorul unui studio de mastering după miezul nopții. Cea mai bună pentru ambient, techno, orice piesă care e mai degrabă arhitectură decât poveste.
  • Neon Orange — varianta zgomotoasă, fierbinte. Default-ul de brand. Arată ca ieșirea dintr-un club la 2 dimineața. Cea mai bună pentru trap, hyperpop, orice piesă unde energia e ideea.
  • Studio Black — varianta tăcută, scumpă. Cărbune și auriu. Arată ca un amplificator de chitară făcut din piele. Cea mai bună pentru jazz, soul, piese de cantautor care vor să fie luate în serios.
  • Electric Magenta — varianta jucăușă. Roz și crom. Arată ca interiorul unui videoclip Y2K. Cea mai bună pentru pop, dance, orice piesă unde gluma are voie să fie evidentă.

Ce ne-au costat temele

Designul pentru o singură temă înseamnă o mie de decizii mici despre contrast, ierarhie și accent. Designul pentru patru înseamnă aceleași o mie de decizii, de patru ori — și trebuie să aterizeze pe aceeași componentă fără să o spargă. Modul în care am făcut-o tractabilă a fost să mutăm fiecare culoare într-un sistem de tokens, ca să nu cheme niciodată componentele în sine un cod hex, ci doar un rol: --primary, --accent, --bg-elevated. Temele schimbă valorile; componentele nu se schimbă deloc.

Ce ne-au dat

Ce nu ne așteptam: oamenii au început să-și aleagă temele după contextul de gen, nu după gustul personal. Un producător care lucra la un beat de trap trecea pe Neon Orange chiar dacă default-ul lui era Sonic Teal. Switcher-ul de teme a încetat să fie un dropdown din setări și a devenit parte din workflow — un mod de a pune camera într-o atmosferă potrivită pentru piesa la care se întâmpla să scrii.

O notă despre accesibilitate

Toate cele patru teme respectă WCAG AA pentru contrastul textului și inelele de focus. Niciuna nu se bazează doar pe culoare pentru stare — fiecare stare activă schimbă și forma, greutatea sau poziția. Un utilizator care nu poate vedea diferența de culoare dintre Sonic Teal și Neon Orange ar trebui totuși să-și dea seama că un buton e apăsat.

Următoarea ta piesă e la un prompt gratuit distanță

Deschide studioul, scrie starea, ascultă o piesă finalizată în 30 de secunde. Gratuit la început, fără royalty la lansare, fără card necesar.