Ho fatto una cosa nuova, si chiama Guido

16 marzo 2015
Argomenti:

Quattro consigli per graphic designer che progettano e costruiscono siti internet

Durante l’ultima edizione del mio corso di WordPress, con Francesca abbiamo iniziato a parlare del ruolo dei graphic designer nella progettazione e nella costruzione di siti internet. Abbiamo parlato di come il loro mestiere e il loro ruolo siano diventati più difficili e confusi col passare del tempo e il proliferare dei dispositivi, e di quale possa essere il valore e la funzione di un graphic designer nella progettazione e costruzione di siti internet – ora come in futuro.

Ci ho pensato un po’, mi sono venute in mente queste quattro cose qui.

1. Comprendere il contesto in cui viviamo e per cui progettiamo

Usiamo un numero relativamente alto di dispositivi connessi in grado di usare un browser per visualizzare un sito web: computer, telefoni, tablet, televisori, consolle per videogiochi. Ultimamente anche occhiali e orologi.

Ognuno di questi dispositivi è diverso, ha schermi diversi, opera in condizioni diverse, con connettività diverse, all’interno di sistemi e reti diverse, usando tecnologie diverse e più o meno aggiornate, ha sistemi di input diversi, prestazioni diverse, età diverse, condizioni di salute diverse.

Ognuno di questi dispositivi è usato da persone diverse, in contesti diversi. Ognuna di queste persone ha caratteristiche diverse, esigenze e possibilità diverse, problemi di accessibilità diversi, familiarità con gli strumenti e le tecnologie diverse, gradi di fiducia in se stessi diversi, una consapevolezza diversa di quello che deve fare e di cosa deve fare per ottenerlo.

Non solo non esiste più un solo dispositivo: non esiste nemmeno un numero finito di tipi di dispositivo, così come non esiste un numero finito di tipi di persone che usano questi dispositivi, o un numero finito di cose che queste persone hanno bisogno di fare, o di contesti all’interno dei quali queste persone agiscono.

Né esiste un contesto ideale, migliore di altri – quello per cui costruire l’esperienza vera e migliore, di cui ogni altra esperienza è una versione ridotta che costringe al compromesso. Esistono persone che vogliono fare delle cose con i dispositivi che hanno a disposizione in quel momento, e si aspettano di poterle fare senza essere costretti ad adattarsi o a farsi domande: a cambiare browser, a cambiare orientamento del dispositivo, a essere a casa, seduti comodi di fronte a uno schermo da 27 pollici, collegati a una rete in fibra ottica. Tutte cose che tra l’altro molto probabilmente non hanno.

2. Rinunciare alla pagina

È difficile, specialmente perché il passo da fare non è quello in direzione di una pagina più piccola, o di un numero finito di pagine diverse, ma verso l’assenza di una pagina, ed è una cosa che all’inizio lascia disorientati.

Mi è successo lavorando con gli ebook, un po’ di anni fa. Niente pagine, quindi niente numeri di pagina, niente interruzioni di pagina, niente vedove e niente orfane, un controllo solo parziale – specialmente se paragonato al controllo totale che dà la stampa – sul flusso delle informazioni, su come presentarle e come altri le avrebbero usate. Un numero molto alto di dispositivi diversi che si comportano in modo incoerente sia tra di loro che nel corso del tempo. Una possibilità piuttosto concreta che chi legge decida di sovrascrivere le nostre decisioni e fare come sembra meglio a lui: cambiare il carattere, le dimensioni del carattere, il colore di sfondo dello schermo, i margini, l’altezza di linea. Leggere passando da un dispositivo all’altro e cambiare ancora, a seconda del dispositivo, pur leggendo lo stesso testo.

Rassegnarsi e rinunciare è l’unica cosa da fare, perché il contesto è cambiato. Soprattutto: continua a cambiare, e il risultato del nostro lavoro non è un oggetto finito in se stesso, ma un oggetto che una volta messo a disposizione, quello è il momento in cui inizia a vivere davvero, ed è fatto per essere usato e manipolato nel tempo – da persone diverse, con dispositivi diversi, in contesti diversi – e che deve essere progettato per resistere al tempo e ai cambiamenti. Per smettere di diventare inattuale, e dover essere gettato e rifatto una volta ogni paio d’anni.

Rinunciare alla pagina è l’unico modo per essere a prova di futuro.

3. Progettare un sistema di componenti

Flessibili e riutilizzabili,  da combinare tra di loro per creare altri nuovi componenti – flessibili e riutilizzabili, e così via. Ad esempio:

  • colori: combinazioni di colori, rapporti tra i colori, codici di colori;
  • un sistema tipografico: fatto di un numero finito di caratteri, di dimensioni di carattere, di rapporti tra i caratteri, di combinazioni di caratteri;
  • un ritmo verticale: fatto di un numero ridotto e finito di spazi vuoti tra un elemento e l’altro;
  • forme: che sono rapporti di proporzioni base per altezza o percentuali di spazio occupato – non misure assolute espresse in pixel – e che hanno una serie di caratteristiche: bordi, ombre, colori, una tipografia, un ritmo verticale (sia dentro che fuori).

Si chiama Atomic Design, ne parla diffusamente Brad Frost in questo articolo. L’obiettivo è quello di creare una libreria di pattern coerenti, ricorrenti e prevedibili, e rendere più facile modificare e estendere il sito, le sue caratteristiche e le sue funzionalità nel corso del tempo: che è un risultato più importante di disegnare una singola pagina – o un insieme di pagine – secondo me.

Un altro obiettivo – a cui tengo particolarmente – è spezzare il ciclo di progettazione e riprogettazione – dove un sito viene ciclicamente azzerato e rifatto – e passare un ciclo di sviluppo continuo: dove il cambiamento è costante e organico, e quello che progettiamo e costruiamo è fatto per durare.

4. Progettare insieme

Il metodo classico – il graphic designer fa con Photoshop un layout in PDF, il web designer lo converte in codice – non funziona più. Segregare le funzioni non funziona più – e secondo me non ha mai funzionato.

Progettare un oggetto dinamico, variabile e con cui bisogna interagire partendo da una serie di immagini statiche è un controsenso:

  • perché ci si fanno le domande sbagliate, e quindi ci si danno le risposte sbagliate e si prendono le decisioni sbagliate, per i motivi sbagliati;
  • perché ci si abitua a progettare in un ambiente definito e protetto quando là fuori è tutto molto poco definito, e molto poco protetto;
  • perché si usano strumenti inappropriati. Persone diverse usano dispositivi diversi in contesti diversi per fare cose diverse usando un browser: perché mai noi dovremmo progettare usando Photoshop? Anche se decidessimo – per assurdo – di costruire un numero molto alto di varianti diverse per ogni layout, sarebbe comunque una forzatura, un’enorme perdita di tempo e una dimostrazione di incredibile testardaggine. Se quello che stiamo progettando e costruendo viene usato dentro un browser, noi dobbiamo progettare e costruire all’interno di un browser: vedere le cose che funzionano – o non funzionano – nel contesto in cui vengono usate davvero; vederle vivere.
  • perché si stabilisce una gerarchia implicita sbagliata: l’aspetto delle cose diventa più importante del modo in cui funzionano – e della loro funzione – anche se non dovrebbe essere così;
  • perché si stabilisce un metodo di lavoro sbagliato: il metodo classico, in cui prima il graphic designer fa un layout in PDF, poi il cliente lo approva, poi il web designer lo converte in codice, e durante tutto questo processo i due raramente si parlano.

Invece, potremmo provare a fare così:

  1. a monte c’è una ricerca preliminare, che serve a definire con chiarezza l’obiettivo del progetto: cosa vogliamo dire, a chi e per ottenere quale risultato;
  2. con l’obiettivo in mente si progettano o si analizzano i contenuti che devono essere creati o rivisti: che forma, struttura e caratteristiche devono avere per raggiungere l’obiettivo che abbiamo in mente?;
  3. nel frattempo si può già iniziare a lavorare su altri fronti. Ad esempio l’identità visiva del progetto – prima a un livello di astrazione relativamente alto: colori, ipotesi di tipografia, se c’è da rivedere o da iniziare a lavorare al logo, eccetera. Photoshop (e Illustrator e Indesign) servono, ma solo per fare gli sketch;
  4. mentre si progettano o si analizzano i contenuti si può anche già iniziare a lavorare al CMS, se è previsto che ci sia: quindi sceglierlo, e poi capire se va modificato, esteso o personalizzato per venire in contro alle esigenze del progetto;
  5. quando la struttura dei contenuti è consolidata si può iniziare a lavorare con dei prototipi funzionanti in HTML e CSS. Si parte con il lavoro sulla struttura pura (HTML) e via via si prendono decisioni sull’identità visiva (CSS);
  6. man mano che si usano i prototipi per prendere decisioni sull’identità visiva si può iniziare a costruire la libreria di pattern del progetto: che diventa punto di riferimento e linea guida di stile da tenere a mente in futuro;
  7. da qui in poi si procede per iterazioni, lavorando in parallelo: identità visiva, sviluppo del frontend e del CMS – cioè l’aspetto delle cose, come sono da usare per chi naviga sul sito, come sono organizzate per chi deve gestirlo;
  8. si lavora partendo dagli schermi più piccoli, e si modifica il modo in cui sono organizzati i contenuti man mano che lo schermo si ingrandisce, e non il contrario;
  9. si lascia che ognuno faccia al meglio quello che sa fare. E si lavora insieme, provando a fidarsi.

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.