Share
Bene, se hai letto i primi cinque articoli di questa serie, ti starai chiedendo: "In che modo tutto questo si riferisce al Mobile Design?" Lo scopo di questa serie introduttiva è di aggiungere alcuni nuovi strumenti e idee al tuo arsenale di design per dispositivi mobili. Questo articolo non è diverso. I colori possono rendere la tua applicazione professionale e bella, ma il rovescio della medaglia può anche far sembrare che la tua app sia stata creata da mio nipote di cinque anni.
Non sono disposto a farti diventare un designer professionista in questo corso, ma conoscere i fondamenti della teoria dei colori può davvero aiutarti a portare le tue app al livello successivo, anche se intendi creare l'intera interfaccia dell'app nel codice.
Quando si tratta di comprendere la teoria del colore, ciò che segue è il modo più semplice in cui potrei scomporlo.
Rosso, Giallo, Blu. Questi sono i tre colori base che non possono essere creati da nessuna combinazione di altri colori. Tutti gli altri colori sono il risultato del missaggio di questi tre.
Verde, Arancione, Viola. Questi sono i colori formati mescolando i colori primari.
Giallo-arancio, rosso-arancio, rosso-viola, blu-viola, blu-verde e giallo-verde. Questi sono i colori formati mescolando un colore primario e uno secondario. In altre parole, riempie il resto della nostra ruota dei colori.
Qualsiasi tre colori che sono affiancati su una ruota di 12 colori, ad esempio giallo-verde, giallo e giallo-arancio. Di solito uno dei tre colori è il colore dominante.
Per quanto riguarda la ruota dei colori, i colori complementari sono due colori uno di fronte all'altro, come rosso e verde. I colori complementari creano il massimo contrasto e la massima stabilità. Fai attenzione quando lavori con colori complementari completamente saturi per le interfacce digitali: possono essere stressanti per gli occhi.
Ecco un altro dei miei piccoli segreti su cui ti farò entrare e anche da dove ho preso la grafica. Questo è un ottimo sito che ti aiuterà a mettere un po 'di armonia nella tua app.
I colori aggiuntivi sono ciò di cui sono fatti il web, la televisione e i dispositivi mobili. In Photoshop creiamo tutti gli screenshot, gli sfondi e la grafica dell'app in formato RGB. RGB sta per Rosso, Verde e Blu, e questi tre sono i colori primari additivi. Quando varie combinazioni di questi tre vengono mescolate insieme, vengono creati tutti i colori rimanenti. In Photoshop, è possibile gestire il colore RGB facendo doppio clic sulla tavolozza dei colori. I due modi più comuni per regolare il colore in Photoshop consiste nel digitare valori numerici RGB direttamente nei campi di testo o semplicemente trascinare il selettore di colori sulla tavolozza dei colori.
Su una scala da 0 a 255, ogni incremento numerico cambia il colore in modo sottile. Giusto per capire come funziona, non c'è nulla di sottile nelle differenze sottostanti!
Un valore RGB di 255, 255, 255 (saturazione completa) è la stessa cosa del bianco, che mostra anche il valore esadecimale di #ffffff.
Al contrario, se tutti i valori RGB sono impostati su zero, il colore generato è nero. Questo mostra il corrispondente valore esadecimale # 000000.
Prendendo un po 'di più, dovresti essere in grado di prevedere quale colore verrà generato quando Rosso è impostato su un valore di 255 e Verde e Blu sono impostati su 0.
Tuttavia, non ho potuto resistere a un'altra schermata. Con un valore di 255 in punto rosso e 0 in verde e blu, otteniamo un colore rosso completamente saturo. Verde e Blu cambiano di conseguenza con gli stessi valori riorganizzati.
Come esempio di ciò che accade quando iniziamo a fare scherzi con più valori diversi, con un valore di 255 in Rosso e Verde, creiamo un colore giallo completamente saturo con il valore esadecimale di # ffff00.
Quindi, cambiando solo i valori di Rosso, Verde o Blu, possiamo creare il colore esatto necessario per il design a portata di mano. Sapere come i colori interagiscono tra loro aiuterà davvero le tue applicazioni e i tuoi siti web a mostrare un po 'più di armonia e coesione.
Quindi ora arriva la parte divertente. Con la teoria generale, come fai a sapere qual è il colore migliore per la tua app? I colori possono avere effetti diversi sulle persone e possono anche contenere diversi significati culturali oltre a ciò che può essere naturalmente intuitivo. Il rosso è noto per aumentare la circolazione sanguigna e stimola il nostro corpo e la mente. Per questi motivi, è quindi spesso associato al sesso e all'amore. L'arancione è noto per aumentare l'energia complessiva. Il blu può essere usato per trattare il dolore ed è noto come stimolante e può spesso attribuire l'insonnia. Tienilo a mente la prossima volta che fissi quella piccola luce blu sul tuo televisore!
Sapere come le persone reagiscono ai colori per natura può essere un importante tid-bit di informazioni da tenere in tasca. L'associazione dei colori e la psicologia del colore vanno di pari passo, ed entrambi valgono una ricerca indipendente per il designer serio.
Http://colorapi.com è un sito che dovresti divertirti e accelerare le decisioni sul design dell'associazione dei colori. Cerca una parola, per esempio, pane, e troverai una tonnellata di opzioni di colore per l'app per prodotti da forno su cui stai lavorando. Godere!
Sono un grande sostenitore dell'accessibilità e il colore gioca un ruolo importante nell'accessibilità generale di entrambi i siti Web e delle applicazioni mobili. Fornendo un contrasto sufficiente tra il colore di sfondo e gli elementi della pagina, farai in modo che tutti possano apprezzare le tue applicazioni nel modo in cui tu intendi goderle.
Per vedere come il tuo sito o la tua applicazione web è rivolta ai non vedenti, consulta http://colorfilter.wickline.org/.
Ecco alcune app che hanno capito bene. Dai un'occhiata al sito web che vedresti quando visiti da un computer desktop e confrontalo con quello dell'applicazione mobile. Entrambi hanno un aspetto, una sensazione e uno schema cromatico coerenti. La continuità tra sito web e app web è importante tanto quanto lo schema dei colori (ma quella discussione è per un'altra volta).
Usando un colore blu, dà al sito un bel sito calmante e dall'aspetto fresco. Non fresco come nel gergo dei surfisti, ma fresco come la temperatura, quindi l'app del termometro. Funziona bene.
Mi piace questo. La cantina produce un bel effetto usando i marroni per dare al sito e all'app una sensazione naturale e rassicurante. Come una vera cantina di vini, magari con pavimenti sporchi e mensole e pareti in legno, la scelta più ovvia era qui.
Come l'app del termometro, la versione mobile di arctic.ru offre un aspetto gradevole con i bianchi, i blu e i grigi. Raffigurare colori freddi in un sito con orsi polari è sempre una buona idea. Di converso, un sito per Las Vegas o Arizona o climi tropicali più caldi avrebbe avuto più successo utilizzando colori caldi come rossi, arance e gialli.
La prossima volta torneremo in Photoshop e impareremo come creare forme e pulsanti di base. Rimanete sintonizzati!
Accentsconagua