Articoli marcati con tag ‘colore’

Flat design e le tendenze colore

Ci siamo già occupati in vari post dell’argomento. Designmodo ci indica ora quali sono i colori da utilizzare. Il flat design usa effetti non tridimensionali ed il look è di per sé semplice, diretto e di facile utilizzo e ciò lo rende sempre più di tendenza sia per il mobile che nel web design.

roybarber
squidee

Il flat design ha a disposizione una varietà di colori, ma i designers per lo più scelgono tonalità forti, brillanti e sature. Per il flat design non vengono però rispettate le regole tradizionali sulla combinazione e la corrispondenza dei colori.

I colori brillanti
Flat-UI-Colors
weather-app
weather-widget
I colori brillanti sono  una caratteristica associata al flat design e funzionano bene su sfondi sia chiari che scuri, creando contrasto e coinvolgendo gli utenti. FlatUIColors.com indica una lista dei colori di maggior tendenza quali i blu, verdi, gialli ed arancioni. Se si desidera associare con più colori brillanti è meglio optare per la semplicità scegliendo tra quelli che hanno analoghe tonalità.

brights colors
Per maggiore impatto lo sfondo dovrebbe essere bianco o nero.
Quelli di tendenza sono i blu, i verdi e i viola.

I colori retrò
Invoisse
my drinks by Jakub Antalík
Bordo Gecko
pattern-sun
I colori retrò, come indicato in un altro post, sono meno saturi, le loro combinazioni sono con l’arancione, giallo e a volte il rosso ed il blu.
retro color
I retrò hanno una maggiore resa quando sono il colore dominante insieme ad immagini o tonalità tenui. Di tendenza sono l’arancio, i toni della pesca o prugna ed il blu scuro.

Il colore monocromatico

Flat List
foundation1
blue-monorning

Molto usato nel mobile e il design app è il colore monocromatico in combinazione con il bianco e nero. Il più utilizzato è il blu, ma anche il nero, il grigio o il rosso per i buttons o i calls to action. Un’altra opzione è quella di creare un effetto monocromatico con lievi variazioni di colore ad esempio dal blu si arriva gradatamente al verde.
coloro monocromatico
Anche in questo caso ci deve essere il contrasto. Di tendenza sono i blu, i grigi ed i verdi.

Infine Designmodo ha messo a disposizione gratuitamente un Flat UI pack su GitHub.

I colori del cioccolato

L’agenzia di Gineva Cazapix ha realizzato Choctone una raccolta di tutte le gradazioni del cioccolato catalogati in una tabella di colore Pantone. Per l’esatta lettura C si intende cioccolato, N per frutta a guscio, H per miele e G per le uve.

Il tono del cioccolato in Choctone

I colori nel Mobile Design

Il mobile design è in costante crescita ed i colori di conseguenza assumono maggiore importanza. Infatti a differenza dei monitor dei pc, i dispositivi mobile hanno un piccolo schermo e chi lo utilizza probabilmente è in movimento e pertanto con una scarsa capacità di concentrazione. Pertanto il colore può aiutare ad ottenere maggiore attenzione. 

Il colore per risaltare
Il colore dovrebbe cercare di guidare l’utente. Ecco due esempi.

In questa pagina si può vedere chiaramente che il contatto telefonico è in arancione e ciò dovrebbe attrarre maggiormente l’attenzione.


Il blu invece indica la necessità di chiamare o di aggiungere.

Il colore per affermare
Per attirare l’attenzione e dichiararsi “Eccomi guardami” in questo caso oltre al colore occorre una buona tipografia.

Il colore per emozionare
Ci siamo già occupati in vari nostri post sull’emozione rese dai colori che possono presentare un significato condizionante se usati in modo strategico.
Foollious ha un aspetto elegante. Lo sfondo bianco combinato con il verde attrae l’attenzione e aggiunge glamour.

Il colore per personalizzare
Quando si utilizzano alcuni elementi simili all’interfaccia dell’utente, quali barra di navigazione, colore, texture o fonts, può sembrare che il design sia stato predefinito direttamente da sistema operativo del utente.  Ecco due esempi.

Infine ecco altri esempi di utilizzo di colore nel design mobile





Via: designmodo.com

La scelta dei colori nel web design

Decidere i colori per un sito web non è un compito facile. Pixel-push indica alcuni modi semplici e pratici per sceglierli. 

Brands ed identità
Se si sta lavorando su un sito web per una società o una nota organizzazione, la scelta dei colori può essere fatta estraendola dalla loro identità di marca.

Ad esempio, per McDonald è immediatamente identificabile dal dorato logo “M” con lo sfondo rosso.


(Fonte: McDonald news room)

L’identità è riconosciuta universalmente, se si utilizzassero altri colori il brans non sarebbe immediatamente riconoscibile.

Possono però esserci delle variazioni di colore mediante il contrasto e la luminosità.

In alcuni casi, questi colori diventano dominanti, come per McDonald Australia.

Ecco alcuni altri esempi:

Coca Cola IndonesiaPepsiStarbucks

Specifico per una Nazione
Un paese è più o meno simile ad una società e la sua l’identificazione è rappresentata dalla bandiera. Un chiaro esempio è la pagina del Presidente degli Stati Uniti, BarackObama.com.

Cultura, persone ed ambiente
Il problema di utilizzare i colori estrapolati dalle bandiere a volte può ingenerare confusione anche perché altre bandiere presentano gli stessi colori. In questo caso si possono analizzare la cultura, le persone e l’ambiente.


(Fonte immagine: jasmine8559 )

Questa immagine è il monte Fuji in Giappone ed è emblematica per la scelta dei colori. Questa scelta può essere agevolata dall’utilizzo di Photocopa.

Questo approccio è utile quando si lavora per un governo o un sito web turistico. Ecco alcuni esempi.

AfricaVisita CoreaTourism Australia

Contenuti e contesto
I siti web devono avere contenuti da mostrare. Ci sono due domande principali da porsi per scegliere i colori più appropriati: Qual è il contenuto? Chi lo legge?

Per esempio, si sta realizzando un sito web che riguarda i bambini. Il cui contenuto è rivolto ai bambini, ma lo leggono le madri. Quindi le parole chiavi che ci guidano a scegliere i colori sono: neonati, madri, femminile, cibo, giocattoli, pannolini, ecc. A questo punto, si possono cercare le fonti ed esempi per queste parole chiave ed estrarre i colori. Ecco i risultati.

I colori sono infantili e femminili, ma la combinazione potrebbe anche essere più forte con l’aggiunta di verde, arancione e viola.

Ed ecco alcuni esempi.

Metariza

La tendenza dei colori retrò

La nuova tendenza è: ciò che è vecchio è nuovo.  I colori retrò sono un esempio di come un look sta rinascendo nel web design anche in gran parte dovuto all’uso dei filtri fotografici nelle applicazioni di telefonia mobile come Instagram.








I colori sono spesso meno saturi ed hanno un aspetto poco brillante.

 

Affinché tutto funzioni bisogna però utilizzare anche un lettering retrò.

Ecco quali sono:

via designmodo.com