Combinazioni di colori per il web design: buone, brutte e cattive

Combinazioni di colori per il web design: buone, brutte e cattive

Come tutte le attività, anche il Web Design ha attraversato un percorso di crescita fino a giungere, finalmente, ad uno stato di maturazione. Designers e programmatori hanno raggiunto la maturità professionale e creativa attraverso anni di lavoro e di specializzazione.

Tuttavia, ogni tanto, capita ancora di imbattersi in siti web che fanno rabbrividire: sembrano ancorati agli anni 90 piuttosto che nel XI secolo! E per quanto sorprendente possa sembrare, si tratta quasi sempre non di blog personali, ma di siti web aziendali. Perché esistono ancora questi siti? Come vengono creati? Il problema principale con questa tipologia di siti web dall'aspetto terribile è quasi sempre da ricercarsi nella combinazione di colori utilizzata in fase di progettazione.

Per questo motivo è importante discutere questo aspetto: le buone, le brutte e le cattive combinazioni di colori nel web design. Abbiamo già trattato questo argomento in un post che ha avuto un rilievo notevole (lo trovate qui). Vediamo di approfondire il discorso.

Le buone

Combinazioni di colori analoghi e complementari

Un grande design è costruito attorno a una combinazione di colori che utilizza sia i colori complementari che analoghi. I colori complementari si trovano uno di fronte all'altro nello spettro dei colori: blu e arancio, rosso e verde, giallo e viola, per esempio. I colori analoghi sono situati uno accanto all'altro, come il blu e viola, o bianco e grigio.

I colori complementari devono essere utilizzati in quelle aree della pagina in cui si desidera attirare l'attenzione dello spettatore attraverso il contrasto creato dalla vicinanza di questi colori. Per il resto della pagina, la tavolozza dei colori dovrebbe concentrarsi su colori analoghi rilassanti, per evitare di creare l'affaticamento degli occhi.

colori sito web

Colori neutri

Il bianco e il nero sono considerati non-colori o colori neutri. Questa è la migliore combinazione per i blocchi di testo, in quanto garantisce la massima leggibilità e la possibilità di focalizzarsi sul testo evitando distrazioni. Il bianco e nero sono anche una grande combinazione di colori da utlizzare se si vuole raggiungere un look pulito, hi-tech e professionale per il sito web.

Le brutte

Colori tenui

I colori pastello sono considerati eleganti e professionali, ma solo se sono inseriti in una buona combinazione con un colore complementare: devono creare un contrasto tra sfondo e testo o tra sfondo e grafica. Infatti, se la combinazione di colori fosse "giallo chiaro su sfondo crema" o "celeste su sfondo bianco", il vostro sito web rischierebbe di apparire caotico, difficile da leggere e irritante. La persone dovrebbero strizzare gli occhi o regolare le impostazioni del monitor solo per essere in grado di leggere il messaggio - e potete star sicuri che non lo faranno, con tanti altri siti web tra cui scegliere...

Cattivo uso del simbolismo

Che ne siate consapevoli o no, ogni colore esprime una certa emozione e racchiude un significato.

  • Il rosso rappresenta l'amore, la passione, l'eccitazione e il cibo (spesso lo si usa per stimolare l'appetito);
  • il giallo è associato alla gioventù, all'ottimismo e trasmette esuberanza;
  • il verde rappresenta il denaro, la natura, la tranquillità e la salute;
  • i toni sul blu sono calmanti e trasmettono professionalità;
  • il nero può significare un sacco di cose (lusso, potenza, eleganza e formalità per il lutto, il male, la morte, il mistero e così via).

L'utilizzo di un colore nel contesto sbagliato è una sorta di gaffe che non passerà inosservata.

Le cattive

Sfondi strutturati

Le texture non sono male di per sé. Alcune riescono ad esaltare l'aspetto generale di un sito web, conferendo loro un look in "stile 3D". Ma le texture troppo grandi, sature e caotiche, se usate in combinazione con altri elementi grafici e testi sovrapposti, non sono solo terribilmente poco professionali: provocano soprattutto l'affaticamento degli occhi e allontanano il visitatore dal vostro sito web.

Colori vibranti

I colori vibranti si verificano quando due colori molto contrastanti tra loro sono collocati uno accanto all'altro (o sono sovrapposti). Queste combinazioni di colore sono in realtà pessime da guardare. Alcuni esempi: blu e rosa, verde e arancione, rosso e viola. È ancora peggio quando le tonalità selezionate sono particolarmente luminose. Il loro uso va quindi accuratamente studiato, per non rischiare un'accozzaglia di colori di difficile leggibilità.

Ottime combinazioni di colori

L'arte di creare un'ottima tavolozza cromatica per un sito web sta tutta nella giusta selezione della combinazione di colori in grado di trasmettere le emozioni che il sito si prefigge di voler comunicare. Ci sono combinazioni di colori che si completano a vicenda, come i contrasti tra marrone e arancione, e contrasti forti per catturare l'attenzione dello spettatore, come il nero e il giallo o il rosso e bianco.

Non importa quanto siate creativi, ci sono alcune regole che non dovrebbero mai essere ignorate:

  • Se il punto centrale della pagina è il testo, allora il sito dovrebbe contenere una buona parte di bianco, in modo da creare un contrasto neutrale tra il colore del carattere e lo sfondo. Il classico bianco e nero del libro stampato è una scelta eccellente;
  • Applicate la regola 60-10-30: il colore principale nella palette dovrebbe occupare il 60% del vostro design, il colore più forte il 10% e il colore complementare il 30%;
  • Se il punto centrale della pagina è un'immagine o qualsiasi altro elemento grafico, bisogna usare colori tenui per lo sfondo.
  • Al fine di identificare e creare le proprie tavolozze di colori per un progetto di web design, si dovrebbe tornare alle origini: la ruota dei colori. Naturalmente, è anche possibile utilizzare lo strumento Adobe Color CC di Adobe, ma ogni buon web designer sa che non serve strafare: la semplicità e il rispetto delle regole di base possono dare una grande spinta alla creatività.

Infine, ricordate che ci sono ancora alcune differenze nel modo in cui i vari browser e schermi di dispositivi mobili visualizzano i colori: tenetelo presente in modo da testare la tavolozza dei colori sul maggior numero possibile di dispositivi per correggere potenziali combinazioni di colori poco efficaci.

Vota:
1
 
Certificato SSL: come e perché installarlo sul tuo...
Facebook per ristoranti: alcuni consigli per la ge...

Forse potrebbero interessarti anche questi articoli