KO·PADS: Taste pe care le simți înainte să le atingi

Pe Uiverse am dat peste un mic set de patru taste făcut de Praashoo7: două gri deschis, cu minus și plus, una roșie RECORD și una închisă la culoare PLAY. Arată ca și cum cineva le-ar fi deșurubat de pe un aparat adevărat. Sursa de inspirație a fost EP-133 K.O. II de la Teenage Engineering.

Am vrut să aflu cât de departe merge senzația asta dacă construiești un aparat întreg pornind de la ea. Rezultatul este KO·PADS: un mini-sampler pe care se poate cânta direct în browser.

Încearcă-l: KO·PADS live

Ce este neumorfismul?

Neumorfismul, numit și soft UI, se situează între flat design și skeuomorfism. Nu imită materiale precum pielea sau metalul periat. În schimb, modelează suprafețele doar din lumină și umbră. La taste, totul se reduce la trei straturi:

• O umbră exterioară moale ridică tasta deasupra carcasei.
• O margine interioară luminoasă arată unde cade lumina.
• O umbră interioară la apăsare face tasta să se scufunde.

Tehnic, sunt doar câteva rânduri de box-shadow. Efectul este totuși surprinzător: ochiul citește înălțimea, iar creierul adaugă greutate și rezistență. Știi cum se va simți tasta înainte s-o atingi. Tocmai această anticipare face o interfață primitoare.

Ce știe să facă aparatul

• 12 pad-uri cu tobe sintetizate, generate live cu Web Audio API
• 4 grupuri: tobe, percuție, lo-fi și un synth la care pad-urile cântă note
• PLAY, RECORD și ERASE: rulează o buclă demo, loviturile pe pad-uri sunt înregistrate peste ea și redate la fiecare trecere
• Două potențiometre pentru filtru și tonalitate, controlabile cu mouse-ul, prin atingere, cu rotița mouse-ului și cu tastatura
• Un LCD cu afișaj de pași și un indicator de nivel cu LED-uri. Iar volumul merge, bineînțeles, până la 11.

Ce am învățat pe parcurs

Drumul până la pagina finală a fost mai puțin drept decât lasă rezultatul să se vadă. Câteva lucruri pe care le iau cu mine:

• Lumina are nevoie de o direcție. Imediat ce umbrele cad pe un element în diagonală și pe altul vertical, totul pare strâmb, deși fiecare margine este dreaptă.
• 3D-ul real nu e mereu mai bun. Un aparat înclinat cu CSS 3D arăta ca o fotografie de produs, dar unele taste nu mai puteau fi apăsate. Când elementele se află în același plan 3D, browserul nimerește la click uneori tasta, alteori carcasa de dedesubt. O vedere dreaptă, cu marginea carcasei vizibilă și o umbră moale pe podea, pare aproape la fel de tridimensională și funcționează fiabil.
• Umbrele nu trebuie să se rotească odată cu butonul. La început, potențiometrele se roteau cu tot cu umbră. Abia separarea într-o bază fixă și un capac care se rotește a făcut efectul credibil.
• Micile ciudățenii ale browserului contează. Originalul stă atât de curat, pătrat, în rama neagră pentru că butoanele nu moștenesc dimensiunea fontului. Cu font: inherit tastele au devenit brusc mai mari decât rama lor.
• Neumorfismul are o problemă de contrast. Gri pe gri arată elegant, dar se citește greu. De aceea, etichetele au text închis la culoare, toate elementele de control au contururi de focus vizibile și totul se poate folosi de la tastatură.

Tehnologie

Pagina funcționează fără framework, fără dependențe și fără build: HTML, CSS și JavaScript simplu, ca module ES, găzduite pe GitHub Pages. Toate sunetele sunt create în browser din oscilatoare, zgomot și filtre. Singurul fișier audio este bucla demo, și chiar și aceasta este generată de un mic script Python.

Codul este împărțit în clase cu responsabilități clare: un motor audio, un instrument, grupuri de sunete, un looper cu lookahead scheduling, afișajul, potențiometrele și un controller care le leagă pe toate. Looper-ul și potențiometrele anunță schimbările prin evenimente și nu știu nimic despre interfață.

Concluzia mea

Neumorfismul nu este un stil potrivit pentru orice interfață. Dar acolo unde o interfață trebuie să fie distractivă, aduce înapoi ceva ce flat design-ul a pierdut: senzația de a ține în mână ceva real.