Questa guida di web design illustra le tecniche di base per iniziare a progettare il design di un sito web. Una volta definito l’argomento principale del sito è importante mantenere i contenuti sulla stessa linea principale senza passare ad argomenti scollegati e non associati tra di loro.
Inoltre devono essere definiti dall’inizio lo scopo e il tipo di pubblico da raggiungere.
Guida web design
Qualunque design di un sito web deve basarsi sui principi di base che sono:
- equilibrio
- unità
- enfasi
Equilibrio
Il concetto di equilibrio si basa sul concetto di peso degli elementi all’interno di una struttura.
Un equilibrio simmetrico suddividerà il peso in parti uguali nella pagina avendo un aspetto a specchio.
Un equilibrio asimmetrico ha un aspetto più naturale ottenendo l’equilibrio disponendo un elemento di grandi dimensioni da una parte e più oggetti di piccole dimensioni dall’altra bilanciando le due parti.
Unità
Il concetto di unità si riferisce alla visione d’insieme di tutti gli elementi che devono apparire come una figura unica. Evitando elementi isolati dal resto degli elementi della pagina.
Enfasi
Per enfasi si intende un punto focale all’interno della pagine che rappresenta un richiamo all’azione o un riferimento visivo che guida l’occhio alla giusta fruizione del contenuto.
Definiti il target e gli obiettivi desiderati si stabiliscono gli aspetti estetici del design contraddistinti dai seguenti parametri:
- colore
- texture
- stile
- tipografia
Colore principale
Il colore principale viene scelto in base al legame psicologico di ogni colore. Determinato in base alle associazioni emozionali più comuni che ogni colore suscita nella maggior parte delle persone.
- Rosso: il rosso è il colore della passione e delle emozioni forti stimolando l’adrenalina e il metabolismo.
- Arancione: l’arancione come il rosso è un colore attivo ma meno formale. Adatto a prodotti alimentari stimolando l’appetito ed essendo collegato alla felicità e alla creatività.
- Giallo: il giallo è un colore brillante che risalta molto e per questo utilizzato dai taxi americani. Essendo un colore energico può indurre a oppressione se utilizzato eccessivamente.
- Verde: Il verde è un colore naturale associato all’ambiente, alla stabilità. Esprime speranza e freschezza. Viene visto in modo spontaneo dagli occhi.
- Blu e azzurro: il blu con le sue sfumature esprime apertura mentale, intelligenza e sicurezza. Inoltre diminuisce l’appetito per il fatto che non esistono alimenti blu o azzurri. Essendo il colore del cielo e del mare contribuisce alla distensione e a sentirsi meglio.
- Viola: il viola è associato al potere e alla ricchezza a causa della difficoltà nell’ottenere originariamente tessuti di questo colore. Può essere considerato una via di mezzo tra l’intensità del rosso e l’effetto calmante del blu. Utilizzato per progetti esclusivi ed originali.
- Bianco: il bianco esprime pulizia e purezza. Comporta risultati netti e chiari sia come sfondo che sovrapposto ad uno sfondo scuro.
Schema colore
Lo schema colore scelto definisce lo stile generale da seguire per tutti gli altri punti.
Partendo dal colore principale ottenuto in base agli obiettivi e al target da raggiungere si definisce lo schema più adatto tra i seguenti:
- monocromatico: lo schema monocromatico si basa su un solo colore in varie sfumature e saturazioni. Questo schema è adatto ad argomenti che esprimono calma e distensione. Associato a linee e texture orizzontali garantisce un effetto rilassante.
- acromatico: lo schema acromatico è un monocromatico basato su scala di grigi e nero. Utilizzato per far risaltare gli elementi centrali e le immagini che diventano il punto focale della scena.
- colori analoghi: lo schema con colori analoghi si ottiene utilizzando i colori all’interno di un terzo della ruota dei colori. Ottenendo un passaggio graduale da un colore all’altro senza forti contrasti.
- colori complementari: I colori complementari sono quelli che si trovano in posizione opposta nella ruota cromatica. Da questo schema si ottiene un forte contrasto adatto a far risaltare fortemente determinati elementi. Da utilizzare anche nelle varie saturazioni per avere un effetto meno acceso.
- complementari discordanti: i colori complementari discordanti sono colori non proprio opposti ma neanche così vicini da essere considerati come analoghi. Da queste associazioni si ottengono combinazioni fantastiche adatte ad un pubblico giovane.
- split complementari: lo schema split complementare si ottiene partendo da uno schema complementare e prendendo due colori adiacenti di un colore e mantenendo l’altro che sarà il colore principale. Ottenendo uno schema di tre colori con effetto acceso ed eccessivo adatto per argomenti giovanili.
- triadico: lo schema colore triadico usa tre colori equidistanti suddividendo in parti uguali la ruota cromatica. Si ottiene ancora un effetto acceso e giovanile.
- rettangolari: lo schema colore rettangolare considera due colori adiacenti di due colori complementari. Ottenendo uno schema a quattro colori con effetto simile agli schemi triadico e split complementare.
Un servizio gratuito molto utile a determinare lo schema colore preferito è fornito dal sito paletton.com.
Texture
La texture (immagine di sfondo ripetuta) è un elemento che esprime il carattere di un sito.
- Punti: una texture a punti fornisce un aspetto più digitale essendo una schematizzazione dei pixel.
- Linee: una texture a linee diagonali esprime movimento. Linee orizzontali o verticali rappresentano maggiore rilassatezza e distensione.
- Mosse: texture curve esprimono scioltezza. Texture quadrate sono più meccaniche e rappresentano freddezza. Texture miste a curve e angoli esprimono vigore e danno un aspetto manuale tipo graffiti.
Stile
Esistono diversi stili di design per un sito web in base agli argomenti e al target di riferimento.
- Antico: lo stile antico o invecchiato dà un effetto artigianale che esprime attenzione ai dettagli ed esperienza.
- Pulito: uno stile pulito e semplice esprime serietà e concretezza.
- Artigianale: lo stile artigianale ricorda un diario o un album fotografico. Adatto per argomenti ricreativi e informali.
- Fumetto: lo stile fumetto è adatto ad un target giovane ed esprime creatività.
- Minimalista: stile essenziale molto elegante ed elimina ogni distrazione.
Tipografia
I diversi tipi di tipografia associati ai font del testo hanno un grande potere comunicativo e vanno scelti con la giusta attenzione. Infatti ogni tipo esprime un carattere e un tono per il contenuto.
- Serif: è una tipografia old style con grazie e raccordi arrotondati che ricorda le iscrizioni su monumenti e luoghi importanti.
- Transitional: versione più moderna e meccanica con terminali squadrati.
- Modern: versione con maggiore contrasto e molto elegante.
- Slab: serif con carattere più maschile ed elaborato.
- Sans Serif: tipografia pulita con effetto contemporaneo e fornisce maggiore risalto del testo.
- Symbol: tipografia ornamentale con icone e illustrazioni.
- Scrittura a mano: effetto amichevole che esprime umanità e personalità.
- Monospazio: stile digitale che ricorda il codice informatico.
- Fantasy o Display: tipografia con effetti particolari che rappresentano elementi naturali come il ghiaccio o il legno consumato. Sono meno leggibili ma esprimono originalità e personalità.
Sul sito Google Font trovi tutte le tipografie e combinazioni di font desiderate e gratuite da integrare nel tuo sito web. Scopri maggiori informazioni nel mio articolo Come modificare il tema del tuo sito wordpress.
Utilizza i concetti illustrati in questo articolo per creare un sito web gratuito. Scopri maggiori informazioni sul mio articolo Come creare un sito gratis con wordpress.
