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

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

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

Adobe KULER

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

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

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?