Ciò che ci apprestiamo a fare è dare una veste grafica alle immagini e al testo che sono contenuti nei set di livelli e che appaiono molto disomogenei tra loro. Si tratta di trovare la soluzione grafica migliore per comunicare le informazioni, per metterne in evidenza alcune e renderne altre facilmente accessibili, tenendo sempre presente che le scelte grafiche sono fondamentali per costruire l’orientamento all’interno del sito e far sentire immediatamente il visitatore a proprio agio.
Una volta raccolto il materiale da utilizzare, bisogna capire come organizzarlo e quale soluzione tecnica adottare. Le informazioni possono essere comunicate tramite colori, testi, icone, immagini e con tecniche diverse: ad esempio si può decidere di veicolare un’informazione con un’animazione in Flash, oppure utilizzando un testo in grafica con un certo colore e dimensione e così via.
In questo senso, la creazione di un layout coinvolge diversi aspetti:
- la capacità creativa
- la capacità di comunicare con efficacia con il visitatore
- la conoscenza degli aspetti tecnici, ossia come creare al meglio il layout per lo sviluppo HTML.
Ma torniamo al nostro sito. Come trovare un equilibrio tra immagini così diverse per dimensioni, colori e il testo? Come distinguere le due sezioni della parte centrale? Non affrontiamo in questa sede gli aspetti teorici, su cui potete trovare informazioni nell’articolo I principi della Gestalt e l'impaginazione di una pagina Web.
Organizzare il materiale
Le soluzioni potrebbero essere diverse; in questo caso ricorriamo a quella più comunemente utilizzata, anche su siti molto noti, e che si rivela adatta alla maggior parte delle interfacce. Una soluzione semplice ma efficace.
Nel file centrale_1.psd nascondiamo temporaneamente il set di livelli "scelti per voi" con un clic sull'occhio accanto alla cartella corrispondente in modo da visualizzare soltanto il contenuto del set "in primo piano". Questa cartella contiene un livello con titolo della sezione, un livello per l’immagine che va ridimensionata e il testo descrittivo:
Nel progetto abbiamo previsto che la sezione "in primo piano" contenga il tutorial a cui vogliamo dare più rilevanza perché è il più recente oppure perché presenta un argomento interessante. Le scelte grafiche devono perciò aiutare l'utente a cogliere intuitivamente la natura di questa sezione, quantomeno per differenziarla a colpo d'occhio dall'elenco dei tutorial che verranno inseriti nella parte sottostante nella sezione "scelti per voi".
Oltre alla posizione in alto e centrale rispetto alla pagina, una soluzione molto diffusa è quella di utilizzare un’immagine leggermente più grande rispetto a quelle degli altri tutorial e un testo descrittivo un po’ più lungo, aggiungendo un box colorato come sfondo.
Aiutandoci con delle guide, delimitiamo la larghezza dello spazio destinato al contenuto, immaginando di lasciare circa 28/30 pixel a sinistra e a destra come margini. Creando un’interfaccia, teniamo presente che gli spazi che fissiamo via via potranno richiedere dei piccoli aggiustamenti in modo che siamo funzionali e armoniosi rispetto agli altri elementi della pagina creati successivamente.
Affianchiamo testo descrittivo e immagine trovando la giusta proporzione in larghezza e altezza per entrambi. Partiamo dal testo per poi ridimensionare l'immagine di conseguenza. Facciamo doppio clic sul livello del testo descrittivo della fotografia (“Ottenere..."): il testo viene evidenziato e compare il box che delimita il paragrafo.
Nota: quando si devono ancora definire gli spazi da destinare al testo rispetto agli altri elementi della pagina può essere comodo utilizzare lo strumento "Testo" per creare un paragrafo di testo. In questo modo potremo intervenire sulle dimensioni (numero di righe o di parole) e sulla posizione del paragrafo molto rapidamente e senza dover modificare manualmente gli “a capo".
Per creare un paragrafo di testo occorre selezionare lo strumento "Testo", fare clic in un punto del documento e trascinare fino a creare il box delle dimensioni desiderate. Non è necessario essere precisi: la comodità del paragrafo è proprio quella di poterlo modificare in qualsiasi momento.
È il momento di scegliere il font per il testo. In genere, per facilitare la lettura a video si preferiscono i font sans-serif (senza grazie), come l’Arial, lasciando i font serif (con grazie), come il Times New Roman, ai testi stampati su carta.
Nella barra delle opzioni impostiamo il font Arial di dimensioni 12 pixel e di colore nero. Poiché questo testo verrà inserito nella pagina html come testo e non come immagine, abbiamo scelto un font di sistema presente sulla maggioranza dei sistemi operativi e che, dove non presente verrà sostituito da un font della famiglia sans-serif.
Photoshop consente anche di visualizzare il font senza anti-alias in modo da riprodurre la modalità di visualizzazione del browser. Nella casella Imposta il metodo di anti-alias sono presenti diversi gradi di anti-alias, più o meno marcato. Nel caso di testo che verrà reso con HTML selezionare l’opzione Nessuno:
Infine, scegliamo l'allineamento a sinistra con un clic sul pulsante corrispondente. Le opzioni che abbiamo impostato sulla barra sono disponibili anche nella palette "Carattere", che si può visualizzare con un clic sull'icona Attiva/Disattiva le palette carattere e paragrafo.
A questo punto è possibile ridimensionare il paragrafo. Portiamo il puntatore sulla maniglia in basso a destra del box del paragrafo e quando appare la doppia freccia ridimensionare la larghezza del testo in modo simile a quella mostrata nella figura. Lo scopo è ottenere un blocco di testo di larghezza adatta allo spazio che abbiamo previsto (tenendo conto che a fianco metteremo l’immagine) e che faciliti la lettura, evitando di avere righe con troppo corte (due/tre parole soltanto) che spezzano troppo la lettura del testo:
Una volta trovata la dimensione che ci pare adatta, la applichiamo con un clic sul segno di spunta nella barra delle opzioni oppure premendo il tasto Invio del tastierino numerico (il tasto Invio vicino alla lettere serve per andare a capo).
Con lo strumento "Sposta", spostiamo il blocco di testo allineandolo al margine sinistro, come mostrato nella figura:
