Costruire un tema: scelta dei colori.

Rieccoci con l’ennesimo appuntamento. Ho già parlato di layout e dimensioni, il prossimo passo è capire che tono dare alle nostre pagine.

Inutile farvi la mielosa manfrina sul verde-speranza, rosso-passione, nero-inquieto, arancione-piccante e così via. Lo sappiamo tutti.

Io ad esempio volevo dare al blog un tono fresco, leggero e allegro, così, come psicologia insegna, i colori da usare erano pastelli chiari: azzurro, verde (volevo persino mettere un po’ di giallo ma poi vi spiego un po’ perché non l’ho messo…). Anche il colore del testo non è un semplice nero.

Innanzitutto dobbiamo rispondere ad una semplice domanda: di cosa parleremo nel blog? Stiamo costruendo il nostro tema e abbiamo la possibilità di ottimizzarne ogni suo aspetto. Quali saranno gli argomenti?

Nel mio caso la risposta la conoscevo già, il mio blog va avanti da anni e difficilmente cambierà target. E’ un blog personale e dunque pieno di racconti di giornate più o meno allegre, più o meno pesanti, più o meno storte.

Ecco, l’ultima parola potrà sembrare stupida ma non lo è.

La vita (qualche manfrina mielosa devo pur scriverla da qualche parte) è fatta di alti e bassi, così, come vi sentireste a scrivere dentro un cuoricino frasi inneggianti l’odio?

E’ un esempio drastico di come il contenitore possa risultare in contrasto con il contenuto. Potrà sembrar banale ma non lo è.

Questo periodo della mia vita è particolarmente allegro e questo – è giusto dirlo – volevo farlo risaltare. Sia perché mi rispecchia molto, sia perché i contenuti presumibilmente continueranno ad avere questa linea.

Però, so che non sempre sarà così. Si dice che uno degli errori più grandi degli uomini sia quello di non cercare le nuvole in cielo quando c’è bel tempo. Io voglio esser preparato, così mi son chiesto se non corressi il rischio di odiare (parola grossa) questo posto ogni volta che, arrivando da queste parti di pessimo umore, mi sarei ritrovato un bel sole (ecco il giallo!) stampato in faccia.

Va bene che psicologicamente può persino aiutare, però volevo sentirmi libero di adattare il tema ai contenuti e non il contrario.

Volevo dargli un argomento ma non chiuderlo a doppia mandata su uno specifico. Così, l’header è sì allegro, ma non carico. C’è un bel sorriso, ma… provate a mettergli una mano davanti. Cosa vedete? Un panorama sereno, che tra l’altro incuriosisce per il suo inconsapevole aspetto indeciso.

Bene, dopo questa manfrina sono sicuro che anche voi avrete scelto i vostri colori. Ma… come far combaciare tutto in modo da non essere un pugno nell’occhio, come un verde acceso accanto ad un giallo?

Palette coloriIo non sono un bravo grafico (non sono neanche un mago nell’accoppiare scarpe, jeans e maglietta) ma c’è chi ha fatto mezzo lavoro per noi. Quelli di COLOURlovers. Sul sito trovate schemi di colori proposti da utenti (con un pizzico di buon gusto in più di noi) che sono continuamente, scelti, rivisti e votati dalla community. Insomma, scegliete un umore (provate con “happy” ad esempio) e trovate sicuramente un accoppiamento carino. Ah, se ve ne innamorate, hanno persino un feed costantemente aggiornato con gli ultimi inserimenti.

Ovviamente ricordatevi di cosa state facendo: un sito web non è una locandina pubblicitaria, così i colori troppo accesi visti su un monitor (che li illumina) potrebbero dare più fastidio rispetto alla stessa versione stampata. In linea di massima i colori pacati vanno bene per il tema, quelli accesi per dei particolari (piccoli) che volete far risaltare.

Infine, non dimentichiamo la cosa più importante: la leggibilità.

Stiamo costruendo (e lo dico per l’ennesima volta) un blog! La caratteristica che lo contraddistingue è proprio la presenza continua di nuovi contenuti. Un conto è dover leggere una sola volta un testo giallo canarino su sfondo bianco, un conto è doverlo fare ogni giorno per ogni nuovo contenuto. Ricordatevi dei vostri lettori (oppure pagategli la visita dall’oculista).

La scelta del colore del testo (e del suo contrasto con lo sfondo), assume dunque un aspetto fondamentale.

Alcune ricerche sperimentali condotte una decina d’anni fa e volte a valutare la leggibilità di un testo in base ad alcune coppie di colori, hanno mostrato come la migliore leggibilità si ottenga col verde su sfondo giallo (ebbene si, sorpresa per tutti). L’elevato contrasto favorisce la lettura. A seguire immediatamente questo risultato c’era il classico “nero su bianco” (eccolo, ve lo aspettavate…). Il bianco su nero e altre combinazioni mostrarono livelli di leggibilità inferiori.

Spettro colori RGBPersonalmente non avevo voglia di inserire uno sfondo verde, però volevo tenere conto di questo aspetto e per questo entra in gioco lo spettro dei colori. E’ infatti consigliabile evitare l’accoppiamento di colori agli estremi dello spettro (ad esempio giallo e viola o rosso e blu) in quanto affaticano la vista. Per questo il testo sul mio blog non è nero (codice RGB #000000 ma un più pacato #444444).

Tale conferma arriva da WordPress stesso: durante lo sviluppo della versione 2.7 una grande attenzione fu posta alla qualità del backend. Fu chiesto il supporto di designer professionisti e… avete notato come il testo, a differenza delle versioni precedenti, non sia in un semplice nero su bianco ma un grigio (codice #333333) su bianco? Tutto torna. 🙂

Ah, un ultimo consiglio: evitate il rosso e il verde per il testo. I daltonici hanno difficoltà a distinguerli e l’accessibilità passa anche da li.

Si continua giovedì…

Emanuele

13 commenti » Scrivi un commento

  1. Il tuo “studio” sulla scelta dei colori per lo sviluppo di un sito, ha reali riscontri, a discapito ci ciò che banalmente si possa pensare. Ovvero che “non centrano una mazza i colori, con la navigabilità di un sito”.

    Infatti secondo me è “fondamentale”.

    Uno degli aspetti del tuo vecchio tema più importanti secondo me, era l’accostamento dei colori, che seppure sarebbe potuto piacere o non piacere, rendeva il tuo blog altamente leggibile. Ecco uno dei motivi per cui mi ci ero abituato e non mi aveva “stufato” mai in questi anni… 😛

    Non era il massimo graficamente parlando, ma l’accostamento dei colori era ottimo secondo me. Trovo abbia un senso anche scegliere il #444 invece del banale nero su uno sfondo bianco…

    Anch’io spesso ho fatto questo accostamento e cioè, modificare l’ampiezza del nero sugli sfondi, rendendo un nero perfetto, un nero con tonalità di grigio, di marrone e così via.

  2. Ottimo intervento, anche io sono molto scarso negli accoppiamenti dei colori, per questo mi affido alla moglie 😉 E poi sono daltonico, quindi certe volte faccio proprio dei gran pasticci. A proposito, quando dici di non usare il rosso ed il verde, è corretto, ma va precisato che di per sé non ci sono problemi. Il problema sorge quando usi questi due colori come unico modo per veicolare informazione (link interni rossi, link esterni verdi, oppure categoria 1 rossa e categoria 2 verde). Come colore del testo, hanno diritto di cittadinanza come tutti gli altri 😉

    • Grazie Nicco, mi fa piacere sentire che il lavoro “perso” per rendere tutto il più gradevole possibile non sia sprecato. Il tema precedente lo porto nel cuore per certi versi. Mi ricorda tante cose, tante giornate, ed è stato “con me” per anni. Adesso però, un po’ di aria nuova non può che far bene. E’ arrivata la primavera e bisognava rinfrescare tutto.
      Riguardo ai colori, sono le piccole attenzioni a fare la differenza.
      Wow, camu, non sapevo fossi daltonico! Chissà che stranezza vedere alcuni colori al contrario (è così, giusto? :-)). Hai fatto bene a precisare la cosa: davo per scontato che il problema non fosse il colore in sé ma l’accostamento dei due. 🙂
      Ciao,
      Emanuele

  3. Ehm, non proprio al contrario 🙂 Diciamo che i colori “sconfinano” nello spettro degli altri: ad esempio i led rossi li vedo verdi, perché mi “mancano” i recettori di quella frequenza di rosso, ed il cervello quindi rimappa il “segnale” usando i recettori del verde 😉 Non voglio essere troppo tecnico, ma più o meno così funziona…

    • Grazie ancora delle precisazioni. Ma al test per la patente di guida fanno problemi ai daltonici? Ricordo che mi fecero vedere dei numeri proprio per controllare il daltonismo…
      Tu il semaforo lo distingui per “posizione” o per colore? 🙂
      Ciao,
      Emanuele

  4. Eh eh in effetti io non ho superato il test con i numeri (me lo fecero anche alla visita militare, e lì scoprii di essere daltonico, non avevo mai realizzato la cosa con certezza, in precedenza) però il semaforo lo so distinguere, perché riesco a vedere quella frequenza di rosso e di verde. Per fortuna, perché qui in America i semafori a volte sono orizzontali, e la posizione non sempre aiuta 😉 Non è vero, il rosso è sempre il primo anche qui… però quei colori li vedo.

    • Ma per il daltonismo esistono statistiche sulle frequenze più diffusamente “non percepite”? Il semaforo viene incontro a queste statistiche? Oppure è giusto una tua fortuna riuscire a distinguerlo?
      Ciao,
      Emanuele

  5. Non sono a conoscenza di statistiche specifiche (anche Google sembra non aiutare molto). Ritengo di essere nella “media” dei daltonici, ma forse sono particolarmente fortunato. Comunque la “gamma” dei daltonismi, come puoi immaginare, è molto ampia…

    • Si infatti e mi chiedevo se esistessero studi a riguardo. Sarebbe bello vedere un’attenzione verso questi piccoli scherzi della natura nella vita comune. Che so… un semaforo visibile con maggiore facilità all’insieme più grande di daltonici e cose così. Certo è che se non ne sai nulla tu che convivi con questa “deviazione” dubito che esista qualcosa.
      Ciao,
      Emanuele

  6. Ora essere chiamato “scherzo della natura” e “deviato” nello stesso commento non è che faccia molto piacere :timid: Scherzi a parte, all’inizio mi ero documentato parecchio, poi ho dimenticato tutto eh eh

    • Argh scusa camu non intendevo dire che tu fossi uno scherzo della natura… però certo certe “diversità” rispetto alla “normalità” sono un po’ dei piccoli scherzi, no? 🙂
      Spero di non esserti sembrato offensivo! 😐
      Ciao,
      Emanuele

  7. Pingback: Costruire un tema: ottimizzazione del codice. - …time is what you make of it…

  8. io devo scrivere un tema su scherzi nn su colori!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 👿 👿 👿 👿 👿 👿 👿 👿 👿 👿 👿 👿 😥 😥 😥 😥 😥 😥 😥 😥 😥 😥 😡 😡 😡 😡 😡 😡 😡 😡 😡 😕 😕 😕 😕 😕 😕 😕 :worry: :worry: :worry: :worry: :worry:

Rispondi a camu Annulla risposta

I campi richiesti sono marcati con *.


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.