Il termine « webdesign » designa la disciplina che consiste nel strutturare gli elementi grafici di un sito web per tradurre, in una dimensione estetica, l'identità visuale della società o dell'organizzazione. Si tratta quindi di una tappa di concezione visuale, in opposizione alla concezione formale (ergonomia, navigazione).
L'obiettivo del webdesign è di valorizzare l'immagine aziendale o dell'ente attraverso degli elementi grafici per rinforzare la propria identità visulae e procurare un sentimento di fiducia nell'utente. Tuttavia, in virtù dei criteri dell'ergonomia, un si
Il webdesign è quindi un compromesso tra una presentazione che ha una grafica epostuflante, che permette di dare credibilità e un'immagine di marca all'azienda e una navigazione sobria (quasi spoglia) che permette all'utente di trovare facilmente quello c
Per estensione il termine webdesigner designa il mestiere che consiste nel concepire il design di un sito web.
Il design di una pagina web è innanzi tutto un atto artistico che mette in essere l'inventiva e la creazione. Lo scopo di questa guida è di dare qualche elemento chiave per ottenere un design efficace, tuttavia una buona fonte di ispirazione può essere la
Si arriva solitamente alla creazione di modelli di pagine (in inglese template), che servono da griglia per la creazione del sito. I template sono delle immagini, create sotto forma di calchi, oppure delle pagine web che rappresentano lo scheletro grafico di una pagina tipo.
La struttura tradizionale di una pagina web è la seguente :
E' essenziale distinguere nel template la differenza fra elementi invariabili, identici in tutte le pagine, oppure variabili da una pagina all'altra
Viene detta « carta grafica » (in inglese graphic charter) il documento sintetico riassuntivo delle regole di presentazione degli elementi grafici di un sito web, secondo la sua identità visuale.
La carta grafica definisce l'abbigliamento grafico della pagina, soprattutto rispetto alle dimesioni, colori e apparenze dei testi, immagini e bottoni del sito nonché il posizionamento relativo agli oggetti nella pagina.
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 reali
La maquetta rappresenta le pagine principali del stio (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 d
La dimensione delle pagine web dipende essenzialmente dalla definizione della visualizzazione (il termine risoluzione è usato a torto) degli internauti.
In termini di larghezza, l'ideale è optare per un valore inferiore alla definizione orizzontale della maggioranza dei visitatori, per non contrapporle nello scorrere lo schermo con l'ascensore orizzontale. Una pagina breve permette in effetti al visitator
Riguardo alla lunghezza, si consiglia di non superare i tre quinti 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 :
Alla 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 avrà più
Si consiglia di non usare più di tre colori diversi in 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 parti
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 (più vivi), in proporzione minore, per mettere in risalto degli elementi.
I colori hanno una simbologia implicita. E' quindi importante sceglierli con cognizione. In effetti, i colori influiscono sul comportamento degli individui :
| 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à, richezza, 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 no profit | |
| 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 :
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
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 per analogia ».
Esistono quindi globalmente due modi principali di scegliere i colori armoniosamente :
Infine, gli elementi di colore caldo appariranno globalmente più grandi rispetto a quelli di colore freddo.
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.
La scelta del colore di sfondo (in inglese background) è primordiale, dato che uno sfondo scelto male può rendere difficoltosa la lettura. E' necessario un buon contrasto tra il colore in primo piano e il colore dominante dello sfondo. A questo titolo, si sconsiglia fortemente di optare per uno sfondo grafi
E' decisamente controindicato usare più di due caratteri per un sito web. Gli stili 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, Helveti
Per un uso stampato tradizionale, il carattere serif facilita la lettura dato che permette di accompagnare lo sguardo del lettore.
Sul web, l'uso di questo carattere è sconsigliato perché a seconda della definizione dello schermo dell'utente, i serif possono diventare velocemente delle macchie per la lettura. Così, si consiglia di optare per dei caratteri senza serif, più rotondi.
Infine, sappiate che i testi che utilizzano dei caratteri non standard rischiano di non apparire correttamente sugli schermi degli internauti. Per creare dei titoli con caratteri simili, è comunque possibile evitare questo limite creando delle immagini tr
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 v