Il mirino sopra la Terra

La schermata che ho tenuto è quasi vuota. C’è la Terra vista dall’alto, scurita da un velo nero come un vetro fumé. Sopra c’è un titolo enorme e sottilissimo, in maiuscolo, con le righe strette. Sotto, piccolo e spaziato, il sottotitolo. Poi un pulsante con quattro squadrette agli angoli, come un mirino, che dice «INITIATE SYSTEM» in carattere monospazio. Nient’altro: niente menu, niente frecce, niente «scopri di più».

Mi ha colpito perché è il contrario di quello che faccio di solito. Io tendo ad aggiungere: un’altra sezione, un altro collegamento, un’altra rassicurazione. EDOLUS toglie finché resta una sola cosa da fare, e quella cosa la fai. La gerarchia ha due livelli, grandissimo e piccolo, e in mezzo non c’è niente. Funziona proprio perché non c’è un terzo livello a fare confusione.

L’attesa come conto alla rovescia

Prima ancora della Terra c’è il caricamento: schermo nero, logo grande, una percentuale in monospazio che sale. Di solito un caricatore è una scusa. Qui fa già parte del racconto, come quando un sistema si accende. Sul telefono fa lo stesso effetto. E poi l’invito a mettere le cuffie, che promette suono e una storia dopo il clic.

Su cosa succeda dopo devo essere onesta. I tag e le librerie parlano di GSAP, WebGL, shader, audio. Ho visto il video di sfondo e il contatore. Il resto, le scene 3D, le dissolvenze guidate da una timeline, l’eventuale Three.js sotto, sono ipotesi ragionevoli che non ho verificato. Nel quaderno le ho scritte proprio come ipotesi, perché tra sei mesi la me che le rileggerà non deve scambiarle per fatti.

Il blu che non era di nessuno

C’è una piccola figuraccia da raccontare. Fra i colori del sito è saltato fuori un #0000EE, e per un attimo l’ho segnato come colore del marchio, un tocco di blu elettrico in mezzo al bianco e nero. Poi l’ho riconosciuto: è il blu predefinito dei link del browser, quello dei siti degli anni Novanta. Non è una scelta di nessuno, è solo rimasto lì. La palette vera è nero, bianco, un grigio chiaro per il testo secondario e due grigi profondi per veli e superfici. È una lezione piccola ma vale: quando leggo un colore dentro un sito devo chiedermi se qualcuno l’ha voluto, prima di copiarlo nel quaderno.

Cosa metto da parte

La prima cosa è l’hero con il video velato: un’immagine in movimento sotto un nero al 50-70%, così il testo bianco si legge sempre. Va bene solo con un file leggero e un’immagine di anteprima, e sul telefono meglio una foto ferma, perché il video costa caro a Lighthouse e al primo caricamento.

La seconda è il pulsante a mirino. Bastano due pseudo-elementi e un carattere mono, non pesa niente e dà subito l’aria da interfaccia di sistema. L’unica attenzione è non perdere il contorno di focus per chi naviga da tastiera.

La terza è la coppia di caratteri: una sans sottile per i titoli e una mono per i dettagli. Con una regola che mi sono scritta in grassetto: il peso Light si usa solo dai 48 pixel in su. Più piccolo, nel testo corrente, diventa una ragnatela illeggibile.

La quarta è il caricamento con la percentuale, e qui l’avvertenza è più lunga della tecnica. Va bene solo per le pagine-esperienza, quelle piene di risorse che si visitano una volta. Su un sito di contenuti fa solo arrabbiare: nessuno vuole aspettare per leggere gli orari di apertura.

La quinta è l’entrata del testo con una timeline GSAP, sempre rispettando chi ha chiesto al sistema di ridurre le animazioni. GSAP è la prima cosa che voglio imparare bene da questo studio.

La cosa più utile però non è una tecnica. È il coraggio di un solo pulsante. Lo proporrò per le pagine evento e i lanci, non per i siti istituzionali. Ma ogni volta che sarò tentata di aggiungere una sezione, penserò a quella Terra scura con un mirino sopra.