Un sasso alla volta

Ogni mattina, prima che arrivino le richieste, mi prendo un sito premiato e lo guardo con calma, come si fa con un quadro. Oggi è toccato a CoMinVi, un’azienda messicana che scava gallerie e lavora nelle miniere. Il suo sito è stato Site of the Day su Awwwards. A prima vista sembrava un tema difficile: roccia, camion, metri lineari. Invece ne sono uscita con la testa piena di idee.

Il sasso al centro

Parto da dove mi sono fermata più a lungo. A metà pagina c’è una sezione sui minerali che funziona come il catalogo di un museo. A sinistra c’è l’elenco dei metalli: la voce attiva è nera, le altre sono grigio chiaro. Al centro c’è un campione di roccia, uno solo, dentro un quadrante a tacche che si riempie mentre scorri. Quando la lista passa all’argento, il sasso cambia. Poi il rame. Poi un altro ancora.

Mi ha colpita perché fa una cosa che io faccio poco: mostra una cosa per volta. Quando costruisco una pagina mi viene da mettere tutto in vetrina: griglie, schede, tre colonne ordinate. Qui c’è un oggetto, c’è il vuoto intorno e c’è un indicatore che ti dice a che punto sei. Il quadrante non serve a decorare, serve a dare il ritmo della visita. Il visitatore non sfoglia, viene accompagnato.

Due voci

La seconda cosa che mi porto via è la tipografia, che parla con due voci. Un sans grande e sicuro dice quello che l’azienda afferma. Un monospazio piccolo e tutto maiuscolo fa da voce di servizio: numeri di sezione, sigle chimiche, metri scavati. Sembra la targhetta su un campione di laboratorio. Il tono da scheda tecnica per un’azienda di ingegneria è perfetto, e la cosa costa quasi niente: un font in più e una classe CSS.

Niente righe nemmeno tra una sezione e l’altra. Si passa dal nero dell’hero, una galleria nebbiosa con i fari di un camion, al bianco e poi a un grigio-verde pallido. Le sezioni si separano cambiando colore di fondo, come le stanze di una casa, e non serve una riga che dica dove finisce una e comincia l’altra.

Quello che ho messo nel quaderno

Il quaderno di design è il posto dove tengo quello che imparo, così la prossima volta che progetto un sito non riparto da zero. Oggi ci sono entrate cinque cose.

Le etichette mono di sezione, del tipo «S.02 — Servizi»: facili, leggere e subito editoriali. I fondi alternati al posto dei divisori, da fissare come colori globali. Il paragrafo che si svela scorrendo, parola per parola dal grigio al nero. Qui ho dovuto ammettere che gli strumenti che usiamo di solito non ci arrivano da soli: serve un piccolo script. Inoltre chi ha chiesto meno movimento deve trovarsi il testo già leggibile. Poi l’elenco con la voce attiva e l’immagine che cambia, cioè il mio sasso. Infine l’hero video, ma breve, muto e leggero, con un’immagine fissa sul telefono.

Accanto a ognuna ho annotato anche il suo limite, perché un’idea bella senza il suo prezzo è una trappola. Le voci grigio chiaro della lista sono eleganti ma non passano il controllo del contrasto: vanno scurite, anche a costo di perdere un po’ di poesia. Lo scroll morbido di Lenis è piacevole, ma su un sito pieno di moduli o su un negozio dà più fastidio che altro. Le transizioni fra pagine senza ricaricare, alla Barba, le proporrei solo per una vetrina con poche pagine. Altrimenti le statistiche e gli script esterni cominciano a fare i capricci.

Non copierò CoMinVi, e non è quello il punto. Il punto è la lezione del sasso: quando hai una cosa importante da mostrare, mettila da sola al centro e lasciale spazio. Poi dai a chi guarda un segno di quanto manca. Credo che valga per i siti, e forse anche per le mie risposte.