Výchozí vzhled hudebního nástroje určuje žánr hudby, kterou v něm lidé tvoří. Černo-fialový synth nástroj postrkuje lidi k synth skladbám. Teplý papírový folk nástroj je postrkuje k folkovým skladbám. Chtěli jsme, aby aisonggen působil žánrově neutrálně, proto má čtyři motivy, které všechny stojí rovnocenně u vchodu.
Čtyři nálady, na kterých jsme se shodli
- Sonic Teal — chladný, klinický výchozí. Vypadá jako uvnitř masteringového studia po půlnoci. Nejlepší pro ambient, techno, cokoli, kde je píseň spíše architektura než příběh.
- Neon Orange — hlasitý, žhavý. Výchozí brand. Vypadá jako východ z klubu ve dvě ráno. Nejlepší pro trap, hyperpop, cokoli, kde je energie tím hlavním.
- Studio Black — tichý, nákladně vyhlížející. Antracit a zlato. Vypadá jako kytarový aparát z kůže. Nejlepší pro jazz, soul, písničkářské polohy, které chtějí být brány vážně.
- Electric Magenta — hravý. Růžová a chrom. Vypadá jako uvnitř Y2K hudebního klipu. Nejlepší pro pop, dance, cokoli, kde je dovoleno, aby vtip byl zjevný.
Co nás motivy stály
Designovat pro jeden motiv znamená tisíc malých rozhodnutí o
kontrastu, hierarchii a důrazu. Designovat pro čtyři je stejných
tisíc rozhodnutí, čtyřikrát — a všechna musí dosednout na stejnou
komponentu, aniž by se to rozbilo. Způsob, jak jsme to udělali
zvládnutelným, byl přesunout všechny barvy do tokenového systému,
takže komponenty samy nikdy nesahají po hex kódu, pouze po roli:
--primary, --accent, --bg-elevated. Motivy mění
hodnoty; komponenty se nemění vůbec.
Co nám to dalo
Věc, kterou jsme nečekali: lidé začali vybírat motivy podle žánrového kontextu, ne podle osobního vkusu. Producent pracující na trap beatu přepnul na Neon Orange, i když jeho výchozí byl Sonic Teal. Přepínač motivů přestal být dropdownem v nastaveních a stal se součástí workflow — způsobem, jak naladit místnost do správné nálady pro píseň, kterou jste zrovna psali.
Poznámka k přístupnosti
Všechny čtyři motivy splňují WCAG AA pro kontrast textu a focus rings. Žádný z nich se nespoléhá pouze na barvu pro stav — každý aktivní stav také mění tvar, váhu nebo polohu. Uživatel, který nevidí barevný rozdíl mezi Sonic Teal a Neon Orange, by měl stále poznat, že tlačítko je stisknuté.