Progettare un layout grafico non è sempre facile, diventa ancora più complicato qualora si abbia da una parte un puro grafico web e dall’altra parte un programmatore, che dovrà andare poi a sviluppare il codice.

Noi web designer freelance spesso se ne abbiamo le capacità riusciamo a svolgere tutti e due i ruoli, infatti facendo pratica sappiamo che alcune cose funzionano e altre meno dalla grafica al web.

In ogni caso bisogna ricordare che alcuni elementi grafici e idee non sempre funzionano sul web e possono rallentare i tempi di produzione e rendere dura la vita dei poveri sviluppatori.

Immagine anteprima YouTube

Vediamo le principali caratteristiche che dobbiamo fare attenzione nellla creazione di un layout grafico per il web.

L’architettura

Questo aspetto non serve solo per i siti web, ma per tutti i progetti in cui vi siano diversi elementi grafici, infatti sempre consigliato organizzare gli elementi grafici per un ottimizzazione di tempi e gestione.

Il nostro layout grafico potrebbe essere complesso e utilizzato da terzi per sviluppare il codice XHTML + CSS.

Per gestire tutti questi elementi grafici è buona norma creare dei gruppi [CTRL+G] oppure selezionando l’icona cartella in basso al pannello livelli.

Questa organizzazione e etichettatura dei livelli servirà sia a noi per gestire gli elementi grafici, sia per terze persone che dovranno metterci le mani per sviluppare codice.

I Font

Uno degli aspetti più sottovalutati dai grafici è l’uso di Font non-standard per determinati elementi di un layout grafico, ovvero font che non potrebbero essere visualizzati su tutti i computer.

Spesso si usano nei menù o titoli, elementi fondamentali che per l’indicizzazione sui motori di ricerca devono essere di tipo testo.

Prendendo come esempio questa immagine, possiamo notare come il font della scritta Titolo non sia assolutamente font-standard, ma un font di nome Rockwell.

La trasformazione da grafica a web sarebbe quella di inserire un’immagini ritagliata, in cui vi sia il testo non-standard, e inserirla nel codice via HTML o CSS.

Ovviamente questa pratica rende zero l’indicizzazione di quel testo in quanto immagine.

Se fosse un titolo importante ai fini di indicizzazione potremmo decidere in partenza di usare un font-standard per non avere nessun problema.

Qualora non potessimo cambiare dovremo usare un’immagine e sapere che quel tipo di contenuto non sarà indicizzato come un testo vero in quanto immagine, anche se ottimizzata con alt o title su eventuali link.

Google e i fogli di stile CSS ci permettono di utilizzare font non-standard, ma bisogna ricordare di non abusarne e se non è necessario lasciar stare, sempre per aumentare le performance della pagina.

In conclusione la domanda che dobbiamo farci è: Questo testo dovrà essere indicizzato dai motori di ricerca?

Si, dovrà essere testo font-standard. No, posso anche trasformarlo in immagine.

Le Funzionalità

Quando creiamo un layout grafico ricordiamoci che non tutto ci è permesso sul web.

Alcune cose funzionano su carta, altre nella grafica e altre ancora solo sul web, ricordiamolo!

Grazie a linguaggi come jQuery, JavaScript, Flash e simili possiamo creare quasi qualsiasi funzionalità e caratteristiche, ma ricordiamoci che è sempre meglio diminuire al massimo queste soluzioni per non rallentare ulteriormente il caricamento della pagina.

Quindi qualora prevediamo elementi a comparsa, slideshow, animazioni, prevediamo che successivamente dovrà essere usato il CSS per effetti base, Flash o jQuery per animazioni tipo slideshow e JavaScript per ulteriori funzionalità.

Elementi Grafici Chiari

Per creare un layout che funzioni sul web dobbiamo cercare di rendere alcuni elementi grafici molto chiari, come bottoni, icone, quasi se parlassero da soli.

Le icone possono aiutare molto a un layout grafico per per catturare l’attenzione su determinate aree e aumentare la loro comprensione.

Dobbiamo stare molto attenti a non abusare di questi elementi grafici e a sceglierli in modo appropriato.

Una scelta scorretta avrebbe i risultati contrari e renderebbe la navigazione ancora più difficile e complessa.

Le Posizioni

Un altro errore comune è quello di realizzare una grafica con posizioni non standard che non risulti efficace sul web.

Ricordiamoci che per progettare un layout comunicativo ed efficace, bisogna avere in mente che certe posizioni non possono essere stravolte o inventate.

I menu, il logo, la posizione dei contenuti, il footer sono fondamentali e ormai hanno preso delle loro posizioni standard sul web.

Questo non ci vieta di inventare layout creativi, ma ricordiamo di dosare bene la creatività per non realizzare layout grafici incomprensibili da persone comuni e poco usabile.

Letture Consigliate per CSS


Autore: Giuliano Ambrosio

Creative Strategist e Designer Freelance di Torino, fonda il blog JuliusDesign nel 2007, attualmente collabora con diverse agenzie su tutta Italia con le quali ha avuto modo di lavorare per diversi big brand.