Sito web responsive: quale palette colori?

Arriva il cliente: “Ciao, voglio un sito web responsive!” Fantastico, rispondiamo: ci occupiamo proprio di quello! Ma dopo aver preso accordi, capito le esigenze e studiato il caso arriva sempre il momento creativo, quello allegro, quello fresco, quello facile: quello dove bisogna creare due/tre layout di prova, in gergo mockup, che il nostro nuovo fan dovrà poi approvare!

Da dove si parte per ideare un sito web responsive?

La risposta, per noi, è in questi cinque step:

  1. Raccolta delle preferenze del cliente
  2. Ricerca dell’esistente e aggiornamento dei nostri modelli mentali (come siamo ZEN 😀 )
  3. Sviluppo del wireframe, mentre qualcuno si occupa della palette cromatica
  4. Mettiamo insieme wireframe e palette cromatica!
  5. Mockup del sito web responsive pronto!

Questo è quel che succede per ogni mockup (oddio, in realtà i punti 1 e 2 sono sempre comuni, poi ci si divide). Molto bene, direte voi. Cool.

L’annoso problema della palette cromatica.

Qual’è il punto più difficile di tutto il processo? Immaginare le funzionalità? Capire il layout? Definire come gli elementi del sito web responsive si ridimensionano a seconda del dispositivo? MA NO! La cosa spesso più lunga e più importante è definire la palette cromatica, perché rappresenterà il sapore, comunicherà le emozioni e definirà l’immagine e lo stile complessivo del sito web.

Da dove si parte, direte voi.

Ci sono diversi processi che possono venire in aiuto al progettista, graphic o web designer che sia. Prima di tutto è bene partire dal materiale del cliente, se questi ha già un logo, o qualche elemento di immagine coordinata, che sarà un utile punto di partenza: questo perché i colori hanno un significato, trasmesso come percezione, che non è affatto scontato, e cambia anche a seconda della saturazione del colore stesso.

Alcuni esempi per alcuni colori:

  • Rosso: può rimandare ad affetto, amore, passione… oppure ricondurre a violenza, esagerazione, attenzione e pericolo
  • Giallo: può comunicare crescita e allegria… oppure trasmettere nervosismo, fastidio, agitazione
  • Verde: può rilassare, riposare, trasmettere tranquillità e originalità… oppure comunicare sofisticazione, falsificazione, alterazione
  • Blu: può essere più rilassante del verde, calmo… oppure rimandare a tristezza, depressione
  • Bianco: comunica purezza, ordine e ritmo… oppure freddezza, sterilità
  • Nero: rimanda a serietà, professionalità ed eccellenza… oppure mistero, notte, allarme o paura

Come vedete esistono sempre significati duplici, non c’è un significato univoco per ciascun colore, ed il risultato finale dipende da come questi vengono giustapposti, organizzati e messi insieme.

Come mettere insieme questi colori per il nostro sito web responsive?

Secondo , docente ed ideatore del corso preliminare allo storico Bauhaus, una composizione cromatica equilibrata mischia colori che risultano opposti nel cerchio cromatico. Questo perché i colori opposti (o complementari) restituiscono una tonalità di grigio (a seconda della saturazione del colore) che, secondo i suoi studi, rilasserebbe l’occhio.

Palette Sito Web Responsive - Farbkreis di Johannes Itten
Possiamo scegliere la palette del nostro sito web responsive usando il cerchio cromatico di Itten?

Ora, questo è vero solo in parte, perché nell’occhio abbiamo diversi elementi sensibili ai colori (coni e bastoncelli) e questi sono presenti in diverse quantità: quelli più numerosi sono sensibili al colore verde ed è per questo che lo stare in mezzo alla natura, in genere, è rilassante per la vista. Quindi il grigio c’entra ben poco.

A questo punto, però, bisogna valutare che tipo di reazione vogliamo stimolare nella persona che guarda quella composizione grafica, perché non è detto che vogliamo rilassarla: potremmo, ad esempio, voler creare un allarme, oppure incuriosire, oppure scioccare, oppure intenerirla!

A seconda dell’emozione che vorremmo generare nell’osservatore, sceglieremo dei colori diversi riferendoci agli studi effettuati in psicologia (che sono quelli poi alla base dell’elenco più su!).

Ho capito, ma in pratica come scelgo fra più di sedici milioni di colori?

Uno strumento molto, molto utile per scegliere una determinata palette cromatica, partendo da un colore di base che ci DEVE essere (perché abbiamo scelto il rosso, o perché il cliente ha un logo che è principalmente blu, ad esempio) è: Paletton!

Paletton per scegliere la palette del tuo sito web responsive
Ecco come si presenta l’interfaccia di Paletton: un sito web utile per creare la palette cromatica del tuo sito web responsive.

L’interfaccia di Paletton è molto semplice ed intuitiva, anche se usandolo vi renderete conto della possibilità di personalizzazione che arriva anche abbastanza in profondità, per un tool gratuito sul web. Possiamo generare palette secondo diversi criteri, eccone alcuni:

  • Stesso colore: genera diverse sfumature per lo stesso colore
  • Triade per vicinanza: genera diverse sfumature per tre colori, scegliendone due vicini a quello di base nel cerchio cromatico
  • Triade per opposizione: genera diverse sfumature per tre colori, scegliendo i due più lontani da quello di base
  • Quartetto per opposizione: come sopra, ma genera sfumature per quattro colori

Insomma, una vera figata! Provare per credere. In tutto questo, vi invitiamo ad osservare come il cerchio cromatico di paletton sia praticamente uguale a quello di Itten. BOOOOOOOOOOOOOM!

[actionbutton text=”Siete fantastici, voglio scrivervi qualcosa!” label=”Vai, sei libero di contattarci!” url=”https://sito.agency/contatti-preventivo-sito-web/” target=”_self”]

Share this:

Lascia un commento

Utilizziamo i cookie per offrirti la migliore esperienza online. Puoi accettare o personalizzare l'uso dei cookie, in accordo con la nostra cookie e privacy policy!

Close Popup
Privacy Settings saved!
Impostazioni

Quando visiti un sito Web, esso può archiviare o recuperare informazioni sul tuo browser, principalmente sotto forma di cookies. Alcuni cookie possono essere disattivati, altri sono invece vitali per il funzionamento del sito web. Controlla qui le tue impostazioni.

Questi cookie sono necessari per il funzionamento del sito Web e non possono essere disattivati nei nostri sistemi.

Cookie tecnici
Per utilizzare questo sito web usiamo i seguenti cookie tecnici.
  • wordpress_test_cookie
  • wordpress_logged_in_
  • wordpress_sec
  • wp_lang
  • popup_closed

Salva le impostazioni
Accetta tutti i cookie