colorscheme3

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

colorscheme3 Come scegliere lo schema dei colori per un sito web?

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

adobekuler 1024x552 Come scegliere lo schema dei colori per un sito web?

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

colourlovers 1024x543 Come scegliere lo schema dei colori per un sito web?

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

pictaculous 1024x548 Come scegliere lo schema dei colori per un sito web?

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

colourcontrastcheck 1024x481 Come scegliere lo schema dei colori per un sito web?

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?

share small Come scegliere lo schema dei colori per un sito web?
Avatar of Ivan23 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".

16 Comments

  • Avatar of Lauryn

    Lauryn

    8 febbraio 2012, 14:47

    grazie dell’articolo Ivan!

  • Leano

    8 febbraio 2012, 14:50

    complimenti articolo davvero interessante

  • camu

    8 febbraio 2012, 15:22

    Colourlovers lo uso da anni ed è fenomenale. Anche lo strumento per il contrasto, per chi tiene all’accessibilità, è molto utile.

  • Avatar of Ivan23

    Ivan23

    8 febbraio 2012, 15:32

    @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.

  • Daniele

    8 febbraio 2012, 16:43

    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/

  • Alex

    8 febbraio 2012, 16:53

    Conoscevo Kuler, ma non gli altri. Grazie per le dritte!

  • aledesign.it

    8 febbraio 2012, 17:13

    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!

  • Avatar of Ivan23

    Ivan23

    8 febbraio 2012, 17:22

    @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.

  • Web Designer Freelance

    9 febbraio 2012, 10:35

    io utilizzo ormai da tempo i primi due…e altri ancora… :)

  • Web Designer Freelance

    9 febbraio 2012, 10:41

    scusate, non c’entra nulla, ma come faccio a inserire il mio avatar?

  • Avatar of Lauryn

    Lauryn

    9 febbraio 2012, 11:06

    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 ;)

  • Alfredo

    19 febbraio 2012, 16:41

    Complimenti per l’articolo.. molto utile ed interessante, come sempre ;-)

  • Avatar of Ivan23

    Ivan23

    20 febbraio 2012, 17:10

    @Alfredo Grazie per i complimenti.

  • Bino Kollettivo Kuore

    31 gennaio 2013, 14:33

    non posso più vivere senza Kuler!

  • Gugo

    22 febbraio 2013, 22:32

    Volevo ringraziare anche io, bellissimo articolo, molto interessante ed molto utile!
    Grazie :)
    Gugo

Add Comment Register



Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>