Da dove iniziare nella progettazione di una pagina web? Sicuramente avere a disposizione i contenuti da comunicare e la struttura complessiva del sito è un ottimo primo passo.
Ma viene il momento in cui allo schizzo abbozzato della struttura (wireframe) deve applicarsi l’aspetto grafico, in modo da arrivare al mockup.
In questo articolo voglio illustrarti 3 concetti introduttivi sul web design che ti guideranno nella scelta dei colori, delle immagini e dei font del tuo progetto web.
Indice
L’importanza della psicologia nella scelta dei colori
Scegliere il colore corretto per la tua comunicazione è fondamentale. Da quella scelta dipenderà l’efficacia di tutti i tuoi messaggi, digitali o meno.
Ogni colore viene associato a un significato e trasmette delle sensazioni a chi lo vede. Non ci credi?
L’azienda Palmolive provò a lanciare sul mercato un nuovo sapone per i piatti con un colore diverso. Fu costretta a tornare sui suoi passi perché i consumatori lo consideravano meno «sgrassante» del giallo e meno «fresco» del verde.
La comprensione dei colori è parte del nostro processo evolutivo. I primati hanno iniziato a vedere a colori (3 colori) circa 35 milioni di anni fa in seguito alla mutazione del settimo cromosoma e di quello X. Grazie a questo hanno sviluppato un vantaggio evolutivo che li aiutava a raccogliere i frutti, a individuare i predatori e a leggere meglio le espressioni facciali.
Il diverso effetto che hanno su di noi i colori dipende dalla loro diversa lunghezza d’onda. Per esempio, il rosso, colore visibile con lunghezza d’onda maggiore, ha un intrinseco effetto stimolante perché viene associato a stimoli pericolosi come il fuoco, il sangue, la lava e il tramonto.
I ricercatori hanno anche dimostrato che i colori svolgono un ruolo nella memorizzazione: il rosso incrementa fortemente la memorizzazione delle parole negative, mentre il verde potenzia la memorizzazione delle parole positive.
Inoltre, esistono elementi comuni nella percezione dei colori anche fra culture diverse. In uno studio del 2013 condotto su 243 persone di otto nazioni diverse, i ricercatori visto che il blu, il verde e il bianco sono sempre associati alla calma, alla serenità e alla gentilezza.
Quindi, tieni conto di tutte queste considerazioni quando progetti le tue pagine web o qualunque altra tua forma di comunicazione, come un video aziendale, uno spot, ma anche una presentazione faccia a faccia. Qualunque sia il messaggio che intendi veicolare, questo dovrà persuadere chi lo vede a compiere un’azione. E per essere persuasori efficaci devi assicurarti di usare i colori nel modo giusto.
Alcuni colori influenzano le prestazioni cognitive: per esempio, il verde stimola la creatività, mentre il rosso inibisce l’intelletto.
Come scegliere la palette di colori più adatta per il tuo sito?
Esistono un sacco di libri di web design che trattano questo argomento. Ma dal punto di vista cognitivo posso darti alcune linee guida.
Considera che se nel settore di mercato in cui opera la tua azienda esiste già una convenzione, ti conviene usarla. Come dice Steve Krug, uno dei massimi esperti di usabilità a livello mondiale, “le convenzioni sarebbero nostre amiche [… perché] molto utili. Di regola le convenzioni diventano tali solo se funzionano. Convenzioni ben applicate rendono più facile all’utente passare da un sito all’altro senza sforzi per capirne il funzionamento. [La convenzione] dà un rassicurante senso di familiarità. […] Molti designer tendono a sottostimare l’importanza delle convenzioni. [… Invece] approfittate delle convenzioni”.
Oggi la stessa cosa si dice anche con i termini di neuromarketing: aderire a una convenzione agevola la fluidità cognitiva dell’utente.
Ecco, quindi, un brevissimo riassunto del significato e dell’utilizzo dei principali colori.
Rosso
Insieme al giallo e al blu costituisce uno dei colori primari.
Il rosso è un colore eccitante e stimolante. Generalmente è associato a situazioni di pericolo, ma anche usato per esprimere passione o potenza.
Per questo puoi usarlo come sfondo di messaggi di avviso o pericolo, ma anche per suggerire forza, determinazione e audacia.
Le tonalità di rosso più calde come il mattone o l’amaranto sono associate a sensazioni quasi confortanti, risultando validi per esprimere stabilità o solidità aziendale.
I rossi più brillanti invece, come il rosso puro o il color pomodoro, sono l’ideale per realtà giovani e innovative.
Giallo
Il giallo è il colore del sole, dunque rappresenta allegria ed energia. Per questo è adattissimo per siti web destinati ai bambini, perché in grado di attirare la loro attenzione.
A seconda della tonalità usata però può comunicare autorità, arte, saggezza e intelligenza.
Blu
Il blu è il colore del cielo, dunque trasmette calma e pace e ha un legame con il pensiero spirituale.
Siccome il blu è collegato a etica, affidabilità e sicurezza, viene utilizzato dalla maggior parte dei siti web aziendali.
L’azzurro invece è legato al rapporto informale e di amicizia, infatti è usato da molti social media, come Facebook, Twitter e LinkedIn.
Verde
Il verde è il colore della natura, quindi esprime calma, benessere, sentimenti di rinascita e crescita personale.
Per questo il verde è associato all’ambiente e quindi utilizzato da siti che si occupano di questa tematica o che trasmettono valori etici.
I verdi più scuri sono associati al denaro, anche perché la moneta principale mondiale, il dollaro, è di quel colore. Per questo il colore verde scuro è ideale per i siti che parlano di opportunità finanziarie.
Arancione, rosa e viola
Come il rosso, anche l’arancione è un colore che esprime energia, ma un po’ più delicato. I web designer lo usano per aggiungere vivacità e creatività.
Il rosa è associato ai giocattoli delle bambine. Ideale per siti web a tema nostalgico o con un target di pubblico principalmente femminile.
Il viola è da sempre collegato alla nobiltà. Il viola più chiaro viene associato a sentimenti romantici. Il viola scuro viene utilizzato per trasmettere ricchezza e lusso.
Nero, bianco e grigio
Nel web vengono usati come colori di sfondo di pagine o box. Ideali per far risaltare determinati contenuti o aree.
Il nero richiama l’eleganza, mentre il bianco la pulizia, la semplicità e l’innocenza.
Siti web basati soltanto su questi due colori possono essere molto d’impatto, specialmente se associati a un uso creativo della tipografia.
Il grigio è un colore sostanzialmente neutro che richiama la sobrietà. Attenzione che se male utilizzato male tende a far apparire un design come troppo anonimo, senza mordente.
Nero, bianco e grigio rimangono i colori migliori per i progetti web che vogliono richiamare concetti di serietà e neutralità. Per questo motivo sono utilizzati nei siti di news.
Come abbinare i colori in una pagina web
Nel mondo del design, il metodo principale per combinare due colori è quello dei colori complementari.
Esistono dei veri e propri schemi di colore, detti diagrammi cromatici, che dispongono le diverse tonalità lungo un cerchio.
Il colore che si trova nella zona opposta del cerchio rappresenta il colore complementare rispetto a quello selezionato.
La regola dei colori complementari afferma appunto di non scegliere 2 colori adiacenti nello schema, ma opposti rispetto al centro.
Ma naturalmente, come tutte le regole si possono avere delle eccezioni.
Esistono numerosi tool on line per individuare i colori complementari come:
Scegliere le immagini giuste per il tuo sito web
Le immagini aiutano a distribuire meglio il testo, rendendolo più gradevole da leggere.
Inoltre, possono fornire elementi di approfondimento dei concetti espressi nella parte scritta.
Le immagini migliori rispettano i criteri di composizione della fotografia.
La regola generale della composizione in fotografia è che ci deve essere un oggetto primario della foto, detto soggetto.
In generale la foto non deve avere più centri di interesse che catturino l’attenzione, ma uno soltanto. Questo significa che il soggetto della fotografia deve essere subito riconoscibile nello scatto.
Accanto a questo principio generale, esistono veri e propri criteri, in fotografia, che stabiliscono come dovrebbe essere impostata un’inquadratura.
Il principale di questi criteri è la regola dei terzi, secondo la quale il soggetto principale non si colloca mai al centro della scena, ma su uno dei “terzi”, vale a dire all’incrocio di una delle 2 righe e delle 2 colonne che suddividono l’immagine (un po’ come nel gioco del tris). Questo perché quelli sono i punti dove più facilmente casca l’occhio.
La regola dei terzi è il più utilizzato criterio di composizione, ma non è l’unico. Altri criteri sono:
- la sezione aurea
- la diagonale
- il cerchio
- il triangolo (tengo sfocato ciò che è fuori dal triangolo di interesse)
- a L (dritta o rovesciata)
Ecco altri suggerimenti per scegliere immagini d’impatto:
- Utilizza immagini con pochi dettagli e con ampi spazi vuoti. Se ci sono troppi elementi, l’osservatore della foto non sa bene dove guardare.
- Presenza di persone. Ricorda di controllare che, quando usi immagini con persone di profilo, ci sia uno spazio extra nella direzione in cui i soggetti puntano lo sguardo.
- Angolazioni. Resisti alla tentazione di utilizzare una foto prevedibile: la vista centrale di un monumento, lo scatto dall’alto della torta di compleanno, il ritratto frontale di due persone, poste una accanto all’altra, mentre dicono “cheese”. Preferisci angolazioni più sperimentali e inusuali, per distinguerti dal 99% delle altre foto.
- Usa immagini con colori poco contrastati.
Come scegliere il font per il tuo design
“Selezionare un font è una caratteristica cruciale del web design”
Eric A. Meyer
Intanto, un po’ di teoria. I caratteri si distinguono in 5 categorie (o, per essere precisi, il linguaggio CSS definisce 5 tipi di famiglie di font):
- Serif (con grazie): si tratta di font proporzionali e con grazie. Un font si dice proporzionale quando i suoi caratteri hanno larghezze differenti (per esempio una i e una m hanno larghezze diverse). Le grazie (o terminazioni) sono le “decorazioni” alle estremità delle lettere. Gli esempi di font con grazie più conosciuti sono il Times e il Georgia.
- Sans-serif (senza grazie): si tratta di font proporzionali ma senza grazie, quindi con lettere essenzialmente “dritte”. Esempi noti di questi font: Helvetica, Geneva, Verdana e Arial.
- Monospace (monospazio): sono font non proporzionali, indipendentemente dalla presenza o meno di grazie. Nei font non proporzionali ogni lettera occupa lo stesso spazio, quindi la i occuperà la stessa larghezza della m. I font monospaziali vengono in genere impiegati per visualizzare codice di programmazione o dati tabellari. Esempi: Courier, Courier New, Consolas e Andale Mono.
- Cursive (calligrafici): tentano di emulare la scrittura manuale dell’uomo. Esempi: Zapf Chancery, Author, e Comic Sans.
- Fantasy (chiamati anche “decorative” o “display”): non hanno una caratteristica definita e non rientrano nelle altre famiglie. Esempi: Western, Woodblock, and Klingon.
Quale carattere tipografico utilizzare in una pagina web? Ecco alcuni consigli
- Non usare più di 3 font diversi
- Non usare il carattere del tuo logo
- Evita font troppo sottili: renderebbero difficile la lettura, specie su dispositivi mobili
- Cerca di evitare i font calligrafici, quelli che emulano la scrittura: siamo nel 2022 🙂
Ricorda che nel web l’utente scansiona il testo, non lo legge, almeno in una fase iniziale. Per questo, cerca di creare in ogni pagina una chiara gerarchia visiva, come fanno i quotidiani, assegnando i caratteri più grandi ai titoli più importanti.
Nel web questo si fa utilizzando le intestazioni, speciali elementi del linguaggio HTML che permettono appunto di stabilire la gerarchia in un contenuto.
Utilizzare una buona gerarchia visiva attraverso questo sistema, oltre a aumentare la fluidità cognitiva degli utenti, aiuta anche i motori di ricerca a individuare meglio l’argomento di cui parla la pagina che stai creando e a posizionarla meglio tra i suoi risultati. Se vuoi approfondire come i motori di ricerca determinano la posizione della pagina di un sito tra i loro risultati, leggi il nostro approfondimento sulla SEO.
Conclusioni
Questi erano solo alcuni dei principi di base per una corretta impostazione di un progetto web. Se vuoi approfondire altri aspetti, leggi il nostro articolo sulle tendenze del web design 2022-2023.
Bibliografia sui concetti di web design
Steve Krug, Don’t make me think, Tecniche nuove
Matthew MacDonald, HTML5 The missing manual, O’Reilly
Paul McFedries, Web Design Playground, Manning Pubblications
Christophe Morin e Patrick Renvoisé, Il codice della persuasione, Hoepli
Jennifer Niederst Robbins, Learning Web Design, O’Reilly
Andrea Saletti, Neuromarketing e scienze cognitive per vendere di più sul web, Dario Flaccovio