Come scegliere lo schema dei colori per un sito web?
Il design è un’aspetto fondamentale per la riuscita di una buona interfaccia grafica di un sito. Oltre alla qualità del codice “well formed”, il sito deve comunicare, emozionare e suscitare interesse nel cliente che deve comprare i nostri servizi , o semplicemente se vuole trovare qualche informazione che gli serve.
Molto spesso leggo nei vari forum o gruppi del nostro settore che si sostiene chi è web developer non abbia un senso spiccato del design e viceversa, ma io non sono d’ accordo con questa distinzione netta: naturalmente c’è una differenza dovuta alle proprie inclinazioni e percorsi di studi effettuati, quindi c’è chi ha più senso estetico dovuto ad un percorso di studi artistico e c’è chi ne ha più nello sviluppo del codice avendo basi informatiche.
Vorrei proporre in questo articolo, una serie di strumenti online che potrebbero aiutare ad evitare di bloccarsi nello sviluppo del design per una indecisione riguardo alla scelta di uno schema di colore nella creazione di un sito, (io sono uno di loro).
Color Scheme Designer 3
Color Scheme Designer 3 riporta una schermata di facile utilizzo,attraverso la quale puoi scegliere il colore da cui partire per realizzare la tavolozza dei colori. La cosa meravigliosa di questo sito è che ti propone lui stesso i 6 schemi di colore soltanto cliccando dei link in alto a sinistra. Un’altra interessante funzione di questo sito è che ti permette di emulare la visione del design in base agli utenti affetti da problematiche di vista, ad esempio cecità parziale, monocromatismo, daltonismo, e attraverso i link “preview”, “light page example”, “dark page example”, puoi direttamente avere una visione del design con colori chiari o scuri.
Dopo aver scelto lo schema colore preferito, si può esportarlo in diversi formati come: HTML/CSS, GIMP, PHOTOSHOP, XML.
Io uso questo sito per i miei lavori, me ne sono completamente innamorato.
Adobe KULER
Un’ottima alternativa a Color Scheme Designer 3 è Adobe Kuler, qui potete creare con pochi passi, combinazioni di colori basate su configurazioni standard degli schemi di colore. Un’aggiunta funzione di questo strumento è che è in grado di generare schema di colore attraverso l’upload d’immagini. La registrazione a questo sito offre agli utenti l’interscambio di tavolozze colori con gli altri, che chiunque può usufruire.
COLOURlovers
Questo sito è dedicato alla condivisione di materiale tra gli utenti, consentendo di condividere pattern di qualunque tipo e suggerisce i colori da impiegare nel mondo web design.
Pictaculous
Vi è mai capitato girando per la città o in viaggio di fotografare monumenti o che so alcune bellezze storiche del posto, e vi domandate quali colori la natura ha adottato per realizzare quel bel fiore che vi piace tanto? O quando un cliente vi manda alcune immagini per creare il suo sito e vi domandate con quale schema di colore comincio? Nessun problema, c’è Pictaculous che permette di avere lo schema di colore facendo l’ upload dell’immagine che ci interessa. Cliccando “Get my palette” ti fornirà una tavolozza di 5 colori inerenti alla tua immagine.
Se quando girate non avete il computer il sito vi permette di uploadare la vostra immagine inviandola con lo smartphone all’indirizzo colors@mailchimp.com. In pochi minuti, nella tua casella mail ti arriveranno le 5 palette di colore.
Colour Contrast Check
Uno dei fattori chiave dell’accessibilità web è quella di garantire un buon contrasto tra sfondo e testo, cioè in poche parole dovremmo garantire la leggibilità del testo. A volte, quello che sembra a noi leggibile, agli utenti con menomazioni visive può risultare illeggibile. Come dobbiamo capire quando il contrasto tra testo e sfondo è adeguato alla gran parte della percentuale di utenti? Qui ci viene di aiuto il sito “colour contrast check”. Avete due opzioni per ottenere il risultato ottimale: o scrivete il codice esadecimale del colore sfondo e testo (la modalità che uso io), o spostate i bottoni che vedete in questa screenshot. Un metodo molto utile e veloce ricavando l’ esadecimale del colore che ci interessa è usare la paletta colori di Photoshop o Gimp o se usate Chrome l’applicazione Colorzilla.Come vi approcciate alla creazione del design? Adottate queste utilities o ne conoscete delle migliori? Prima scegliete il design o lo create in base a quei contenuti che il cliente vi da?
L'Autore
Ivan Zammitti, web developer freelance.In principio indirizzato verso il graphic design, ha trovato il suo obiettivo nella vita come web developer front/back end. Specializzando in html/css/javascript/php ama condividere tecniche seguendo l'approccio open source e l'etica hacker. Il suo motto è "Code is poetry".
Aggiungi a Google
14 Commenti
grazie dell’articolo Ivan!
complimenti articolo davvero interessante
Colourlovers lo uso da anni ed è fenomenale. Anche lo strumento per il contrasto, per chi tiene all’accessibilità, è molto utile.
@Lauryn sono io che ti devo ringraziare
@Leano Grazie del commento, provali e fammi sapere come ti trovi @camu Ciao, io invece è da poco,perchè a dire il vero, non mi espongo più di tanto nel graphic design ma devo dire che queste utilities mi hanno stuzzicato l’appetito,la voglia di capire quello che c’è dietro al “giallo” o “blu” cioè l’aspetto comunicativo del design.
Nel caso tornassero utili anche io ne avevo raccolti 5 che secondo me erano i migliori:
http://blog.danielevotta.it/2011/11/i-5-migliori-tool-per-scegliere-i-colori-del-tuo-sito-web/
Conoscevo Kuler, ma non gli altri. Grazie per le dritte!
Ottimo questo link, aiuta davvero in momenti di crisi creativa data dal colore..come in questi giorni in cui devo far un sito per un ristorante..Dilemmi a gogò! Ottimi link! Grazie!
@Daniele, grazie per il link, l’ho letto, ho messo tra i preferiti quelli che non conoscevo.
@Alex,@aledesign.it: sono contento di essere stato utile nel darvi dei suggerimenti.
io utilizzo ormai da tempo i primi due…e altri ancora…
scusate, non c’entra nulla, ma come faccio a inserire il mio avatar?
devi usare il servizio http://www.gravatar.com che è collegato a tutti i siti fatti con wordpress
devi usare la stessa mail che usi per commentare ovviamente 
[...] scegliere lo schema dei colori per un sito web (Italian Web [...]
Complimenti per l’articolo.. molto utile ed interessante, come sempre
@Alfredo Grazie per i complimenti.