L'idea iniziale era quella di mantenere bene o male i colori della versione precedente, perché identificativi della Scuola. In realtà, il testo nero su sfondo arancio dell'originale aveva secondo me dei problemi di leggibilità. La sfida è stata quindi trasformare l'effetto finale del sito mantenendone i parametri generali, e credo proprio di esserci riuscito.
Innanzitutto ho studiato a fondo il tema di colori da utilizzare per tutta la progettazione del sito, sfruttando kuler (una web app della Adobe molto utile per sviluppare degli "accordi cromatici", per dirla con la terminologia di Johannes Itten), dove ho creato un accordo a 5 colori, mantenendo l'arancio originale (solo un po' più brillante).
Ecco i colori scelti:
| FF8830 | A6B06D | 589482 | 8C2423 | C72B10 |
Osservandoli tutti insieme, si nota come il blu-verde centrale sia il più "profondo" di tutti, seguito dal rosso scuro e dal verde, e infine dall'arancio e dal rosso che sono i più brillanti e che svettano sopra tutti gli altri.
Avendo deciso per un layout a tre colonne, alla luce della considerazione di cui sopra ho deciso di usare l'arancio per lo sfondo della colonna principale, per farla svettare sulle altre, e il rosso scuro per quelle sui lati. Su sfondo arancio ho usato testo nero, sulle colonne laterali testo bianco: questo gioco di contrasti dà la giusta importanza anche alle colonne laterali, che sono ben leggibili ed evidenti, ma lascia la supremazia a quella centrale dov'è il contenuto principale.
Il blu-verde, per sua natura, si presta benissimo come colore di sfondo generico della pagina.
Per i link invece, si può usare i rossi per il testo principale e l'arancio ed il verde per le colonne laterali.
Per aumentare la leggibilità del testo, è stato sufficiente applicare un minimo di buonsenso tipografico: il carattere Times New Roman non è veramente confortevole sul web, e l'ho cambiato con un Georgia, che è una delle typeface più eleganti e versatili per i testi online.
Per le dimensioni, ecco la dichiarazione della proprietà CSS font:
#main{
font: .875em Georgia, Palatino, serif;
}
Su una grandezza di default di 100% (corrispondente generalmente a 16px), impostare una dimensione pari a 0.875em corrisponde ad avere un carattere su schermo di dimensioni pari a 14px.
Per approfondire, questo vecchio articolo su A List Apart può essere utile.
L'ultimo accorgimento per migliorare radicalmente la leggibilità dei testi del sito (che spesso sono molto nutriti e approfonditi) è stata fondamentale la suddivisione in paragrafi. A mio avviso questo accorgimento è obbligatorio sul web, dove non stiamo pubblicando testi ma bensì ipertesti, e dove il lettore molto difficilmente legge tutta una pagina da cima a fondo (come invece farebbe con un libro da lui acquistato).
Per questo tipo di lettura gli appigli visivi sono fondamentali, e suddividere un testo con delle righe bianche di stacco è molto riposante per l'occhio. Oltre a questo, anche usare il grassetto sui termini e le espressioni più caratteristiche semplifica molto l'orientamento del lettore.
Per le barre laterali invece, ho scelto caratteri senza grazie: nella fattispecie, il Geneva:
#right{
font: .75em geneva, helvetica, verdana, sans-serif;
}
con una grandezza equivalente di 12px. Il Georgia l'ho tenuto per i titoli e per qualche altro elemento particolare.Infine, per gli heading principali (h1 e h2) ho utilizzato il Trajan, un carattere stupendo che ho introdotto come standard nei design per il Centro Studi. Disegnato da Carol Twombly per la Adobe nel 1989, esso trae origine dai segni alfabetici della Colonna Traiana a Roma, ed ha un'eleganza ed una chiarezza veramente fuori del comune; è disponibile solo in versione maiuscola (normal e bold) e si presta particolarmente bene per dei titoli che si stagliano in cima alle pagine.
Post
