La creazione stilistica di un sito è solitamente appannaggio di un Web designer, vale a dire un professionista esperto nelle arti grafiche che ha dimestichezza con gli strumenti e le tecniche necessarie. Tuttavia, il Webmaster può trovarsi nella necessità di fare tutto da solo oppure di realizzare nel concreto il progetto impostato da altri. Di conseguenza, deve conoscere alcuni dei criteri da seguire per realizzare una pubblicazione elettronica che sia di buon livello estetico e, al tempo stesso, funzionale.
Abbiamo già affrontato gli aspetti progettuali per stabilire le finalità del sito e il tipo di pubblico che lo visiterà. Conoscere il navigatore che pensiamo di attrarre è indispensabile per determinare la ricchezza dell'interfaccia da fornire (vedi "Tecniche di progettazione del sito" nella prima lezione e "Progettare la pagina" nella seconda lezione). Una volta compiuto questo primo passo, siamo pronti a disegnare la pagina vera e propria.
Criteri di base
La progettazione di una pagina Web, come per qualsiasi altro tipo di pubblicazione su carta o altro supporto, consiste nel collocare gli elementi su una griglia ordinata, assegnando dimensioni proporzionate e tracciando un percorso di lettura che guidi l'occhio del navigatore attraverso la pagina nella sequenza che noi desideriamo, da sinistra a destra e dall'alto in basso. Rispetto alla carta, le pagine Web hanno la caratteristica peculiare di essere lette saltando da un punto all'altro perciò è necessario prevedere diversi punti di attenzione e mettere ben in evidenza gli elementi chiave. La vera arte del design consiste in realtà nel dosare gli elementi e gli spazi bianchi. Lo spazio è un elemento essenziale e comunque preponderante nella pagina; può essere bianco oppure avere il colore dello sfondo, ma deve immancabilmente comparire nella stessa proporzione armonica degli elementi che contiene. Una pagina troppo affollata sembra disordinata e risulta anche difficile da leggere.
Persino i portali più importanti, noterete, usano generose porzioni di bianco benché mostrino in home page una quantità impressionante di link. Gli sfondi colorati vanno utilizzati con parsimonia, solo per evidenziare aree particolari della pagina e mantenendosi comunque su tinte pastello, tenui. La leggibilità del testo viene prima di ogni cosa e uno sfondo di colore intenso finisce per fare a pugni anche con la grafica e con le immagini presenti nella pagina. La regola d'oro del buon designer è che meno elementi ci sono, specie se decorativi, migliore sarà il risultato finale. La pagina sembrerà più chiara, elegante e leggibile. Una delle tecniche seguite nel design editoriale è quella di aggiungere tutto ciò che riteniamo sia necessario e, una volta soddisfatti, togliere tutto quel che riusciamo senza alterare la funzionalità del nostro design, a quel punto arriveremo a un distillato di stile efficace.
Il testo, solitamente preponderante, dovrebbe essere scuro su sfondo chiaro o viceversa, e richiamare poca attenzione. Dev'essere soprattutto leggibile e bisogna distinguere visivamente il testo corrente dai titoli, dalle didascalie e dai link ipertestuali. Questi ultimi sono storicamente blu e sottolineati, tuttavia è facile trovare siti che omettano la sottolineatura e che adottino colori diversi dal blu originale. L'importante è che i link abbiano caratteristiche costanti nell'intero sito e che siano riconoscibili a colpo d'occhio per quel che sono.
Coerenza, allineamento, posizione e ripetizione
Queste sono le quattro parole chiave da tenere a mente quando si progetta la grafica un sito. La coerenza si riferisce alla costanza con cui gli elementi di riferimento si ripetono di pagina in pagina conservando aspetto, posizione e dimensione. Il sito avrà sicuramente diversi modelli di pagina (template), ma ci saranno alcuni elementi che non cambiano, come ad esempio il logo, le barre di navigazione, i link ipertestuali, lo sfondo, eccetera. Mantenendo invariati questi elementi, si trasmetterà un'impressione di ordine e si faciliterà l'orientamento del navigatore che potrà concentrarsi sui contenuti.
L'allineamento è un criterio fondamentale dell'impaginazione tipografica e si ripropone anche sul Web. Il testo e le immagini devono mantenere un allineamento regolare tra loro e rispetto alla griglia di layout. È anche possibile sfruttare variazioni di allineamento rispetto alla norma per mettere in evidenza elementi particolari, come ad esempio un titolo centrato rispetto al testo che invece è allineato a sinistra.
La posizione degli elementi identifica la sequenza con cui vogliamo che il navigatore li veda. In alcuni casi fornisce informazioni anche sul tipo di contenuto. Ad esempio, una didascalia di solito si trova vicino all'immagine a cui si riferisce, gli elementi di navigazione si trovano sui bordi laterali oppure in alto e in basso, e via di seguito. Inoltre la scelta della posizione serve anche a bilanciare il "peso" di un elemento così da non rendere la pagina sbilanciata. Ad esempio se avessimo le immagini tutte da una parte e il testo dall'altra non percepiremmo un effetto armonico.
La ripetizione è simile alla coerenza, ma consiste nel riproporre alcune informazioni che vogliamo far ricordare al navigatore, siano esse un brano di testo che spiega discretamente la natura del sito, un piccolo motivo grafico che contrassegna ripetitivamente un certo tipo di contenuto, una barra di navigazione globale, presente in tutto il sito, eccetera.
Home page bilanciata
La home page di un sito progettato con ordine. Questo è il famoso www.webpagesthatsuck.com ossia un sito dedicato a promuovere o bocciare le varie soluzioni di design che si trovano sul Web. Notate la struttura regolare, dove il testo la fa da padrone e dove compare ampio spazio bianco che dà risalto ai contenuti facilitandone anche la lettura.

Dosare il colore
Il colore è notoriamente l'elemento più visibile all'interno di una pagina e perciò gli elementi colorati dovrebbero essere usati con attenzione, così da non sopraffare l'attenzione del navigatore. Usate tinte poco intense per le grandi aree, come gli sfondi e le cornici. È anche importante che i colori presenti sulla pagina siano tra loro compatibili, vale a dire che si sposino bene insieme. Il loro abbinamento è un'arte con regole precise che riassumiamo nel riquadro "Armonia del colore", ma esistono anche strumenti che aiutano a scegliere le combinazioni adatte, vedi ad esempio l'utility gratuita SLUGS (http://www.chamisplace.com/asp/hkp.asp?f=cmslugs) da integrare nel programma gratuito HTML-Kit di cui abbiamo parlato in questo corso, che seleziona per voi i colori complementari rispetto alla base che avete identificato e li rapporta anche in termini di saturazione e gradienti d'intensità (passaggio da un colore all'altro con le principali tinte intermedie).
Parlando di colori, dovrete anche decidere se uniformarvi alla Websafe palette (vedi la scorsa lezione), il che sarebbe consigliabile per lo meno negli elementi di navigazione.
Ancora più visibili dei colori sono le fotografie e gli elementi grafici, specie se tridimensionali. Le fotografie aggiungono anche informazioni di contenuto, ma è bene ricordare che ogni immaginer aggiunta aumenta il tempo di scaricamento della pagina. Il rallentamento diventa particolarmente vistoso con immagini di grandi dimensioni e le pagine che contengono un gran numero d'immagini diventano inaccessibili a chi usi browser non convenzionali (come telefonino, PDA, eccetera) e difficili da aggiornare.
Gli elementi grafici 3D sono invece spesso un parte integrante del sistema di navigazione del sito. L'effetto tridimensionale è facilmente realizzato aggiungendo un'ombra alla figura, icona, pulsante o barra di navigazione, e creando bordi smussati. L'uso di grafica per le barre di navigazione ne aumenta la visibilità, ma ne complica la gestione. L'uso delle icone può essere invece esteticamente efficace, ma bisogna ricordarsi di aggiungere sempre un testo che spieghi la funzione di ciascuna, poiché non sempre il navigatore capisce il significato dell'icona semplicemente guardandola, anche se a noi sembrasse del tutto evidente.
Home page da incubo
Questa è invece una delle pagine recentemente bocciate da WebPagesThatSuck. È un garbuglio di colori e di elementi, alcuni animati, che sconcertano il navigatore impedendogli di capire dove sia capitato e dove possa andare da quel punto. Graficamente divertente, ma decisamente bocciata in termini di utilità per il Web.

Dare vita alla pagina
Il prossimo elemento a salire nella nostra graduatoria di visibilità sono le immagini in movimento, balzano all'occhio più di qualsiasi altra cosa e contribuiscono a differenziare il Web dalla carta stampata. Qui gli esperti di usabilità sono concordi: mai superare i due elementi per pagina. Nella realtà si finisce per averne diversi anche perché i banner e i bottoni pubblicitari sono spesso animati e si sommano agli elementi dinamici già presenti nel sito.
Il sistema più semplice e diffuso per creare animazioni consiste nello sfruttare una funzione del formato GIF che permette di combinare tra loro diversi "fotogrammi", tutti dello stesso formato, e mostrarli ciclicamente al posto dell'immagine di partenza. Il GIF animato è facile da realizzare e compatibile con qualsiasi browser. Presenta solo l'inconveniente di appesantire il file che lo contiene. Il secondo elemento di animazione molto diffuso è Macromedia Flash, un programma che produce animazioni grafiche di natura vettoriale, ossia definite per mezzo di formule matematiche.
Ciò permette di ottenere risultati molto più raffinati rispetto al GIF con file molto più leggeri, ma impone l'impiego di uno speciale software da abbinare al browser (plug-in) che nel caso di Flash è spesso integrato nelle versioni più moderne dei principali browser. Esistono soluzioni di animazione ancora più complesse che prevedono l'inserimento di filmati o di sequenze prodotte con altri software. Ciascuna di questi richiede tuttavia speciali plug-in oppure veri e propri applicativi, non disponibili a tutti i navigatori benché gratuiti.
L'ultima novità in materia di grafica vettoriale per il Web è il formato SVG (Scalable Vector Graphics) che costituisce uno standard nato con il nuovo linguaggio XML e che richiede anch'esso l'impiego di plug-in gratuiti, ma che in prospettiva diventerà parte integrante dei browser. SVG sarà probabilmente uno dei formato di riferimento del futuro, ma per il momento la scelta per le animazioni sul Web si concentra su GIF, e la relativa evoluzione PNG, e su Flash.
|