Consigli per la scelta della palette colori in un progetto di design


In ogni progetto di design, che sia digitale o offline, non ci sono dettagli che possono essere lasciati al caso. Il Designer, infatti, è responsabile di qualsiasi cosa, dal primo prototipo alla scelta dei font o dei colori utilizzati. Ed è proprio questa la fase in cui spesso si entra in crisi, dato che le combinazioni di colori sono pressoché infinite.

Come comunicare un messaggio, un valore, un brand? Che abbinamenti fare? Meglio restare su colori semplici, sul bianco e nero o esplorare combinazioni insolite?

La scelta di una palette per un progetto non è mai semplice; di seguito, alcuni consigli e concetti da tenere a mente quando ci si ritrova in queste fasi delicate.

Palette Colori

I colori: concetti teorici di base

Prima di tutto, anche se può sembrare banale, è utile conoscere bene la terminologia legata ai colori, così da comprendere alla perfezione tutti i dettagli che ci porteranno alla giusta scelta.

  • Tonalità (Hue) – In poche parole, la colorazione di qualcosa, come “blu” o “rosso”
  • Crominanza (Chrome) – Quanto “puro” è un colore; la mancanza di bianco, nero o grigio ad esso aggiunto
  • Saturazione (Saturation) – Quanto “forte” o “debole” è un colore
  • Valore (Value) – Il livello di luminosità di un colore
  • Tono (Tone) – Creato aggiungendo del grigio a una tonalità pura
  • Sfumatura (Shade) – Creata aggiungendo del nero a una tonalità pura
  • Tinta (Tint) – Creata aggiungendo del nero a una tonalità pura

Terminologia Palette Colori

Quattro tipologie generali di palette colori

  1. Monocromatica – Composta da sfumature e profondità di sfumature di una singola tonalità. Quelle monocromatiche sono le palette più semplici da creare, dato che fanno parte dello stesso colore. Ciò significa che è difficile “sbagliare” (anche se non impossibile), ovvero creare uno schema confusionario o irritante. Tuttavia, spesso questa tipologia di palette potrebbe sembrare noiosa, se non curata con attenzione.
  2. Analoga – Formata da un colore di base e da colori dello stesso lato del disco cromatico. Le palette di questo tipo esprimono molta concretezza e uniformità al design. Inoltre, è difficile che generino fastidio alla vista, dato che non è presente una grande differenziazione di tonalità. Al contrario, il contrasto diventa un valore, limitando le distrazioni dal contenuto.
  3. Complementare – Costruita con colori complementari, o opposti, sul disco cromatico (ad esempio, rosso e verde, blu e arancio, giallo e viola, ecc.). Queste palette sono molto valide per comunicare un senso di equilibrio. Come nel caso delle analoghe, aggiungendo varie tinte o sfumature si può espandere lo schema e creare maggiore armonia. Così, si riuscirà a evitare contrasti fastidiosi che potrebbero creare affaticamento agli occhi, cosa che potrebbe accadere quando due colori opposti sono accostati l’uno vicino all’altro.
  4. Triadica – Tre colori da punti equidistanti sul disco cromatico (ad esempio, rosso, giallo e blu). Il metodo triadico crea una palette molto singolare e curiosa. Per elaborarla ci sarà bisogno di maggiore pianificazione e sperimentazione, dato che include un maggior numero di tonalità che risultano praticamente opposte tra loro.

Palette colori emozioni

Naturalmente, quando si deve scegliere la propria palette bisogna tenere a mente anche i significati che i colori esprimono, soprattutto se si vuole comunicare precisi valori attraverso uno schema colore.

Ecco quindi che si deve considerare che il rosso è il colore dell’energia, del potere e della passione, adatto per attrarre l’attenzione come l’arancione, che esprime gioia, entusiasmo e risulta essere il colore della creatività.

Le tonalità del giallo sono note per trasmettere felicità ed energia, mantenendo anche una connotazione legata alla mente e all’intelletto.

Il verde, invece, è il colore della natura, dell’ambizione, della crescita, della freschezza e della sicurezza, con alcuni valori legati a quelli del blu, che esprime tranquillità, fiducia, ma anche intelligenza, spesso enfatizzata anche dal viola, su cui si deve puntare se si vuole esprimere lusso, ambizione o ricercatezza.

Il bianco e il nero, poi, vanno anch’essi considerati. Il primo esprime pulizia, purezza, perfezione, mentre il secondo è il colore dell’eleganza, del mistero, della potenza.

LEGGI ANCHE: L’importanza dei colori nell’immagine di un brand

Alcuni consigli per scegliere la propria palette

Veniamo alla pratica. Da dove iniziare? Con che criteri effettuare la scelta delle diverse tonalità? Che tipologia di palette scegliere? Di seguito tre pratici consigli da tenere a mente per costruirsi la propria palette colori.

Iniziare dalla scala di grigi. Abbozzando il proprio progetto prima in scala di grigio, ci si concentrerà maggiormente sull’esperienza d’uso di ciò che si sta progettando, e quindi ad esempio sull’usabilità e una navigazione chiara, se si tratta di un sito web e di un app. Non pensate subito, quindi, al colore del bottone della CTA. Concentrarsi sul costruire gli elementi del proprio layout, ottimizzando gli spazi bianchi e altro ancora, ci aiuterà a organizzare una chiara e pulita gerarchia di elementi, generando la migliore user experience per i propri utenti e il miglior punto di partenza su cui successivamente porre i colori.

Usare la regola 60-30-10. Per ottenere una palette equilibrata un piccolo trucchetto è quello di usare i colori in una proporzione 60% + 30% + 10%. È una vecchia regola dell’ambito dell’interior design, ma è in grado di aiutare molto nella scelta della palette, dato che permette all’occhio dell’utente di muoversi comodamente da un punto focale a quello successivo. Inoltre, è molto semplice da utilizzare: il 60% dovrebbe essere la tonalità dominante, il 30% il colore secondario e il 10% la colorazione utilizzata per porre in risalto alcuni elementi come testi o altro. Se la palette prevista ha più di tre colori (è comunque consigliabile averne al massimo cinque), la regola può valere comunque; mantenere gli elementi in equilibrio conferirà una migliore esperienza dell’utente.

Palette Colori 60-30-10 rule

Le migliori combinazioni colore vengono dalla natura. Guardare all’ambiente che ci circonda ci consente di ammirare palette di colori in continuo cambiamento. L’alba, il tramonto, l’atmosfera della spiaggia o l’aria di una foresta sono tutti elementi con colorazioni differenti, anche semplicemente considerandoli in momenti differenti della giornata. Il consiglio è quello di farsi ispirare, magari aiutandosi con app come Adobe Capture, che tra le sue funzioni permette di creare temi colore a partire da una singola foto.

LEGGI ANCHE: Pantone espande la propria collezione con 203 nuovi colori

Palette Colori Natura

Gli strumenti utili online

Per concludere, qualche software online open source da poter utilizzare per creare la propria palette:

  • Color Hunt è una vera e propria ispirazione: una piattaforma completamente gratuita in grado di farci “scrollare” tra un’infinita scelta di palette possibili.
  • Coolors.co è uno strumento molto veloce in grado di aiutare l’utente a creare il proprio tema colore con un generatore online completamente gratuito, possibile da integrare anche con i software Adobe.
  • Paletton, invece, è una specie di fusione dei due precedenti software. Consente di esplorare tra le palette e creare la propria, ma non si è limitati solo a cinque tonalità come in Coolors.co.





Source link

4 consigli per realizzare app e siti accessibili


Questo articolo è comparso su Think With Google. È un guest post di Channing Ritter, Design Consultat di Primer, tradotto e adattato da Federico Oggioni.

Studi recenti dimostrano che quasi il 15% della popolazione mondiale, circa 1 miliardo di persone in tutto il mondo, è affetto da un qualche tipo di disabilità.

Questo significa che se non stai creando esperienze e prodotti accessibili, stai perdendo un’enorme fetta di mercato, oltre che “discriminando” parte della popolazione. Ed è per questo che l’accessibilità è una tra le prime cose a cui ho pensato quando Google Primer mi ha consultato per ridisegnare la loro app e il sito web.

Inizialmente ho avuto qualche problema, esistono numerosi tipi diversi di disabilità. Ma, dopo una ricerca più approfondita, ho scoperto che le disabilità più comuni si dividono in quattro categorie: visive, motorie, uditive e cognitive. Quindi, ho creato e valutato l’app di Primer avendo bene in mente ognuna delle quattro categorie.

Ho passato molti mesi “scavando” tra le best practice già realizzate e studiando le accessibility guidelines. In questo lungo processo, abbiamo imparato queste quattro lezioni fondamentali.

1. Creare contenuti percettibili

I siti contengono soprattutto contenuti di valore, come il prezzo, i dettagli, le istruzioni e così via. Ma il contenuto è fondamentale solo se è riconoscibile e leggibile da tutti.

Il contrasto tra i colori ha un impatto molto forte sulla percezione del contenuto. Per Primer abbiamo aumentato il contrasto tra i colori del background e del foreground e questo ha permesso di avere un testo molto più leggibile. Un consiglio: noi abbiamo usate il Material Design Color Tool.

Comunque, non basta il contrasto tra i colori per rendere un sito più leggibile. I contenuti più importanti devono essere percettibili in diversi modi. Ad esempio, nel paragrafo precedente il testo del link è evidenziato di un colore diverso, ma è anche sottolineato. In questo modo, una persona che non distingue i colori, capirà che c’è un contenuto diverso grazie alla sottolineatura.

ninja_google-2

2. Offrire diversi modi per la navigazione

Persone diverse interagiranno diversamente con l’app o il sito. Ad esempio, persone con difficoltà motorie potrebbero utilizzare solo alcuni comandi della tastiera per navigare, come la “barra” o il tasto “invio”. Per questo motivo, abbiamo creato dei mock-up dove era possibile navigare sull’app utilizzando solo alcuni tasti della keyboard, facendo in modo di seguire un percorso tra le pagine e i contenuti del sito che avesse un senso logico per il cliente.

Ovviamente, non tutti i siti funzionano allo stesso modo, ma resta fondamentale considerare che le persone che navigano il vostro sito abbiano altre possibilità: dovrete fornire le informazioni necessarie per la miglior user experience, nel modo più veloce e semplice possibile.

ninja_google-3

3. Assicurarsi che l’app e il sito interagiscano bene con il resto dell’ecosistema Internet

Per assicurare al vostro sito o app la migliore accessibilità per tutti, controllate che funzionino su tutti i browser e che sia l’app che il sito web supportino tutte le tipologie di assistive technologies, come ad esempio gli screen readers.

Un suggerimento molto utile è quello di inserire in tutte le immagini un “alt text”. Questa tecnica, che aggiunge un testo descrittivo all’immagine nel backend del sito, permette agli screen readers di leggere meglio l’immagine e descriverla alle persone con qualche difficoltà visiva.

Ricordate anche di “etichettare” tutto ciò che c’è di interattivo sul vostro sito. Ad esempio, se il vostro sito ha un meno di navigazione, etichettatelo per gli screen readers con “mostra/nascondi il menù di navigazione”.

Importante: quando “etichettate” siate brevi, concisi e utilizzate molti verbi. Chi naviga sul vostro sito usando strumenti di navigazione assistita non gradirà ascoltare lunghe descrizioni, ma brevi messaggi con il focus ben chiaro sull’azione da fare.

ninja_google-4

LEGGI ANCHE: Come si comporta chi acquista da mobile?

4. Test, test, test

Durante la fase di realizzazione del vostro sito o app, avete a disposizione numerosi tool per per testare la user experience e determinare come migliorare l’accessibilità.

Esistono delle web extension che si possono utilizzare per avere dei report dettagliati. Per esempio,  Google Chrome’s Lighthouse può garantire fino a 30 test sull’accessibilità. Se il test non viene superato, il sistema riporta direttamente a un documento che dà dei suggerimenti su come risolvere il problema di accessibilità. Per testare su mobile, suggeriamo l’app Accessibility Scanner.

Ovviamente questi strumenti non riusciranno a controllare ogni cosa, quindi può essere un bene far testare il proprio sito o app a delle persone reali.

Access

Importante: non aspettate fino alla fine del processo creativo per fare i vostri test. Dovreste farli ogni volta che realizzate un nuovo step, in questo modo potrete salvarvi dal dover rifare tutto daccapo una volta terminato il lavoro.

Contenuti percepibili, navigazione, chiarezza, test e un design ottimizzato per tutti i browser e tutti gli assistive tool: queste sono le linee guida essenziali per creare una User Experience più accessibile che vi permetterà di coinvolgere più pubblico e aumentare i vostri tassi di conversione.



Source link

show