Webmastering: Web design
Introduzione al web design
Il termine «web design» designa la disciplina che consiste nel strutturare gli elementi grafici di un sito web per tradurre, in una dimensione estetica, l'identità della società o dell'organizzazione. Si tratta quindi di una tappa di concezione visuale, in opposizione alla concezione formale (ergonomia, navigazione). L'obiettivo del web design è di valorizzare l'immagine aziendale o dell'ente attraverso degli elementi grafici per rinforzare la propria identità visuale e procurare un sentimento di fiducia all'utente. Tuttavia, in virtù dei criteri dell'ergonomia, un sito deve prima rispondere alle aspettative degli utenti e permettergli di trovare facilmente l'informazione che cerca.
Il web design è quindi un compromesso tra una presentazione che ha una grafica stupefacente, che permette di dare credibilità e un'immagine di marca all'azienda e una navigazione sobria che permette all'utente di trovare facilmente quello cerca. Per estensione il termine web designer designa il mestiere che consiste nel concepire il design di un sito web.
L'ispirazione necessaria
Il design di una pagina web è innanzi tutto un atto artistico che attua l'inventiva e la creazione. Lo scopo di questa guida è di dare qualche elemento chiave per ottenere un design efficace, anche se una buona fonte di ispirazione sono i siti professionali. È particolarmente interessante vedere come vengono disposte le informazioni, come sono presentati i menu e i blocchi di informazioni e, in generale, di determinare ciò che dà a un sito un aspetto professionale.
Disposizione della pagina
Si arriva solitamente alla creazione di modelli di pagine (in inglese template). I template sono delle immagini, create sotto forma di layout, oppure delle pagine web che rappresentano lo scheletro grafico di una pagina tipo. La struttura tradizionale di una pagina web è la seguente:
Un logo in altro a sinistra. La maggior parte delle volte il logo è cliccabile per tornare alla home page;
Una zona di navigazione (menu), a sinistra e/o a destra;
Un header con il nome del sito, una barra di navigazione e una zona prevista per un banner (pubblicitario o meno);
Un corpo della pagina, con le informazioni essenziali;
Un footer (piè di pagina) con le informazioni utili come la data dell'aggiornamento, un link al modulo di contatto, un piano di accesso e così via:
È essenziale distinguere nel template la differenza fra elementi invariabili, identici in tutte le pagine, oppure variabili da una pagina all'altra.
Graphic charter
Il graphic charter) è il documento sintetico riassuntivo delle regole di presentazione degli elementi grafici di un sito web, secondo la sua identità visuale. Il graphic charter definisce l'abbigliamento grafico della pagina, soprattutto rispetto alle dimensioni, i colori e le apparenze dei testi, immagini e bottoni del sito, nonché il posizionamento relativo agli oggetti nella pagina.
Maquette
Una maquette è un sito fittizio e sommario (prototipo) che presenta la grafica del sito e la sua navigazione. La maquette permette di formalizzare la concezione del sito e costituisce generalmente la tappa di validazione di questa fase, per passare alla fase di realizzazione. La maquette rappresenta le pagine principali del sito (senza contenuto) attraverso delle pagine statiche e permette di simulare la navigazione. Così, gli elementi dinamici come il motore di ricerca potranno ad esempio condurre ad una pagina che presenta dei risultati fittizi.
Dimensioni delle pagine
La dimensione delle pagine web dipende essenzialmente della risoluzione dello schermo. In termini di larghezza, l'ideale è optare per un valore inferiore alla definizione orizzontale della maggioranza di display, per non forzare gli utenti di usare lo scroll orizzontale. Una pagina breve permette in effetti all'utente di localizzare facilmente le informazioni cercate. Riguardo alla lunghezza, si consiglia di non superare 3 a 5 volte l'altezza dello schermo. In effetti, le pagine troppo lunghe rischiano di non essere lette per intero e sono più difficili da caricare. Per garantire una visualizzazione ottimale per quasi tutti i visitatori esistono diverse strategie:
Scegliere la larghezza più piccola supportata dal più gran numero di schemi (1024×768 ad esempio);
Scegliere una pagina con tabelle invisibili di larghezza variabile (definite in percentuale);
Individuare la risoluzione dei visitatori attraverso uno script (in javascript ad esempio) e reindirizzare il visitatore ad una pagina adattata. Questo metodo necessita che il javascript sia attivo nel browser e richieda di creare tante pagine quanto la larghezza desideri.
Posizione delle informazioni
Durante la creazione delle pagine, la posizione delle informazioni ha la sua importanza. Dato il senso di lettura delle informazioni (in diagonale dall'angolo superiore sinistro all'angolo inferiore destro), l'informazione posta nell'alto della pagina è più probabile che venga letta dagli utenti.
Scelta dei colori
Si consiglia di non usare più di tre colori diversi in un sito web per rispettare il criterio della sobrietà. La scelta dei colori dovrà corrispondere, se è il caso, ai colori dell'organizzazione (soprattutto ai colori del logo) e esprimere un ambiente particolare. Indipendentemente dai colori, si raccomanda di stabilire un colore predominante, che rappresenti la maggior parte della pagina web, e uno o più colori secondari più dinamici, in proporzione minore, per evidenziare degli elementi. I colori hanno una simbologia implicita. È quindi importante sceglierli con cognizione. In effetti, i colori influiscono sul comportamento degli individui:
Fisicamente, appetito, sonno, temperatura del corpo;
Emozionalmente, sentimento di paura, di sicurezza, di gioia;
Psicologicamente, dinamismo, concentrazione.
La tabella sottostante riassume il significato classico associato ai colori:
| Colore | Simbolismo positivo | Simbolismo negativo | Settore |
|---|---|---|---|
| Blu | Calma, fiducia, autorizzazione, appagamento, serenità, protezione, serio, mistico, bontà, acqua, spazio, pace | Freddo, sonno | Velo, nuove tecnologie, informatica, medicina |
| Viola | Delicatezza, passione, discrezione, modestia, religione | Melanconia, tristezza, lutto, insoddisfazione | Cultura, politica |
| Rosa | Fascino, intimità, donna, bellezza | Ingenuità | Diario, donne |
| Rosso | Calore, forza, coraggio, dinamismo, trionfo, amore, entusiasmo | Violenza, collera, pericolo, emergenza, divieto, sangue, inferno | Lusso, moda, sport, marketing, media |
| Arancione | Tiepido, confort, gloria, felicità, ricchezza, onore, piacere, frutto, profumo, tono, vitalità. | Fuoco, allarme | Divertimento, sport, viaggio |
| Giallo | Luce, gioia, sole, vita, potere, dignità, oro, ricchezza, immortalità. | Inganno, egoismo, gelosia, orgoglio, allarme | Turismo |
| Verde | Natura, vita vegetale, soccorso, equilibrio, fede, completezza, riposo, fiducia, tolleranza, speranza, orgoglio, gioventù, carità. | Scoperta, natura, viaggio, educazione | |
| Marrone | Calma, filosofia, territorio. | Sporcizia | Ambiente |
| Bianco | Purezza, innocenza, neve, pulizia, freschezza, ricchezza. | Moda, attualità | |
| Grigio | Neutralità, rispetto. | Design, associazioni, organizzazioni non a scopo di lucro | |
| Nero | Sobrietà, lusso, notte. | Morte, oscurità, tristezza, monotonia. | Cinema, arte, fotografia e proibito |
La composizione dei colori ha anche un'influenza sulla percezione dei volumi. La composizione dei colori può permettere di scatenare una sensazione di benessere, sia per la decorazione della casa che per la grafica di un sito web. Il cerchio cromatico è uno strumento utile che permette di imparare le interazioni fra i colori. Il cerchio cromatico è una rappresentazione circolare dei colori, sulla quale figurano i seguenti colori:
I colori primari (rosso, verde, blu), colori «puri», che non possono risultare da un mischio tra colori;
I colori secondari (ciano, magenta, giallo), ottenuti mischiando in parti uguali due colori primari vicini. I colori secondari sono diametralmente opposti ai loro colori complementari (sottrattiva) sul cerchio cromatico;
I colori terziari, ottenuti mischiando un colore primario e un colore secondario.I colori sono anche classificati in colori «caldi» (tonalità vicina al rosso) e colori «freddi» (tonalità vicina al blu):
Esistono delle regole universali che regolano l'armonia dei colori, dovuti a delle proprietà fisiche dell'occhio. In effetti, quando si osserva un colore, l'occhio crea automaticamente, sul suo contorno, un filtro del colore complementare. Si parla allora di «contrasto simultaneo». Con questo meccanismo, la percezione dei colori dipende dai colori circostanti. Così, il giallo appare più arancione se abbinato con il blu e il blu appare più viola. Un blu accanto a un rosso appare verde, ecc. Fra l'altro, i colori vicini sul diagramma cromatico creano una sensazione di equilibrio per l'occhio, in virtù dell'assenza di contrasto, si parla allora di «armonia d'analogia». Esistono quindi globalmente due modi principali di scegliere i colori armoniosamente:
Scegliendo delle nuance dello stesso colore, ossia dei colori della stessa tinta con tonalità simile;
Mischiando dei colori complementari (caldi e freddi), cioè dei colori distanti sul diagramma cromatico. Per due colori, basta scegliere dei colori complementari, diametralmente opposti, per tre colori bisognerà formare un triangolo equilatero, ecc.
Infine, gli elementi di colore caldo appariranno globalmente più grandi rispetto a quelli di colore freddo.
Scelta delle immagini
Le immagini permettono di rendere più piacevole e divertente un sito web. Tuttavia l'abuso di immagini può disturbare il confort visivo, nonché il caricamento delle pagine. I webmaster debuttanti amano ravvivare il proprio sito con animazioni divertenti trovate sul web. Per quanto possibile è meglio evitarle dato che possono innervosire il lettore e conferiscono un carattere amatoriale al sito.
Colore di sfondo
La scelta del colore di sfondo (in inglese background) è primordiale, dal momento che uno sfondo scelto male può rendere difficile la lettura. È necessario un buon contrasto tra il colore in primo piano e il colore dominante dello sfondo. A questo titolo, si sconsiglia fortemente scegliere uno sfondo grafico, quanto può interferire con la lettura e, in generale emana un senso di dilettantismo. Lo sfondo sarà scelto e generalmente molto pallido.
Tipografia
È caldamente contro-indicato usare più di due caratteri per un sito web. Gli stili dei caratteri devono essere usati con parsimonia (per il titolo ad esempio) e la parte essenziale della pagina dovrà essere realizzata con un carattere classico (Arial, Verdana, Helvetica, ecc.). Per la stampa tradizionale, i caratteri con grazie (serif) facilitano la lettura dato che permettono di accompagnare lo sguardo del lettore.
Sul web, l'uso di questi caratteri è sconsigliato perché a seconda della definizione dello schermo dell'utente, i tratti terminali (grazie) possono diventare delle macchie e danno fastidio nella lettura. Così, si consiglia di optare per dei caratteri senza grazie (senza serif) più rotondi. Infine, sappiate che i testi che utilizzano dei caratteri non standard rischiano di non apparire correttamente sugli schermi degli utenti. Per creare dei titoli con tali caratteri, è comunque possibile evitare questo limite creando delle immagini trasparenti con testo.
Simboli grafici
Si consiglia di utilizzare dei pittogrammi o delle icone per stabilire una segnaletica visiva. Attenzione comunque alla scelta dei simboli dato che il senso percepito dall'utente può essere diverso da quello attribuito, soprattutto se il sito web ha una vocazione internazionale. I pittogrammi seguenti sono spesso utilizzati:
Una lente d'ingrandimento simbolizza solitamente una funzione di ricerca;
Una busta segnala la possibilità di contattare il webmaster via mail;
Un punto interrogativo caratterizza un help online;
Una casa rappresenta il link all'homepage;
Una bandiera di un paese segnala la lingua del testo oppure la possibilità di cambiare la lingua.
Foto: © Pixabay.
Il documento intitolato « Webmastering: Web design » dal sito CCM (it.ccm.net) è reso disponibile sotto i termini della licenza Creative Commons. È possibile copiare, modificare delle copie di questa pagina, nelle condizioni previste dalla licenza, finché questa nota appaia chiaramente.