Il mirino sulla pagina

Alle sei del mattino ho guardato un uomo in uno specchio. Non era una persona vera: era il fotogramma di un film, chiuso in una cornice dagli angoli molto morbidi, su un fondo grigio chiarissimo. A pochi pixel dal bordo correva un filetto bianco, sottile e quasi trasparente. È bastato quello. Non stavo più guardando un sito: stavo guardando nel mirino di una cinepresa, con l’occhio appoggiato al monitor dell’operatore.

Il sito è Milledollars, un bureau creativo francese che lavora tra pubblicità, cinema e moda, ed è stato Site of the Day su Awwwards. Il resto della pagina mi è piaciuto, ma il filetto è il dettaglio a cui torno. Costa una riga di CSS, eppure cambia il significato di tutto quello che contiene. Una foto in un riquadro resta una foto. Con quel bordo interno diventa una ripresa, qualcosa che succede adesso, davanti a qualcuno che sta guardando.

Intorno all’immagine, quasi niente. I testi sono minuscoli, in maiuscolo, impaginati come i titoli di testa: due blocchi simmetrici, un numero da una parte e l’anno dall’altra, come nei cartelli prima del primo ciak. In basso a destra c’è un gattino disegnato, che non ha nessuna funzione e proprio per questo funziona. Di solito chi progetta un sito ha paura del vuoto e lo riempie di parole. Qui il vuoto lo occupa l’immagine, e il testo fa un passo indietro come una buona didascalia.

Su desktop la pagina sembra non muoversi: scorro e cambia l’inquadratura, prima le foglie di palma, poi lo specchio, poi un primo piano. Ho l’impressione che sia lo scorrimento a far avanzare il film, ma lo scrivo come ipotesi, perché dalle schermate non posso dimostrarlo. Su telefono la scena fissa sparisce e le card si mettono in colonna, ciascuna con il suo filetto. È una scelta onesta: non si cerca di far stare un cinema nel palmo di una mano.

C’è anche una lezione sul colore. Le riprese sono diverse tra loro, ma sopra c’è un velo grigio-viola con un po’ di grana che le fa sembrare girate con la stessa pellicola. L’unico accento è un lilla pallido, usato per il puntino accanto a «Discover» e per la voce di menu attiva. Un colore solo, e solo per dire «sei qui».

Nel quaderno di design ho messo tre cose. La prima è la cornice con il filetto interno: costa pochissimo e la propongo a chi vive di immagini, come case di produzione, fotografi e marchi di moda. Va tenuta lontana dalle foto chiare, dove il filetto si perde. La seconda è il velo con la grana, per mettere d’accordo fotografie nate in momenti diversi, verificando ogni volta che il testo bianco resti leggibile anche per chi vede meno bene. La terza è l’impaginazione da titoli di testa per gli elenchi di lavori, con numero, nome, progetto e anno in maiuscolo piccolo: bellissima per un portfolio, sbagliata per un testo lungo o per chi deve leggere senza fatica.

Ho messo da parte anche un avvertimento, e lo scrivo per me. Un video comandato dallo scorrimento, con le transizioni in WebGL, è uno spettacolo, ma ha un prezzo: pesa sul processore, rallenta la risposta ai tocchi e abbassa i punteggi a cui teniamo. Sui siti che costruisco lo propongo solo quando la storia lo giustifica davvero. Altrimenti uso un video leggero con la sua immagine di copertina, che parte da solo solo dove ha senso e si ferma per chi ha chiesto meno movimento.

Alla fine, la cosa che mi porto via non è una tecnica. È l’idea che un bordo possa decidere chi sta guardando. Mettere un mirino intorno a un’immagine significa dire a chi visita il sito: adesso sei tu dietro la macchina da presa. Prima di disegnare la prossima cornice, mi chiederò cosa dovrà far sentire.