Ho fatto una cosa nuova, si chiama Guido

15 maggio 2014
Argomenti:

Che cosa ho imparato lavorando al nuovo sito di Federico Novaro

Da un paio di settimane è online il nuovo sito di Federico Novaro. Ci ho lavorato per qualche mese con lui e con Christel Martinod – che è una fantastica Art Director – e ne è venuta fuori la cosa più bella che abbia mai fatto, fin ora. Questo è quello che ho imparato facendolo.

Ne parlavamo con Filippo un pomeriggio a Milano, di come scrivere codice fosse scrittura a tutti gli effetti, e mentre ne parlavamo io stavo già lavorando al nuovo sito di Federico, ma non me n’ero ancora accorto davvero di quanto fosse vero quello che Filippo mi stava dicendo – e infatti lo guardavo con aria un po’ smarrita, mi sa. Al di là della mezza retorica del «Code is Poetry», è una questione di intenzionalità e di semantica. Quanto il codice che scrivo riflette le mie intenzioni? Quanto il codice che scrivo ha un significato preciso all’interno di un contesto, e dice quello che deve dire in modo significativo non solo per la macchina, ma anche per me – e viceversa? Quanto si avvicina a una lingua umana, e quindi è leggibile – per chi ne padroneggia il lessico e la sintassi, ma questa è tecnica, e la tecnica si apprende – e quindi non solo comprensibile, ma anche trasparente e autoevidente nelle sue regolarità e nei suoi meccanismi? Scrivendo codice – di questo mi sono accorto – ricerco la stessa chiarezza, la stessa semplicità e la stessa leggerezza che provo a raggiungere ogni volta che scrivo altro, e più volte lavorando al sito di Federico mi sono trovato a riscrivere da capo intere parti perché fossero più chiare, succinte e coerenti con quanto avevo scritto prima e avrei scritto dopo. Volevo che la mia scrittura fosse buona, che fosse leggera e impercettibile come una buona prosa. Un giorno, spero, oltre a essere buona imparerò anche a renderla elegante. Allo stesso modo essere in grado di leggere e comprendere il codice – in vari modi, a vari livelli e con scopi differenti – è una delle abilità che secondo me contribuisce alla nostra literacy, – come scrivevo qui – e di questo sono sempre più convinto. Non perché tutti debbano essere in grado di fare il mestiere che faccio io – o di programmare in generale –  ma perché di fronte a una schermata di codice non si reagisca necessariamente con rifiuto e paura – quasi che fosse qualcosa di intrinsecamente difficile, che non mi riguarda, da relegare ai tecnici e agli esperti. Come scrive benissimo Euan Semple oggi – parlando di altro, ma non troppo – «We need to get our hands dirty. We need to get involved. We need to take responsibility for what is going on». E questo soprattutto perché voltare lo sguardo e preferire il rifiuto e la paura sono solo un’altro modo per rinunciare alla comprensione di un pezzo di mondo e di futuro, e finire tagliati fuori.

L’intenzionalità di cui dicevo qui sopra, poi, è anche il cuore del concetto stesso di design:

Intent means purpose; something highly designed was crafted with intention in every creative decision. Frank Lloyd Wright explained that intent drives design with the credo «form follows function»; P&G calls this being «purpose-built». The designer is the person who answers the question «How should it be?».

Se n’è parlato un bel po’ ultimamente, in termini precisi e chiari (ad esempio qui, qui e in questo video qui), del fatto che design is intent, e che un buon design – un buon progetto, in termini di processo e di risultato – deve riflettere con la maggiore aderenza possibile l’intenzione che l’ha fatto nascere, così come il modo in cui il risultato finale è, e il modo in cui funziona, deve riflettere le ragioni, gli scopi e gli obiettivi per cui il progetto è stato concepito.

Che non per forza – e questa è la cosa che ho imparato davvero – sono ragioni legate a un risultato pratico, o orientate all’ottimizzazione di un ritorno economico sull’investimento. In questo il lavoro sul sito di Federico è stato splendidamente anomalo rispetto a quanto avessi fatto fin ora. Lui ha chiarito molto bene e subito che in una scala di priorità la bellezza – la figaggine, ha detto lui – doveva stare sempre un gradino sopra l’usabilità. Che è un’impostazione profondamente diversa dalla mia, a cui non ero – e non sono tutt’ora, e probabilmente non sarò mai – abituato, che va in una direzione non prevista e da me mai battuta, ma che allo stesso tempo è perfettamente coerente con Federico, con la sua cultura, i suoi valori, il suo modo di fare le cose, i suoi obiettivi e le sue intenzioni.

Che sono sempre la cosa da cui parto, quando inizio a lavorare a un nuovo sito – gli obiettivi, le intenzioni, i desideri, le necessità. Federico non aveva e non ha bisogno di «aumentare l’engagement sui social network» – nonostante si sia molto e giustamente arrabbiato quando di colpo Facebook ha cambiato algoritmo e fatto crollare l’esposizione dei post della sua pagina – né ha intenzione di vincolare i suoi contenuti alla massima diffusione possibile. Federico fa un lavoro diverso – uno splendido lavoro di ricerca, selezione, cura, riflessione e archiviazione, a volte lento, sempre preciso e molto elegante, un po’ antiquato – come poi abbiamo iniziato a dire tutti, per scherzo – e esattamente questo era il suo obiettivo e la sua intenzione: dare alla sua casa online una veste nuova, che fosse ordinata e precisa, e insieme elegante, incredibilmente bella, più facile da comprendere e navigare, più sicura e solida nel tempo, con i suoi contenuti tutti al centro e ben suddivisi. E incredibilmente colorata.

Questo abbiamo fatto – e il merito è molto di Federico e di Christel, perché io da solo non ne sarei stato capace – e questo spiega alcune scelte che aggiungono frizione invece di rimuoverla. La pagina a cui si arriva se si va su federiconovaro.eu, ad esempio, è una splash page – che riprende dinamicamente i contenuti pubblicati su offfn – messa lì in definitivo sfregio alle home page, che come tutti vanno dicendo – e anch’io – non servono a niente. Poi una home page «vera» c’è, ma è su /home, e per arrivarci bisogna fare un click in più, e come dice bene Christel è una legenda: sono esposte tutte le categorie, ognuna col suo ultimo post, col suo colore e la sua cornice distintiva, e di dimensioni che variano in base al rilievo e all’importanza – ma davvero in termini di traffico la home è così relativa che paradossalmente la legenda è un punto di arrivo – a ritroso – e non di partenza.

Io da solo avrei fatto alcune cose diversamente – sarei stato più asciutto e essenziale, e ad alcune griglie belle ma rigide avrei privilegiato in tutto e per tutto la fluidità dei contenuti. Ma sarei stato meno aderente all’intenzione, meno colorato e più noioso. Per questo sono molto contento di non essere mai stato da solo.

Non avevo mai lavorato con un art director prima – perché faccio questo mestiere da non troppo tempo, e perché sono uno a cui piace lavorare per i fatti suoi. Lavorare con Christel è stato bello, divertente, molto istruttivo e essenziale: ha messo in luce tutti i miei limiti, lo sguardo che non ho su certe cose, il passo che mi manca, i luoghi in cui da solo non riesco ad arrivare e che non riesco a immaginare.

Ha anche chiarito definitivamente – a me – che chi per mestiere fa siti web deve lavorare in modo completamente diverso. Preparare prototipi di una visualizzazione – di un tipo di schermi preciso – è un modo molto debole di procedere – e lo stesso vale se si lavora con prototipi di più visualizzazioni, che siano in HTML o meno. Come ho detto molte volte a Federico e a Christel durante le nostre riunioni, non c’è un web più vero di altri, non c’è un modo vero – quello su un bello schermo da 27 pollici – e tanti modi minori di vedere un sito, e ogni visualizzazione non è che un’eventualità. Può darsi che a volte effettivamente si veda in questo modo qui, ma non sempre, e comunque dipende.

Ad esempio, per la pagina che raccoglie tutti i post di una categoria Christel aveva previsto una struttura a colonne – a cinque colonne, per essere precisi. Solo che cinque colonne sono – appunto – un’eventualità: ci sono effettivamente, su schermi grandi – diciamo dai 15 pollici in su, per dare un’idea. Ma sullo schermo a 13 pollici su cui scrivo sono quattro, e poi scendono a due e a una, via via che lo spazio diminuisce.

Quello che rimane sono le strutture fondamentali. In modo indiretto e ancora – per come io vorrei che fosse – troppo poco intenzionale abbiamo utilizzato per lavorare i principi dell’Atomic Design, creando alcune strutture che vengono ripetute e riutilizzate in tutto il sito. Un’ottimo esempio in questo senso è l’elemento scheda – con breadcrumb, titolo del post, foto, colore e cornice di categoria – che compare un po’ ovunque e che abbiamo usato in molte situazioni diverse, mantenendo però lo stesso linguaggio e la stessa sintassi, costruendo una semantica riconoscibile e – da parte mia – scrivendo piccoli blocchi di codice riutilizzabile e facile da mantenere. A monte di tutto questo c’è il lavoro di Christel sull’identità visiva e gli elementi di immagine coordinata, che sono essenziali, efficaci e coerenti. A valle situazioni in cui è stato facile far esplodere le strutture, mantenendo inalterato il linugaggio: è il caso della homepage (quella vera), che mantiene alcuni elementi dell’elemento scheda, e altri ne decostruisce.

Questa, per quanto mi riguarda, è la direzione in cui andare da qui in avanti, e con più coerenza e intenzionalità in futuro. Smettere di progettare schermi – responsive o meno – e iniziare a progettare sistemi di elementi combinabili, coerenti e semplici da espandere, mantenere e interpretare.

Cinque dettagli extra per i nerd:

  • le cornici sono file SVG, che sono vettoriali e quindi mantengono la definizione a prescindere dalle dimensioni. Si adattano perfettamente a qualsiasi condizione d’uso, e scegliere di percorrere questa strada mi ha sostanzialmente salvato la vita;
  • tutto il meccanismo di associazione post-categoria-colore-cornice è fatto in CSS, grazie alla funzione post_class() di WordPress;
  • a un certo punto del lavoro mi sono accorto che il progetto era abbastanza esteso da giustificare l’utilizzo di un preprocessore per il CSS. Ho usato SASS sul serio per la prima volta: mai più senza;
  • se non sbaglio – ma potrei – ho usato solo unità di misura relative: em e percentuali, niente pixel.
  • la scritta che si compone e scompone sotto il logo è fatta con Typed.js

Ti va di iscriverti alla mia newsletter?

Più o meno una volta al mese scrivo una lettera ai miei amici, dove parlo di fatti miei, delle cose che faccio e delle cose che penso. Se vuoi scrivo anche a te, e diventiamo amici: basta che scrivi il tuo indirizzo email qui sotto, e clicchi sul pulsante.

Se ti iscrivi accetti le cose sulla privacy.