Come disegnare per lo schermo: alcune cose che i grafici a stampa devono sapere

Ricevo a volte delle grafiche per siti web create da grafici che non ne hanno esperienza. Allo stesso modo, a volte quando tengo corsi devo spiegare queste cose alle persone che vengono dalla carta stampata, per aiutarle a pensare differentemente per il web. Avendo già fatto io questo adattamento, ecco alcune cose da tenere a mente.

Comporre grafica a stampa non si traduce automaticamente per il web. Alcune cose rimangono concettualmente sempre valide: proporzioni, colore, posizione, spazio negativo, buone pratiche di tipografia, ma ci sono caratteristiche uniche che rendono la transizione non semplicissima.

Non esiste una misura per tutto

Quando disegnate per la stampa tutto viene misurato in maniera affidabile in centimetri, millimetri, pica o punti. Quando disegnate per lo schermo l'unità di misura base è il pixel, ma il pixel può avere misure differenti a seconda degli schermi. Questo è fonte di difficoltà per molti grafici a stampa quando si affacciano al web.
Non crediate che, poiché vedete 300 pixel resi alla dimensione di un pollice sullo schermo del vostro MacBook retina, anche gli altri li vedano così. Il miglior approccio è assumere che 72 pixel occupino un pollice (ovvero lavorate a 72 dpi), ma è un'indicazione di massima: a schermo, tutto è flessibile.

Il tuo design non è scolpito su pietra

Espandendo il concetto appena esposto, una delle sfide più grandi è lasciar perdere l'idea che il tuo design sia scolpito nella pietra e immutabile. Sul web browser differenti mostreranno il contenuto in maniera sottilmente differente. I settaggi del testo possono essere cambiati dai visitatori, e a seconda della dimensione dello schermo usata il vostro sito potrebbe apparire completamente differente (infatti, ormai è accettata l'idea che le pagine web dovrebbero adattarsi alla dimensione dello schermo - o della finestra. Si chiama responsive design).
Non sprecate tempo cercando di ottenere un match perfetto al pixel tra browser, perché non ci riuscirete mai. Una delle migliori virtù del web design è la sua fluidità.

Esperienza d'uso è tutto

A differenza della stampa, il web è un medium interattivo che può fornire feedback istantaneo all'utente. Così, disegnare un sito è più simile a progettare un'esperienza d'uso che a disegnare una brochure. Dovete considerare come l'utente si muoverà intorno al vostro contenuto, navigando di pagina in pagina.
Ricordate che un sito agisce spesso come un ambasciatore del marchio, così deve veicolare tutti i valori del business che rappresenta. Focalizzatevi sull'usabilità, rendendo le aree interattive (link, barre di navigazione, gallerie di immagini e video) semplici da trovare e usare. Scartate quello che oggettivamente non serve: sul web le copertine non esistono, evitate quindi le splash page introduttive che rallentano il sito e dimezzano l'indicizzazione delle pagine. Se costringete l'utente a indovinare come si naviga il sito, egli se ne andrà e avrete fallito.

La piegatura è irrilevante

Nella stampa ti insegnano a disegnare in modo che il contenuto più importante sia "sopra la piegatura", ovvero la parte del giornale che rimane in vista quando il quotidiano viene piegato e impacchettato (lo stesso si potrebbe dire dei pieghevoli).
Anche sul web c'è la piegatura: l'area fuori da quella visibile sul browser a schermo; bisogna scrollare per vederla, ma sfortunatamente come designer non hai alcun modo di prevedere dove cadrà, le dimensioni di schermo o di finestra sono troppo variabili.
Il problema è dato dal fatto che esistono tantissime dimensioni di schermo e risoluzioni tra i vari dispositivi, e gli utenti posso ridimensionare la finestra del browser, così che quello che vedi sul tuo monitor si differenzierà da quello che vedono gli utenti in infinite combinazioni.
Invece di preoccuparsi dove andrà la piegatura, consolatevi col fatto che gli utenti sono abituati a scrollare e non hanno difficoltà a farlo (in verticale, far scrollare in orizzontale è peccato mortale!). Invece, cominciate a considerare il fatto di distribuire bene il contenuto, in modo che l'utente sia incoraggiato a far scendere la pagina per trovare nuove cose interessanti.

I layout sono fluidi, non fissi

Nel web design moderno i layout sono fluidi, non fissi come nella stampa.
Una delle cose più difficili per chi viene dalla stampa è imparare che le pagine web possono essere fluide nel loro layout. Invece di fissare al pixel le aree di contenuto, sul web le scatole di testo, le immagini e le colonne possono essere dimensionate in accordo alla larghezza della finestra del browser (la viewport). Questa differenza significa il dover abbandonare l'idea che possiate controllare completamente come il vostro design verrà visualizzato, ma ha anche parecchi benefici, specie di usabilità.

Conoscere le basi aiuta enormemente

Capire i pezzi per costruire il web vi aiuterà a disegnare per esso.
Anche se avere qualcun'altro che vi scrive il codice, capire come funzionano gli elementi del web aiuta a superare un sacco di frustrazioni associate col disegnare un sito web.
Prendetevi il tempo per imparare l'HTML (il linguaggio che definisce la struttura delle pagine) e i CSS (il sistema di formattazione grafica delle pagine), questo vi aiuterà a capire sia le limitazioni che le opportunità del mezzo.

La tipografia sul web è complicata

Servizi come Typekit, Google Web Fonts o FontSquirrel vi danno accesso a un'abbondanza di font. Fino a poco tempo fa, il web era limitato da una selezione di font sicuri (web-safe) limitatissima, che ha portato all'omogeneizzazione della tipografia sul web.
Questi servizi, ed altri come loro, hanno avuto un effetto rivoluzionario sulla tipografia visibile sul web, ma ci sono ancora alcune storture dalle quali stare attenti. Il grado di controllo sul carattere è molto più limitato di quello che si ha nella stampa. per esempio, potete controllare lo spazio tra le lettere, ma scordatevi di controllare il kerning, e se volete usare glifi ornamentali dovrete sporcarvi le mani col codice per sostituire manualmente i caratteri o i sub-font specializzati.

Conclusione

Non fatevi scoraggiare. Passare al web non è una passeggiata, e non appoggiatevi troppo ai programmi di promettono di generare pagine senza conoscere una virgola di HTML: il vostro codice sarà così pessimo da essere spesso inusabile dagli sviluppatori. Quindi: mettevi sotto, si tratta in fondo del vostro futuro, adattatevi ad esso.

PS: siete invece grafici web che si affacciano alla stampa? Ho un pezzo anche per voi