• IT
  • DE
  • EN
Vai ai contenuti

I segreti per abbinare i colori giusti sul tuo sito come uno Jedi del web design

WebSite X5
Pubblicato da Incomedia in Guide e consigli · Giovedì 21 Dic 2017
Tags: sp_go
Presti mai attenzione ai colori quando crei un sito web?

Abbinare i colori giusti sul tuo sito è essenziale per attirare il pubblico adatto, interessarlo ai tuoi prodotti o servizi e convincerlo a tornare. Il motivo è semplice: il colore agisce sulle sensazioni e per questo ha una forza persuasiva unica.

Ma come si scelgono i colori giusti?

Se cerchi un metodo veloce per creare un sito da applicare oggi al tuo progetto, allora ti sarà utile questa guida pratica su come realizzare il miglior layout  per un sito web con lo schema colore coerente con il pubblico di riferimento. E con la nostra infografica sulla Forza del Colore diventerai anche tu uno Jedi del web design!

Tralasceremo la teoria del colore, ma imparerai i trucchi per metterla in pratica e il metodo che utilizziamo da tempo per progettare i template di WebSite X5.

Alla fine dell’articolo saprai scegliere la palette di colori più coerente con il tuo progetto e applicare uno schema colore su ogni genere di sito. Imparerai anche come ottenere fino al 24% di clic in più con il colore giusto. Sia che tu decida di creare un blog, aprire uno store online o pubblicare un sito vetrina personale o per la tua azienda, i colori non avranno più segreti per te.

La Forza del colore in numeri: perché è importante scegliere i colori giusti

In un sito i colori incidono su un’infinità di elementi: sfondo, menu, bottoni, titoli, testi, link e immagini. Determinano la leggibilità di una pagina web, possono indurre all’acquisto e rendere un brand riconoscibile al primo scroll. Per queste ragioni, il colore è uno strumento potente per ogni web designer. Sì, ma quanto vale la sua forza?



Conoscere la forza del colore è essenziale per uno Jedi del web design. Per questo, quando progetti un sito web, considera l’impatto del colore sugli utenti. Tieni a portata di mano la nostra infografica sulla Forza del colore, perché quando dovrai organizzare le tue pagine web, ti sarà più facile individuare gli elementi importanti per realizzare un layout efficace.

Cos’è uno schema colore e come generarlo per il tuo sito

Lo schema colore più semplice ed efficace da creare è composto da una palette di 2 colori principali che contrastano tra loro e 1 o 2 colori per i testi:

  • 1 Colore Base
  • 1 Colore Contrastante
  • 1 Colore per i Testi tra bianco, nero o grigio

Il colore base ha una presenza dominante nel tuo sito. Il colore di contrasto, invece, corrisponde alla personalità del tuo blog o sito. Per questa ragione è essenziale usarlo per bottoni o icone, ossia in pochi punti e molto precisi.
In effetti, è immediato associare Amazon al colore arancione del suo bottone carrello o YouTube al rosso del Play. Ci hai mai fatto caso?

 4 passi galattici  per generare la miglior palette per il tuo sito web.

1. Scegli il colore base nella galassia web (ascolta la Forza del colore)

Quali gusti hanno gli utenti che vuoi attirare sul tuo sito? Per individuare il colore base giusto per il tuo progetto, devi entrare in sintonia con il tuo pubblico potenziale, conoscerne le abitudini e prevedere le sue reazioni. Un saggio Jedi ti esorterebbe a  “Connetterti con la Forza”.

Per prima cosa, cerca ispirazione nel web. Per comprendere la galassia dei tuoi utenti, devi navigarla. Usa queste 3 coordinate per orientarti nella ricerca:

  • la categoria del tuo sito: prendi spunto dai siti più visitati per la tua nicchia. Il sito vetrina di un’assicurazione avrà una palette di colori diversa da quella di un sito per bambini, non credi?

  • Il tuo logo (se già ne hai uno): il tuo colore base dovrà essere in linea con la grafica esistente, perché un’immagine coordinata aiuta gli utenti a ricordare meglio la tua attività e i tuoi prodotti.  Per questo, ispirati ai siti con un colore simile al materiale grafico a tua disposizione.

  • La tua personalità: immagina il tuo sito come una persona in carne e ossa e cerca il colore che ne esprima il carattere. Puoi aiutarti con alcuni stereotipi, come i significati del colore o la distinzione tra colori caldi e colori freddi.

Anche se sembrano coordinate generiche, nelle fasi di avvio di un progetto si rivelano utili per 3 ragioni: indicano quali colori attirano di più i tuoi potenziali visitatori, a quali colori sono più abituati e come differenziarti.

In questa prima fase di ricerca, ti consigliamo due tool gratuiti che possono aiutarti a individuare il colore adatto al tuo sito. Entrambi classificano i colori web con il codice esadecimale HEX composto da 6 caratteri alfanumerici preceduti da #:

  • ColorZilla: è un’estensione per Chrome e Firefox che permette di identificare i colori di un sito web mentre lo navighi; puoi ricavare un singolo colore o l’intera palette.

  • BrandColors: una lista di brand conosciuti in tutto il mondo ordinati in base ai codici colori HEX utilizzati sui loro siti web. Da Amazon a Apple, a CocaCola.

Raccolte le idee, sei pronto al passo galattico successivo: scegliere il colore base. In realtà è molto semplice e non servono Photoshop o programmi di grafica.

Ti basta digitare nella barra di ricerca di Google la parola Color Picker o il codice HEX del colore base, che hai ricavato da BrandColors o ColorZilla. Sullo schermo vedrai il colore con le indicazioni per il tuo codice.



Muovi il mirino con il mouse e sperimenta la gradazione di colore fino a trovare la più efficace per il tuo sito. Di ogni colore Google fornisce la panoramica completa dei valori dei colori. Per esempio troverai il codice RGB che definisce i colori in alcuni tool per la creazione di siti web come WebSite X5.

2. Abbina il colore base a un contrastante in meno di 5 minuti

Ora ti mostreremo come ottenere il colore contrastante in meno di 5 minuti con un generatore di palette facile e completo. Dubiti che sia possibile? Da Jedi a Jedi: “Ecco perché hai fallito sinora”.

  • Vai su Paletton e inserisci il codice HEX del colore base nell’apposito box A ;
  • Seleziona l’opzione “Add Complementary B per ottenere la tinta opposta alla tua base dominante. Non ti convince per la tua palette? Allora prosegui.
  • Clicca sull’icona “Adjacent C per ottenere un colore simile alla base scelta.
  • Oppure, clicca sull’icona “Triad” D se vuoi ottenere una tinta a forte contrasto.
  • Infine, seleziona “Alternative with Text” dal menu “Preview E e otterrai i toni di bianco, nero e grigio per i tuoi testi con i colori base e contrastante che hai generato.

Sai cosa? Lo schema colore per il tuo sito è già pronto all’uso.
In meno di 5 minuti.


Esempio di schema colore basato sulla Triade.

Con l’opzione “Example” F puoi anche testare la resa della palette su una pagina web. Attivala e sul tuo schermo comparirà un layout standard di sito con la palette di colori che hai generato. Anche per questo, Paletton si dimostra un color scheme generator ricco di funzioni utilissime anche per i web designer alle prime armi.

Se cerchi un sistema ancora più veloce per abbinare i colori del tuo sito, prova i tool che abbiamo raccolto in questa lista.

Se cerchi palette di colori già pronte, esplora questi siti:


Vuoi generare uno schema colore da un’immagine?
Ti suggeriamo di provare:


In questo articolo su come scegliere la palette per il tuo blog Julie Gibbons ha raccolto una galleria di palette ispirate a immagini dalle atmosfere differenti. Con i suoi esempi pratici imparerai a sfruttare al meglio le potenzialità di questi strumenti.

Se hai un sito personale o un blog sul tuo hobby, questo è il web tool ideale:


perché genera palette ispirate a luoghi, stagioni o temi specifici.

Per esempio, puoi colorare il tuo blog di viaggi con le combinazioni di colori ispirate ai posti che ami di più. Gli amanti di sport invernali in pochi istanti avranno gli schemi colori ispirati a paesaggi innevati. WOW!

L’argomento palette comincia ad appassionarti?  Allora è tempo di esplorare una nuova galassia. Scopri l’arte di abbinare i colori in questa guida di Looka.

3. Applica uno schema colore al tuo sito

“Fare o non fare. Non c’è provare.” Lasciati ispirare dalla più famosa massima Jedi e lanciati con noi in missione. Immagina di dover creare un sito di musica per un amico o per un cliente. Che colori serviranno?

Cerca ispirazione nel web e per trovare la palette giusta definisci:

  • Come vuoi che si senta il tuo pubblico
  • Cosa vuoi raccontare

Eccoti 2 esempi tratti dal template 3sounds:

  • sito di un festival estivo di musica classica
    con una palette di colori caldi in cui base e accento simili (contrasto dagli “Analoghi”) creano armonia; richiama il sole estivo e il legno degli strumenti classici protagonisti del sito.




  • sito di un DJ di musica elettronica
con una palette di colori vivaci e luminosi che contrastano con la base bianca (contrasto dalla “Triade”); la forza del contrasto sprigiona energia e ritmo, come la musica suonata dal protagonista del progetto.



Hai notato che la disposizione dei colori nella pagina è pressoché identica per entrambi i siti? Infatti, segue la gerarchia dello schema colore.
La base avvolge lo sfondo, l’accento (ne abbiamo usato anche più di uno) è isolato a bottoni ed elementi testuali che si vuole evidenziare.
Eppure, i 2 progetti sono distinti. Come mai? Perché le palette esprimono anime differenti: una classica e l’altra contemporanea.

La  palette di colori "giusta"  parla di te parla al tuo pubblico

Applicare la combinazione di colore giusta è questione di equilibrio. Le guide ai significati del colore e la psicologia del colore aiutano a definire la personalità di un sito. Da un punto di vista pratico, però, il metodo migliore è trovare connessioni concrete tra i colori e il soggetto del tuo sito (la stagione, il sole, i materiali).

Come osserva Gregory Ciotti in un articolo interessante sul colore: "La chiave è trovare modi pratici per prendere decisioni sul colore."

4. Bottoni, colori e testi: gli errori da evitare

Quando si tratta di colore e siti web, devi sapere che è facile sbagliare.
Gli errori più comuni sono:

  • usare troppi colori all’interno dello stesso layout
  • usare colori di testo e sfondo complementari
  • usare in modo eccessivo colori caldi e freddi

Di recente anche a noi è capitato di commettere un errore e, per trasformarti in uno Jedi del web design, ti racconteremo cosa abbiamo imparato.
Capirai che per un sito come il nostro convincere gli utenti a provare il prodotto è molto importante. Al lancio della versione 13 di WebSite X5, il colore dei bottoni "Scarica Gratis" sul nostro sito era identico al colore base scelto: blu.
Abbiamo avviato alcuni test provando a cambiare il colore dei pulsanti con il verde e il rosso.
Risultato? I pulsanti rossi hanno ottenuto il 24% in più di clic, la percentuale più alta.


Dati Analytics websitex5.com, Gennaio 2017

Sì, il rosso funziona, ed anche altri studi lo confermano, ma la cosa interessante è che entrambi i colori (rosso e verde) hanno aumentato significativamente il tasso di conversione.

Perché?
Meno usi un colore, più richiama l’attenzione”.
Rosso e verde sono colori che “staccano” dal colore base blu che abbiamo scelto. Difficile non notarli. E sai che nella galassia del web è facile perdersi!

Conclusioni

Come hai visto, creare uno schema di colori è molto semplice, perché gli strumenti automatici  per generare palette sono innumerevoli e intuitivi. In realtà, quando si tratta di colore e web design la parte difficile è trovare l’equilibrio adatto per un sito.

Per il prossimo progetto, con la nostra guida Jedi al colore nel web design ti sarà facile utilizzare i colori

nel modo giusto
al momento giusto
con il pubblico giusto
per lo scopo giusto.

(Che la Forza del Colore sia con te)


Torna ai contenuti