Il sistema condiviso

Il problema

Sette testate, sette redazioni, un solo team di design. Fanpage.it, Cookist, Geopop, Ohga, e poi Wamily, Kodami e Lexplain. Ogni verticale nuovo ripartiva da zero: griglie ridisegnate, componenti riscritti, decisioni già prese una volta da riprendere daccapo.

I vincoli

Le identità di marca non erano negoziabili, ed erano lontanissime fra loro. Fanpage è nero e serif, Cookist è arancione e tondo, Geopop è giallo su nero, Ohga è verde e scritto a mano. Un sistema che le appiattiva sarebbe stato rifiutato dalle redazioni il primo giorno.

Non erano nemmeno lo stesso mestiere. Fanpage fa cronaca, Cookist ricette, Geopop divulgazione, Ohga benessere e ambiente. Cambia il motivo per cui uno apre la pagina, e quindi cambia cosa deve trovarci per primo.

Sopra ci stava traffico grande abbastanza da rendere ogni regressione di performance un problema di ricavi, non di estetica.

Dove passa la linea

Ho separato quello che poteva essere condiviso da quello che doveva restare libero, e ho messo il confine in un punto preciso: condivisa la struttura della lettura, libera l’identità.

Nel condiviso: griglia, scala tipografica, spaziature, gerarchia dell’articolo, componenti di navigazione e di lista. Nel libero: colore, famiglia tipografica, forma degli angoli, trattamento delle immagini.

La parte difficile non è stata costruire i componenti. È stata decidere dove passasse quella linea, e difenderla quando ogni redazione chiedeva l’eccezione.

I token, cioè le decisioni scritte una volta

Un token è una decisione a cui è stato dato un nome, così che smetta di essere una discussione. Sotto il sistema ce ne sono quattro famiglie, sempre quelle: la scala tipografica, la scala degli spazi, la griglia, e i colori chiamati per funzione invece che per tinta.

L’ultima è quella che fa il lavoro vero. Finché un colore si chiama “arancione” appartiene a una testata sola e non si può spostare. Quando si chiama “fondo”, “testo”, “linea”, “accento”, la stessa card funziona su quattro marche diverse senza che nessuno riscriva niente: cambia il valore, non il componente.

I livelli sono tre, e servono a tenere separate tre domande. Il valore grezzo: questo grigio, questi sedici pixel. Il nome funzionale: questo è il testo secondario. L’uso nel componente: la didascalia di una card usa il testo secondario. Chi cambia un colore di marca tocca solo il livello di mezzo, e non deve sapere quali componenti sta toccando.

I tempi e le curve del movimento stanno lì insieme agli altri. È la cosa che viene dimenticata più spesso, e si vede: quattro testate dello stesso gruppo dove i menu si aprono a quattro velocità diverse sembrano quattro aziende.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

I componenti, e la regola per farne di nuovi

Nel condiviso stanno i pezzi che ogni testata usa senza accorgersene: la testata di pagina con la sua navigazione, la card di articolo in tre densità, le liste e le loro paginazioni, il blocco dei correlati, il piede, i moduli di iscrizione, gli stati vuoti e quelli di errore. Sono pochi, ed è voluto: un catalogo che cresce a ogni richiesta smette di essere un sistema e diventa una cartella.

Le tre regole che l’hanno tenuto piccolo.

Un componente entra nel condiviso quando serve alla seconda testata, non alla prima. Alla prima è una soluzione, alla seconda è un pattern.

L’eccezione si fa nel tema, mai nel componente. Se una redazione vuole la card con l’immagine più alta, quella misura diventa un token e la card resta una sola. Se vuole la card con un pezzo in più, la risposta è no, e la discussione si sposta su cosa toglie.

Chi chiede una variante deve dire cosa smette di funzionare senza. Metà delle richieste finiscono lì, e non perché qualcuno le respinga: finiscono perché la domanda non ha una risposta, e chi l’ha fatta se ne accorge da solo.

Cosa ho lasciato fuori

Le home. Sono la vetrina di una redazione e cambiano più volte al giorno: regolarle dal sistema vorrebbe dire mettersi fra la redazione e il suo mestiere. Il sistema dà i blocchi, l’ordine lo fa chi scrive.

I format seriali. Una serie con un nome proprio ha bisogno di segni suoi, e quelli si progettano sulla serie.

Il tono. Un sistema può dire quanto è grande un titolo, non come si scrive.

Il risultato

Il sistema ha retto sette testate. Tre di queste non sono più aggiornate, e sono rimaste online in tre modi diversi.

Wamily ha spento la home lasciando raggiungibili archivio e categorie, per non buttare il traffico storico. Kodami ha tenuto il proprio marchio ed è finito sotto Fanpage. Lexplain è rimasto in piedi, navigabile, semplicemente fermo.

Tre uscite diverse, nessuna riscrittura, nessun intervento sulle testate ancora attive.

È la parte che quasi nessuno riesce a raccontare di un design system, perché chi lo progetta raramente resta abbastanza a lungo da vedere come finiscono i prodotti. Un sistema non si giudica solo da quanto in fretta fa nascere un verticale. Si giudica da quante uscite diverse regge senza rompere il resto.