Scegliere i colori giusti per il tuo sito web: lo schema cromatico di Fronteers.nl

Il bel rosso non è brutto - 7 consigli per scegliere i colori giusti per il tuo sito web o app.

Questo articolo è apparso in precedenza sul sito web di Fronteers.nl

Il design è una professione, sia chiaro. Ma a volte, come costruttore di siti web, non hai un budget per un designer professionista. O ti piace farlo da solo?

Questo significa che il tuo sito web o la tua app deve essere brutta? Certo che no! Anche se il design va ben oltre l'aspetto visivo, la scelta dei colori giusti per il tuo sito web è piuttosto decisiva, perché ehi, anche l'occhio vuole qualcosa. Ecco perché in questo articolo vi do 7 consigli per determinare i colori giusti per il vostro sito web o app.

1. Utilizzare uno strumento di selezione colore

Uno strumento utile per scegliere i colori è il browser addon Colorzilla. In questo modo è possibile vedere, tra le altre cose, quali colori utilizza un sito web. È inoltre possibile utilizzare Adobe Color (ex Kuler) per creare schemi di colore o utilizzare schemi di colore creati da altri.

Ma una volta che hai scelto uno schema di colori, come lo traduci al tuo sito web?

Prima di tutto, scegliete un colore dominante. Questo è spesso il colore che appare nel logo. Usa questo colore per cose che devono attirare l'attenzione, come titoli, pulsanti, menu, ecc. È inoltre possibile scegliere uno o due colori d'accento per creare una combinazione di colori. A seconda dell'atmosfera che si desidera utilizzare, questo può essere un colore, una tonalità o un'ombra complementare. Infine, scegliere un colore di sfondo tranquillo, ma spesso il bianco è una buona scelta.

Lo schema cromatico del sito web Fronteers.nl

2. Lasciatevi ispirare dai buoni esempi esistenti (ma non siate degli imitatori!).

Non c'è niente di sbagliato nel trovare ispirazione sui siti web che ti piacciono. Quindi guarda gli altri siti web e impara. Come usano gli accenti? Cosa noti velocemente? E' per via di un colore? Quali sono i colori combinati? A proposito, aiuta anche a guardare i siti web che ti danno occhi sanguinanti. Perché sapere come non farlo è altrettanto istruttivo!

Anche importante: assicuratevi di non assomigliare troppo a qualcun altro. Non vuoi fare l'imitatore, ovviamente.

Di recente mi sono imbattuto nel sito web di un'azienda di protezione solare, che pensavo seriamente facesse parte di Coolblue. Forse il designer ha pensato: quello che funziona per Coolblue probabilmente funziona anche per noi. Ma alla fine ha un effetto controproducente sulla costruzione di un marchio buono e forte. Non vuoi che i visitatori pensino ad un'altra azienda quando visitano il tuo sito web, vero?

Schema di colori di esempio per la protezione solare. Assomiglia molto a CoolBlue!
Quel blu e quell'arancione mi ricorda qualcosa........

Se guardiamo il sito web di Amnesty International, abbiamo chiaramente scelto di utilizzare il colore del logo come colore d'accento. Per il resto, è stato scelto uno schema tranquillo con toni di grigio.

Il colore del logo è protagonista sul sito web di Amnesty International.
Accenti gialli sul sito web di Amnesty, basati sul logo.

L'ANWB ha anche scelto di utilizzare i colori del logo sul sito web, ma soprattutto il blu come colore d'accento e anche molte (troppe (troppe se me lo chiedete) sfumature di blu per supportarlo.

Lo schema cromatico delle ANWB: prevalentemente giallo e blu.
Tante sfumature di blu sul sito web della ANWB. E' almeno necessario?

3. Usa Pinterest per creare moodboard

E 'bene pensare alla sensazione che si desidera evocare con il tuo sito web o app. Può aiutare a creare un moodboard su Pinterest. Quando finalmente vedrete tutte le immagini sul vostro moodboard insieme, probabilmente scoprirete un pattern di colore che riflette l'atmosfera che volete ottenere.

Con Tineye puoi poi estrarre i colori da una o più foto e applicarli al tuo sito web.

Trasformare un'immagine in uno schema di colori con Tineye.

4. Sfruttare le associazioni cromatiche

I colori hanno un senso. A seconda del gruppo target, è possibile o meno utilizzare determinati colori. Ad esempio, un sito web o un'applicazione per un'organizzazione naturalistica come Natuurmonumenten utilizzerà tonalità di verde. Nella nostra mente, è una scelta logica. Chiedi a un bambino di disegnare un albero. Nove volte su dieci diventa un tronco marrone con sopra una nuvola verde. Quell'unico espressionista artistico in formazione, a parte questo. Notevole su questo sito web è che il colore del logo non si riflette immediatamente nell'uso del colore sul sito.

I colori del sito web dei monumenti naturali sono per lo più verdi, con qualche fresco accento di colori freschi.
Sui siti web di organizzazioni naturalistiche come Natuurmonumenten troverete molte sfumature di verde.

5. Visualizza la tua scelta dei colori in un contesto più ampio

Un sito web o un'applicazione spesso non è una cosa a sé stante, ma parte di un marchio. Quindi, quando si scelgono i colori, provate a pensare in modo più ampio del solo sito web. O viceversa, se avete un logo, pensate a schemi di colori che potete applicare alle vostre comunicazioni online. Dopo tutto, il logo stesso può essere bello, ma la scelta del colore può essere impraticabile in un ambiente online. Se si vuole costruire un marchio forte, deve essere utilizzato in modo coerente, sia online che offline. I colori e le immagini riconoscibili sono essenziali.

6. Meno è più

Alla fine, lo stesso vale qui: meno è meglio. Un sito web o un'applicazione con un sacco di bianco sembra tranquillo. Utilizzare colori brillanti solo per piccoli elementi e per elementi che devono attirare l'attenzione, altrimenti diventa rapidamente forte.

7. Accettare che i colori non sono uguali in tutti.

Il colore è importante, molto importante. Ma per favore: non passare tre ore a pensare se le tinte rosa 1, 2, 3 o forse 4 si inseriscono meglio nell'insieme. Mi dispiace per te: non tutti hanno un monitor superiore supersonico e ultra calibrato che sia bello sullo schermo quanto lo è sullo schermo. E che dire dello stand serale sui dispositivi mobili (un bel bagliore giallo fine sui vostri freschi colori pastello, yoo-hoo!).

Forse una parte del vostro gruppo target è daltonico o parzialmente avvistato? Nella scelta del colore giusto, un buon contrasto è molto più importante delle ultime tendenze. Utilizzando Axe, ad esempio, puoi controllare nel tuo browser per vedere se i colori del tuo sito web generano un contrasto sufficiente a soddisfare le linee guida per l'accessibilità dei contenuti web.

Per saperne di più sull'uso dei colori

Strumenti utili

  • https://labs.tineye.com/color/ - Prendi i colori da una foto
  • http://www.colorzilla.com/ - color picker add on per il tuo browser. Mostra anche i colori usati su un sito web.
  • Sip colorpicker (per Mac) - a pagamento, ma pratico strumento offline per salvare gli schemi di colore.
  • Adobe color cc - selezionatore di colori online gratuito da Adobe.
  • Axe - controllo del contrasto di colore per la barra degli strumenti di sviluppo del browser.

Lascia un commento