Brand & Surface
Brand e superficie
Ciò che si vede e come suona. Minimalismo radicale, tipografia, voce di studio e traduzione che preserva il senso. Il criterio estetico di XNLAB applicato a tutto.
BS-01 Minimalismo radicale
lezione Fai l'audit di una schermata reale e consegna un before/after in cui ogni elemento eliminato è giustificato da una decisione, non da una preferenza estetica.
Minimalismo radicale
lezioneFai l'audit di una schermata reale e consegna un before/after in cui ogni elemento eliminato è giustificato da una decisione, non da una preferenza estetica.
Il minimalismo radicale di XNLAB non è estetica: è un metodo decisionale. La maggior parte degli operatori crede che "ripulire" un'interfaccia significhi abbassare le opacità e aggiungere aria. In realtà è il contrario: ogni elemento che sopravvive deve guadagnarsi il posto rispondendo a una domanda concreta (cosa fa l'utente qui? quale decisione prende?). Chirurgia, non decorazione. Senza un metodo esplicito, "minimalista" degenera in "vuoto e arbitrario", che è peggio del sovraccarico: sembra trascurato. L'antidoto è un audit con un criterio scritto, dove togliere è un'azione difendibile e reversibile, non un impulso.
LA LEZIONE
Il minimalismo radicale è un metodo di eliminazione, non uno stile visivo. Per default si toglie; aggiungere è l'eccezione su cui ricade l'onere della prova.
Ogni elemento di una schermata deve rispondere a una domanda dell'utente in quel momento. Se non risponde a nessuna, è rumore anche se è bello.
Un before/after senza giustificazione scritta è un'opinione. Con la giustificazione diventa un audit: difendibile davanti a un cliente, ripetibile da un'altra persona, reversibile se i dati lo smentiscono.
Il vuoto arbitrario (abbassare l'opacità, infilare aria senza ragione) si legge come trascuratezza, non come sofisticazione. Un minimalismo fatto male sembra una pagina rotta.
La regola XNLAB è conservativa ma non dogmatica: il default è l'editing chirurgico, rivedibile con dati di conversione, non una legge morale.
ESERCIZIO
Prendi una schermata densa che esista già (una landing, una dashboard, un form; va bene anche quella di MOONKEY stesso). Cattura lo stato attuale come 'before'. Elenca ogni elemento visibile in una tabella. Per ciascuno rispondi in una riga: quale decisione dell'utente serve qui e ora? Marca come candidato all'eliminazione tutto ciò che non risponde. Applica i tagli e cattura l''after'. Scrivi accanto a ogni eliminazione la ragione (ridondante / non risponde a nessuna decisione / spostabile in un'altra vista / decorativo senza funzione). Verifica che nessun taglio abbia rotto un'attività che l'utente ha davvero bisogno di completare.
CONSEGNA
Un audit before/after di una schermata reale: le due catture, la tabella degli elementi con la loro domanda-dell'utente, e la lista delle eliminazioni con la relativa giustificazione scritta in una riga ciascuna. Reversibile: chiunque può leggere perché ogni cosa è stata tolta e annullarlo se un dato lo smentisce.
INTUIZIONE CHIAVE
Togliere è la decisione più difficile da difendere perché non lascia traccia; per questo la ragione va scritta prima di cancellare, non dopo. L'audit trasforma il minimalismo da opinione in metodo.
ERRORI DA EVITARE
- ×Confondere il minimalismo con l'abbassare le opacità e l'infilare aria: questo è vuoto arbitrario, non chirurgia. Il risultato sembra trascurato, non premium.
- ×Togliere elementi che invece sostengono un'attività dell'utente e rompere il flusso pur di inseguire la pulizia visiva.
- ×Non documentare la ragione di ogni taglio: senza giustificazione scritta l'audit è irreversibile e non si può difendere davanti al cliente.
- ×Trattare la regola come legge morale inviolabile invece che come default rivedibile con dati di conversione.
BS-02 Tipografia con intenzione
lezione Costruisci una coppia di titoli che mescolano il sans Inter con span in corsivo serif (Cormorant) senza che l'occhio percepisca lo scarto, e documenta la correzione di dimensione che lo fa funzionare.
Tipografia con intenzione
lezioneCostruisci una coppia di titoli che mescolano il sans Inter con span in corsivo serif (Cormorant) senza che l'occhio percepisca lo scarto, e documenta la correzione di dimensione che lo fa funzionare.
Mescolare un sans (Inter) con un corsivo serif (Cormorant) dentro lo stesso titolo è uno dei gesti tipografici con più rendimento e più trappole. La trappola concreta e verificata in XNLAB: il corsivo serif ha un'x-height minore, quindi alla stessa font-size appare otticamente più piccolo e il titolo sembra rotto, come se il corsivo sprofondasse. L'operatore che non conosce l'aggiustamento lo lascia così e il risultato stride senza che capisca perché. La correzione non è teorica: è un bump esplicito di font-size sullo span in corsivo (~1.18–1.2em) per pareggiare l'altezza percepita. Saperlo è la differenza tra una tipografia con intenzione e due font che litigano.
LA LEZIONE
La font-size nominale non è la dimensione percepita. Quello che l'occhio misura è l'x-height, e il corsivo serif ce l'ha più bassa del sans, quindi agli stessi px appare più piccolo.
L'aggiustamento verificato per Inter + Cormorant corsivo è un bump di fontSize a 1.18-1.2em sullo span serif. Non è opzionale: senza, il titolo si legge rotto.
Il corsivo serif si usa per una parola o una frase con peso semantico dentro un titolo sans, non per decorare a caso. Il contrasto deve segnalare qualcosa, non solo apparire bello.
L'intenzione tipografica si dimostra: lo span corretto e lo span non corretto, fianco a fianco, rendono il problema visibile e la soluzione innegabile.
ESERCIZIO
Scrivi due titoli di XNLAB in cui una parola chiave va in corsivo serif dentro testo sans (es: un sostantivo che porta il senso). Renderizza ciascuno due volte: una con lo span in corsivo alla stessa font-size del sans, l'altra con fontSize:'1.18em' sullo span. Confronta le due versioni fianco a fianco e conferma con l'occhio (non con il numero) quale pareggia l'altezza percepita. Annota il valore esatto che funziona per la tua coppia tipografica. Se lo scarto resta visibile, sali verso 1.2em e ricontrolla.
CONSEGNA
Una coppia di titoli italic-mix funzionanti, ciascuno accompagnato dal suo confronto 'non corretto / corretto' che rende visibile il problema dell'x-height, più la riga di CSS esatta (fontSize:'1.18em' o il valore che funziona) documentata come decisione riutilizzabile.
INTUIZIONE CHIAVE
La tipografia con intenzione si nota proprio quando non si nota: se il lettore percepisce lo scarto tra sans e serif, hai fallito. L'aggiustamento dell'x-height è invisibile se ben fatto e ovvio se fatto male.
ERRORI DA EVITARE
- ×Dare per scontato che stessa font-size significhi stessa dimensione visiva: ignora l'x-height e lascia il titolo sprofondato nel corsivo.
- ×Usare il corsivo serif come decorazione senza peso semantico: il contrasto tipografico deve segnalare qualcosa, non riempire.
- ×Verificare l'aggiustamento col numero (1.18em) e non con l'occhio: il valore esatto dipende dalla coppia di font e dalla dimensione; va guardato.
- ×Applicare il bump globalmente invece che allo span specifico, rompendo il resto della gerarchia.
BS-03 Voce di studio
lezione Scrivi un copy deck di una pagina reale (hero + tre sezioni) nella voce di studio anonima che superi il test "verità o marketing?": ogni frase o è verificabile o si cancella.
Voce di studio
lezioneScrivi un copy deck di una pagina reale (hero + tre sezioni) nella voce di studio anonima che superi il test "verità o marketing?": ogni frase o è verificabile o si cancella.
La voce di XNLAB è anonima per design: studio, mai persona. Non c'è un fondatore con nome, né bio, né foto, né "io credo che". Sembra facile ed è la cosa più difficile: senza un io a cui appellarsi, l'unica autorità che resta è la precisione. L'errore tipico dell'operatore è riempire il vuoto con fumo —"trasformiamo il tuo business", "risultati eccezionali", "passione per il dettaglio"— frasi che non dicono nulla di verificabile. La voce di studio si regge sul contrario: affermazioni che o sono verità dimostrabile o non si scrivono. Lo stato legale di XNLAB lo impone alla lettera: non inventare NIF, indirizzo né dati di registrazione; marcare come non registrato ciò che non lo è. Il copy deck è l'artefatto in cui questa disciplina diventa testabile.
LA LEZIONE
La voce di studio è anonima: mai prima persona singolare, mai nome del fondatore, mai bio. L'autorità viene dalla precisione, non da chi parla.
Il test 'verità o marketing?': ogni frase si etichetta. Se è verificabile, resta. Se è promessa vuota o aggettivo senza supporto, si cancella o si riscrive come fatto.
Le promesse vuote ('trasformiamo', 'eccezionale', 'leader') sono rumore che abbassa la credibilità di tutto ciò che le circonda, incluso ciò che invece è vero.
L'onestà legale è parte della voce: non inventare dati dell'entità. Ciò che non è registrato si marca come non registrato; il ciclo si descrive com'è ('Open.'), non come conviene.
Anonimo non è freddo. La voce è diretta e concreta —il calore viene dal rigore e dal parlare di cose reali, non da confessioni personali.
ESERCIZIO
Scegli una pagina (home o /contact). Scrivi l'hero e tre sezioni nella voce di studio. Poi passa ogni frase attraverso il test: in una colonna incolli la frase, nell'altra scrivi 'verità' (e come si verifica) o 'marketing' (e perché è fumo). Ogni frase marcata 'marketing' si riscrive come fatto verificabile o si elimina. Controlla che non sia passato nessun 'io', nessun nome proprio, nessun dato dell'entità inventato. Conferma che lo stato del ciclo sia descritto com'è davvero, non come venderebbe meglio.
CONSEGNA
Un copy deck di una pagina reale (hero + 3 sezioni) con accanto la sua tabella di test 'verità o marketing?': ogni frase finale classificata come verità-verificabile, senza una sola promessa vuota sopravvissuta e senza dati dell'entità inventati. Pronto da incollare nella pagina.
INTUIZIONE CHIAVE
Togliere l'"io" obbliga ogni frase a farsi carico della prova, non la persona; per questo la voce anonima è il rilevatore di fumo più severo che esista. Se un'affermazione ha bisogno di un nome dietro per reggersi, non era verità: era marketing.
ERRORI DA EVITARE
- ×Riempire l'assenza del fondatore con superlativi ('eccezionale', 'leader', 'trasformatore') invece che con fatti verificabili.
- ×Far passare la prima persona o un nome proprio e rompere l'anonimato dello studio.
- ×Inventare dati dell'entità (NIF, indirizzo, registrazione) per sembrare consolidati: viola lo stato legale reale e si nota.
- ×Confondere anonimo con freddo e scrivere un copy senza vita: il calore viene dal rigore e dal concreto, non da un io.
- ×Descrivere il ciclo come conviene commercialmente ('resta un posto') invece che com'è ('Open.').
BS-04 Tradurre preservando il senso
lezione Produci una coppia EN/ES di un blocco di copy in cui lo spagnolo dica la stessa cosa dell'inglese —non il letterale— e consegna le note di ogni decisione di senso.
Tradurre preservando il senso
lezioneProduci una coppia EN/ES di un blocco di copy in cui lo spagnolo dica la stessa cosa dell'inglese —non il letterale— e consegna le note di ogni decisione di senso.
Tradurre il copy di XNLAB non è sostituire parole: è preservare il significato attraverso due lingue con grammatiche diverse. L'errore documentato e ricorrente è lo specchio lessicale: tradurre 'Not X' come 'Sin X' quando l'inglese segnalava un confronto (non un'assenza) e lo spagnolo lo trasforma in qualcos'altro. Lo stesso col passaggio dal passivo inglese al riflessivo spagnolo, o con modificatori e verbi che cadono senza che nessuno se ne accorga. Ognuno di questi scivoloni sposta il senso di un grado, e tre gradi dopo la pagina in spagnolo dice qualcosa che l'inglese non ha mai detto. L'unica difesa è leggere ogni riga in spagnolo da nativo —non da traduttore— e verificare che l'affermazione sia la stessa, non che le parole coincidano.
LA LEZIONE
Tradurre è preservare il senso, non rispecchiare il lessico. La domanda giusta non è 'questa parola esiste in spagnolo?' ma 'questa frase afferma la stessa cosa?'.
'Not X' → 'Sin X' è la trappola principale: assenza vs confronto. L'inglese a volte mette a confronto, e 'Sin X' lo trasforma in una mancanza che l'originale non diceva.
Il passivo inglese che diventa riflessivo spagnolo può cambiare chi compie l'azione e la responsabilità implicita. Bisogna controllare l'agente, non solo la forma.
Modificatori e verbi cadono nella traduzione senza preavviso. Un aggettivo perso o un verbo appiattito abbassa la temperatura o cambia la forza dell'affermazione.
Il controllo di qualità è leggere ogni riga ES da nativo, non confrontarla con l'EN parola per parola. Se suona come una traduzione, è una traduzione; se suona come un originale, va bene.
ESERCIZIO
Prendi un blocco EN reale (hero o sezione con affermazioni cariche). Traducilo in spagnolo dando priorità al senso. Poi fai l'audit riga per riga: qualche 'Not X' è diventato 'Sin X' scambiando confronto con assenza? qualche passivo è diventato riflessivo spostando l'agente? è caduto qualche modificatore o verbo? Per ogni riscontro, annota la decisione: cosa diceva l'inglese, cosa diceva la tua prima bozza, cosa hai messo e perché preserva il senso. Leggi la versione finale in spagnolo ad alta voce da nativo e conferma che afferma esattamente la stessa cosa dell'inglese.
CONSEGNA
Una coppia EN/ES di un blocco reale con le sue note di traduzione: per ogni riga a rischio (Not X / passivo-riflessivo / modificatore caduto), la decisione documentata su come si è preservato il senso. L'ES supera la lettura da nativo senza sapere di traduzione.
INTUIZIONE CHIAVE
Una traduzione corretta parola per parola può essere una menzogna frase per frase; lo specchio lessicale è la via più rapida per dire qualcosa che l'originale non ha mai affermato. Preservare il senso a volte richiede di allontanarsi dalle parole.
ERRORI DA EVITARE
- ×Specchio lessicale: 'Not X' → 'Sin X' trasformando un confronto in un'assenza che l'inglese non enunciava.
- ×Lasciare che il passivo inglese diventi riflessivo spagnolo e sposti l'agente o la responsabilità implicita.
- ×Perdere modificatori o verbi nel passaggio e appiattire la forza dell'affermazione senza accorgersene.
- ×Verificare confrontando parola per parola con l'EN invece di leggere l'ES da nativo: lo specchio lessicale supera quella prova e mente comunque.
BS-05 Colore e profondità
lezione Documenta un sistema di colore e profondità (glass, bande, campi di colore) come insieme di regole e token riutilizzabili, con campioni che dimostrino che dà vita senza introdurre rumore.
Colore e profondità
lezioneDocumenta un sistema di colore e profondità (glass, bande, campi di colore) come insieme di regole e token riutilizzabili, con campioni che dimostrino che dà vita senza introdurre rumore.
Colore e profondità sono il punto in cui una superficie minimalista guadagna vita o si rompe. Glass, bande di colore e campi di sfondo possono far respirare una pagina piatta —o trasformarla in un carnevale che contraddice il minimalismo radicale di BS-01. La differenza tra i due risultati non è il gusto: è un sistema. Senza regole scritte (quando usare glass, quale intensità, quale profondità di campo, cosa si anima e cosa no), ogni schermata improvvisa e l'insieme perde coerenza. C'è inoltre una trappola di verifica documentata in XNLAB: le animazioni di sfondo si mettono in pausa quando la scheda non è attiva, quindi un read dell'opacità mente; la profondità animata si verifica con la cattura visiva, non leggendo i valori. Il deliverable è il sistema scritto: token, regole e campioni che chiunque può applicare senza reinventarlo.
LA LEZIONE
Colore e profondità danno vita solo dentro un sistema. Glass, bande e campi senza regole degenerano in rumore che contraddice il minimalismo.
Il sistema si scrive come token e regole: quando usare glass, quale intensità, quale profondità di campo, cosa si muove e cosa resta fermo. Riutilizzabile, non improvvisato per ogni schermata.
Mai interpolare classi di colore dinamiche (bg-${theme}): rompe il JIT di Tailwind. I temi si dichiarano come voci esplicite nella mappa di THEME.
Le animazioni di sfondo si mettono in pausa con la scheda inattiva: un read dell'opacità restituisce un valore falso. La profondità animata si verifica con uno screenshot, non leggendo il DOM.
Il criterio è 'vita senza rumore': se un campo di colore o un glass non aggiunge gerarchia o respiro, è di troppo. La profondità serve alla lettura, non si esibisce.
ESERCIZIO
Fai l'inventario delle risorse di profondità che la superficie già usa (glass, bande, blobs, campi di sfondo). Per ciascuna scrivi la regola: quando si usa, a quale intensità, quale gerarchia serve, se si anima o no. Convertile in token nominati. Renderizza un campione con il sistema applicato e un altro senza, fianco a fianco, per dimostrare che la versione con sistema dà vita senza alzare il rumore. Verifica qualunque livello animato con uno screenshot a scheda attiva, non leggendo l'opacità (che mente con la scheda in background). Conferma che nessun colore venga interpolato in una classe dinamica.
CONSEGNA
Un sistema documentato di colore e profondità: token nominati + regole d'uso (quando/quale intensità/cosa si anima) + una coppia di campioni con-sistema / senza-sistema che dimostra 'vita senza rumore', verificati con cattura visiva. Riutilizzabile da qualunque schermata senza reinventare il criterio.
INTUIZIONE CHIAVE
La profondità fatta bene si percepisce come aria e fatta male come rumore, e l'unico modo di restare dal lato giusto su scala è un sistema scritto, non il buon gusto schermata per schermata. E non fidarti mai di un read dell'opacità: la scheda addormentata ti mentirà.
ERRORI DA EVITARE
- ×Improvvisare glass, bande e campi schermata per schermata senza regole: l'insieme perde coerenza e il minimalismo si rompe.
- ×Interpolare classi di colore dinamiche (bg-${theme}) e rompere il JIT di Tailwind, lasciando stili che non compilano.
- ×Verificare la profondità animata leggendo l'opacità nel DOM: l'animazione si mette in pausa con la scheda inattiva e il valore letto mente. Bisogna fare uno screenshot.
- ×Introdurre campi di colore o glass che non aggiungono gerarchia né respiro: decorazione che alza il rumore e tradisce 'vita senza rumore'.
Costellazione successiva
Ops & Security
La disciplina