Domyślny wygląd narzędzia muzycznego ustawia gatunek muzyki, którą ludzie tworzą za jego pomocą. Czarno-fioletowe narzędzie syntezatorowe popycha ludzi w stronę utworów synth. Ciepło-papierowe narzędzie folkowe popycha ich w stronę folku. Chcieliśmy, żeby aisonggen wydawał się neutralny gatunkowo, więc ma cztery motywy, które wszystkie zajmują równorzędne miejsce na froncie.
Cztery nastroje, na których ostatecznie się zatrzymaliśmy
- Sonic Teal — chłodny, kliniczny domyślny. Wygląda jak wnętrze studia masteringowego po północy. Najlepszy do ambient, techno, wszystkiego, gdzie utwór jest bardziej architekturą niż historią.
- Neon Orange — głośny, gorący. Domyślny brand. Wygląda jak wyjście z klubu o 2 w nocy. Najlepszy do trapu, hyperpopu, wszystkiego, gdzie sednem jest energia.
- Studio Black — cichy, drogi. Grafit i złoto. Wygląda jak wzmacniacz gitarowy zrobiony ze skóry. Najlepszy do jazzu, soulu, do singer-songwriter, które chce być traktowane poważnie.
- Electric Magenta — zabawny. Róż i chrom. Wygląda jak wnętrze teledysku z epoki Y2K. Najlepszy do popu, dance, wszystkiego, gdzie żart może być oczywisty.
Co kosztowały nas te motywy
Projektowanie pod jeden motyw to tysiąc małych decyzji o
kontraście, hierarchii i akcencie. Projektowanie pod cztery to ten sam
tysiąc decyzji, razy cztery — i muszą trafić w ten sam
komponent bez psucia go. Sposobem, w jaki uczyniliśmy to wykonalnym, było
przeniesienie każdego koloru do systemu tokenów, żeby same komponenty
nigdy nie sięgały po kod hex, tylko po rolę: --primary,
--accent, --bg-elevated. Motywy zmieniają wartości, a
komponenty nie zmieniają się w ogóle.
Co nam to dało
Rzecz, której się nie spodziewaliśmy: ludzie zaczęli wybierać motywy według kontekstu gatunkowego, a nie własnego gustu. Producent pracujący nad trapowym beatem przełączał się na Neon Orange, nawet jeśli jego domyślnym był Sonic Teal. Przełącznik motywów przestał być rozwijaną listą ustawień, a zaczął być częścią workflow — sposobem na ustawienie pomieszczenia we właściwym nastroju do utworu, który akurat piszesz.
Notka o dostępności
Wszystkie cztery motywy spełniają WCAG AA pod kątem kontrastu tekstu i obwódek fokusa. Żaden z nich nie polega wyłącznie na kolorze przy oznaczaniu stanu — każdy aktywny stan zmienia też kształt, grubość lub pozycję. Użytkownik, który nie widzi różnicy kolorów między Sonic Teal a Neon Orange, powinien wciąż móc rozpoznać, że przycisk jest wciśnięty.