Archivi tag: web design

Internet facile: usare il giallo nel web design

Il giallo è per persone felici e per codardi.

Per lo più caldo e accogliente, il giallo di solito funziona meglio come compagno di altri colori.

Banana, cadmio giallo, chartreuse, chiffon, crema, oro, verga d’oro, kaki, limone, giallo dolce, zafferano, topazio e giallo ocra sono tutte sfumature di giallo.

Natura e cultura.

Il giallo è il sole È un colore caldo che, come il rosso, ha un simbolismo conflittuale
Da un lato, denota felicità e gioia, ma d’altra parte il giallo è il colore della vigliaccheria e dell’inganno. Ricorda però anche la malattia, la bandiera gialla sugli antichi velieri segnalava epidemia a bordo

Il giallo è uno dei colori energici e caldi. A causa dell’elevata visibilità del giallo brillante, viene spesso utilizzato per i segnali di pericolo e per segnalare alcuni veicoli di emergenza. Il giallo è allegro.

L’uso di segnali di pericolo crea un’associazione tra giallo e pericolo, sebbene non così forte come il rosso.

Se qualcuno è “giallo”, è un vigliacco, così il giallo può avere un significato negativo in alcune culture.

Il giallo è per il lutto in Egitto, e gli attori nel Medioevo indossavano il giallo per significare i morti. Eppure il giallo rappresenta anche il coraggio in Giappone, i mercanti in India e la pace.

Usare il giallo nel web design

Sebbene possa funzionare come colore primario, il giallo spesso funziona meglio se abbinato come accento ad altri colori. Il giallo è un colore vivace. Usa il giallo brillante per creare eccitazione quando il rosso o l’arancione possono essere troppo forti o troppo scuri.

Usare il giallo per suggerire freschezza e fruttato di agrumi. I gialli dorati possono sostituire l’oro.

Il giallo si accosta bene ad altri colori:

  • Usa il giallo per ravvivare una raffinata palette di blu e grigio
  • Usa il giallo limone con l’arancio per realizzare un tema salutare, estivo, agli agrumi
  • I gialli molto pallidi possono funzionare come neutri insieme a colori più scuri o più ricchi
  • Il giallo e il blu sono una combinazione di contrasto e strabilianti
  • Mescola il giallo con il grigio neutro e il nero per un look high-tech
  • Prova un mix caldo ed eccitante di rosso e giallo
  • Per una tavolozza terrosa, soprattutto per l’autunno, mescola giallo, verde oliva e marrone
  • Mentre gialli e verdi chiari o chiari possono far parte di una tavolozza di colori naturale e fruttata, fai attenzione a non usare colori troppo vicini nel valore o appariranno sbiaditi

Internet facile: usare il rosso nel web design

Cosa hanno in comune la rabbia, i biglietti di S. Valentino, le cravatte e le spie? il rosso.
Rosso sangue, arrossire, mattone, bordeaux, carminio, rosso cinese, cinabro, rosso cremisi, rosso fuoco, fiamma, rosso indiano, più folle, marrone rossiccio, rosa, rosso, rosso rubino, ruggine, rosso scarlatto, pomodoro, rosso veneziano e vermiglio tutti sinonimi o rappresentano varie sfumature del colore rosso.

leggi anche: Il simbolismo dei colori nella grafica per il web

Natura, cultura e simbolismo del rosso

Il rosso è caldo È un colore forte che evoca una serie di emozioni apparentemente contrastanti, dall’amore appassionato alla violenza e alla guerra. Il rosso è Cupido e il diavolo.

E’ stimolante: il rosso è il più caldo dei colori caldi. Gli studi dimostrano che il rosso può avere un effetto fisico, aumentando il tasso di respirazione e aumentando la pressione sanguigna.

L’espressione “vedere il rosso” indica rabbia e può derivare non solo dallo stimolo del colore ma dal rossore naturale delle guance, una reazione fisica alla rabbia, aumento della pressione sanguigna o sforzo fisico.

Il rosso rappresenta il potere, quindi la cravatta rossa per gli uomini d’affari e il tappeto rosso per celebrità e VIP.

Luci rosse lampeggianti indicano pericolo o emergenza. Segnali di stop e luci di stop sono rossi per attirare l’attenzione dei conducenti e avvisarli dei pericoli dell’incrocio.

In alcune culture, il rosso denota purezza, gioia e celebrazione.

Il rosso è il colore della felicità e della prosperità in Cina, dove può essere usato per attirare la buona fortuna.

Il rosso è spesso il colore indossato dalle spose in Oriente mentre è il colore del lutto in Sud Africa. In Russia i bolscevichi hanno usato una bandiera rossa quando hanno rovesciato lo Zar, così il rosso oggi è associato al comunismo.

Molte bandiere nazionali usano il rosso. Il rosso rubino è il tradizionale regalo del 40 ° anniversario di matrimonio.

Utilizzare le tonalità di rosso nel web design

Quando si progetta un sito Web è buna norma utilizzare il colore rosso per attirare l’attenzione e convincere le persone ad agire. Un po ‘di rosso fa molto effetto. Questo colore forte va usato sempre in piccole dosi. Usa il rosso per suggerire la velocità combinata con sicurezza e forse anche un pizzico di pericolo.

Più tonalità di rosso e persino rosa o arancione possono combinarsi per una tavolozza allegra. Il rosso si abbina bene ad altri colori:

Simbolismi negativi del rosso

Vedere rosso: rabbia Red aringhe: qualcosa che inganna o distrae l’attenzione dalla verità In rosso: essere scoperti in banca o perdere denaro Bandiera rossa: indica pericolo, avvertimento o una battaglia imminente.

Anche se normalmente non è considerato un accoppiamento ideale, in combinazione con il verde, il rosso è un colore natalizio, un caposaldo della stagione gioiosa.
I blu freddi forniscono contrasto e attenuano il calore del rosso.
Rosa chiaro e giallo stanno armonizzando i colori che possono funzionare bene con il rosso se non troppo vicino come il rosso scuro con un giallo pallido o dorato.
Fai attenzione a usare il viola con il rosso. Può essere una combinazione elegante ma esagerando potrebbe essere opprimente.
Aggiungi un tocco di rosso per una combinazione di rosa e grigio morbida ma sofisticata.

Internet facile: usare il viola nel web design

Il Simbolsimo dei colori, il viola nella progettazione dell’interfaccia grafica

Il viola è caldo e freddo, adatto a re, sacerdoti e signore.

leggi anche: Il simbolismo dei colori nella grafica per il web

Questo intrigante colore è associato sia alla nobiltà che alla spiritualità.

Pantone ha selezionato il colore Blue Iris (Pantone 18-3943) un viola-blu come il colore dell’anno 2008, dicendoci: “Combinando gli aspetti stabili e calmanti del blu con le qualità mistiche e spirituali del viola, Blue Iris soddisfa il bisogno per rassicurazione in un mondo complesso, aggiungendo un pizzico di mistero ed eccitazione. ” I membri della famiglia di colori viola sono stati il ​​Pantone Color of the Year più volte, tra cui Radiant Orchid e Marsala 2014 nel 2015.

I significati del colore viola

Il viola ha un posto speciale, quasi sacro in natura: lavanda, orchidea, lilla e fiori viola sono delicati . Poiché il colore è derivato da un mix tra colori  caldo e forte, ha proprietà sia calde che fredde. Una stanza viola può stimolare l’immaginazione di un bambino o la creatività di un artista.

Esagerando però, come per il blu, può causare malumore. Il viola è il colore del lutto per le vedove in Thailandia, il viola era il colore preferito della Cleopatra egiziana. È stato tradizionalmente associato ai reali in molte culture. Le vesti viola erano indossate da reali e persone autorevoli o di alto rango. Il Purple Heart è una decorazione militare statunitense riservata ai soldati feriti in battaglia.

Usare il viola nella progettazione di interfacce grafiche

La scelta del viola per il Web e i progetti di stampa aggiunge una serie di significati ai progetti. Un viola melanzana profondo combinato con un’abbronzatura neutra o beige è una combinazione di colori terrosi e conservatori con un tocco di mistero che offre il viola.

Il verde e il viola possono essere una combinazione sorprendente in tonalità gioiello profonde o luminose o utilizzare tonalità più chiare per un aspetto allegro, primaverile. La combinazione di viola e rosa ha un fascino femminile. I viola chiari o intensi suggeriscono la ricchezza, mentre i viola chiari sono più romantici, delicati e femminili. Usa viola più rosso per una combinazione di colori caldi o viola più blu per uno schema interessante.

Internet facile: usare il blu nel web design

Il Simbolsimo dei colori, il blu nella progettazione dell’interfaccia grafica

Da sempre colore favorito da uomini ed imprese, il blu è amichevole, autorevole, pacifico e degno di fiducia.

Questi termini sono sinonimi o rappresentano le tonalità del blu: azzurro, azzurro, berillo, ceruleo, cobalto, bluette, blu aziendale, ciano, blu indaco, blu notte, blu marino, blu di prussia, blu uovo di robin, reale, zaffiro, cielo blu, ardesia e acciaio blu.

leggi anche: Il simbolismo dei colori nella grafica per il web

Collegamenti alla natura

Il blu è calmante. Può essere forte e costante, leggero e amichevole. A quasi tutti piace l’ombra del colore blu. Nel 1999, Pantone ha nominato il colore celeste ceruleo come il colore del nuovo millennio.

Pantone ha selezionato l’iride blu come il colore dell’anno 2008 dicendo: “Combinando gli aspetti stabili e calmanti del blu con le qualità mistiche e spirituali del viola, Blue Iris soddisfa il bisogno di rassicurazione in un mondo complesso, aggiungendo un suggerimento di mistero ed eccitazione.

” Un colore naturale, dal blu del cielo, è un colore universale. Il suo effetto fresco e calmante fa passare il tempo rapidamente e può farti addormentare. È un buon colore per le camere da letto. Tuttavia, troppo blu può smorzare gli spiriti.

Cultura e simbolismo

In molte culture diverse, il blu è significativo nelle credenze religiose, porta pace o si ritiene che tenga lontani gli spiriti maligni. Il blu trasmette importanza e sicurezza senza essere cupo o sinistro, da qui il potere del mondo delle multinazionali e le uniformi di molti agenti di polizia.

A lungo considerato un colore aziendale, il blu, in particolare le ombre medie e scure, è associato all’intelligenza, alla stabilità, all’unità e al conservatorismo. Proprio come “vedere il rosso” allude alle forti emozioni invocate dal colore rosso, “sentirsi blu” o ottenere “il blues” rappresenta gli estremi dei sentimenti calmi associati a questo colore: tristezza o depressione e mancanza di emozioni forti.

Il blu scuro a volte è considerato fermo o pesante. In Iran, il blu è il colore del lutto, mentre in Occidente la tradizione nuziale “qualcosa di blu” rappresenta l’amore.

I significati negativi connessi alle sfumature di blu includono: Malattie e condizioni tra cui osteoporosi, osteogenesi imperfetta, malattia di Huntington, sindrome da stanchezza cronica, disturbi alimentari, ipertensione polmonare, diritti delle vittime di crimini, violenza domestica, prevenzione degli abusi sui minori.

Uso dele tonalità di blu nel web design

Quando si disegna con il blu, la combinazione di tonalità chiare e scure del blu crea un look conservativo ma sofisticato con un sottile contrasto. Anche se è un colore valido per tutto l’anno, il blu pastello, in particolare accanto ai rosa e ai gialli pallidi, suggerisce la primavera, mentre il blu intenso è un colore più freddo e invernale se associato con il bianco.

Una profonda tonalità reale, indaco o azzurro trasmette ricchezza e forse anche un tocco di superiorità nei disegni, mentre la marina quasi nera è un po ‘più calda di un blues più leggero.

Palette suggerite

Combina un blu chiaro e scuro per trasmettere fiducia e sincerità. Combina il blu con il verde per una tavolozza naturale acquosa, oppure usa il blu e il grigio insieme per un’eleganza sobria.

Internet facile: usare il verde nel web design

Simbolsimo dei colori, il verde nella progettazione dell’interfaccia grafica

Quante parole sono sinonimi o rappresentano varie sfumature del colore verde:

mela, acquamarina, berillo, chartreuse, smeraldo, abete, foresta, verde erba, giada, verde kelly, verde prato, verde foglia, lime, menta, muschio , oliva, grigio oliva, verde pisello, pino, salvia, linfa, verde mare, seafoam, verde primaverile, viridian.

Il verde è vita:

leggi anche: Il simbolismo dei colori nella grafica per il web
Abbondante in natura, il verde significa crescita, rinnovamento, salute e ambiente. Il rovescio della medaglia, il verde è la gelosia o l’invidia (mostro dagli occhi verdi) e l’inesperienza.

È un colore riposante con alcuni degli stessi attributi calmanti del blu. Come il blu, il tempo scorre più velocemente in un ambiente verde, oppure scorrendo una pagina con dominanti verdi.

Il verde è fortemente associato con l’Irlanda, l’irlandese e il giorno di San Patrizio. Il verde ha anche strette associazioni con l’Islam.

Il verde in natura:

Il colore ricorda la primavera. È anche il colore per “andare”quando si è fermi ad un semaforo. Al di fuori dei semafori, abbinato al rosso, è un colore natalizio.

I significati non positivi che vengono richiamati da sfumature di verde includono:

Varie malattie e condizioni quali: Tissue e donazione di organi o trapianti, depressione negli adulti o nei bambini, disturbo bipolare, salute mentale, malattia mentale, lesioni agli occhi.

Usando il verde:

Con un effetto sia di riscaldamento che di raffreddamento, il colore verde denota equilibrio, armonia e stabilità.

Usa diverse sfumature di verde per una fresca sensazione di primavera.
L’oliva, anche chiamata oliva grigia, è un verde estivo non così grigio che può avere sfumature militari per alcune persone.

Usando il verde con altri colori:

Il verde con il blu produce echi della natura – acqua e foresta e può denotare nuovi inizi e crescita.
Il verde con marrone, marrone chiaro o beige dice organico o riciclato e può essere una buona combinazione di colori per l’imballaggio di questo tipo di prodotti.

Combinazioni tricolore di verde con giallo e nero o bianco sono colori sportivi e all’aria aperta. Viola con verde può essere ad alto contrasto, vivace.

Tavolozze suggerite:

Lime green con arancio e giallo è una tavolozza fresca e fruttata.

cosa è Pixlr: il fotoritocco online per tutti

Pixlr è una web app free che consente operazioni di fotoritocco

I programmi di grafica si suddividono in tre grandi famiglie. Abbiamo programmi utilizzati per il fotoritocco, per la grafica vettoriale e infine per l’impaginazione. possiamo dire che questa organizzazione rispecchia l’organizzazione che Adobe ha dato alla suite Cs, che utilizza Photoshop per il fotoritocco, Illustrator per la grafica vettoriale ed infine Indesign per l’impaginazione di testi.

Sono tre compiti differenti ma complementari per la realizzazione di quasi tutti i progetti grafici, infatti la grande dote della suite di Adobe consiste proprio nella possibilità di gestire con Indesign durante il processo di impaginazione documenti prodotti con Photoshop e Illustrator, avendo la possibilità di mantenere i documenti aggiornati.

Non sempre si ha la possibilità di avere la Suite CS di Adobe installata sul proprio computer e magari aggiornata all’ultima versione.

Servono comunque programmi in grado di gestire il lavoro di fotoritocco e grafica vettoriale, che comunque esistono anche in versione free ed utilizzabili direttamente online, cioè senza bisogno di dovreli scaricare ed installare sul proprio computer.

I programmi certamente migliori per svolgere questi compiti sono: Pixlr per il fotoritocco e Gravit per la grafica vettoriale.

In questa breve intoduzione ci occupiamo di fotoritocco e quindi vedremo come si utilizza Pixlr, se vi interessa approfondire  potete trovare su Amazon una guida alle funzioni e strumenti di Pixlr realizzata da me. Prossimamente cercherò di realizzare anche un piccolo manuale per l’uso di Gravit.

Se vogliamo parlare di programmi destinati al fotoritocco cerchiamo anzitutto di capire esattamente in cosa consiste questo tipo di produzione di elaborati grafici.

Per fotoritocco si intende la modifica di immagini generalmente originali e acquisite da fonti esterne. Raramente si producono immagini ex novo mentre comunque le immagini acquisite possono subire modifiche anche molto consistenti, come per esempio in lavori che richiedono operazioni di scontorno e fotomontaggio.

Da subito avverto che la grande differenza tra Pixlr e programmi di fotoritocco tradizionali come Photoshop e Gimp (altro software open source ma non online che raccomando) è l’assenza, almeno per ora, di strumenti validi per lo scontorno.

Le immagini per il fotoritocco sono composte da pixel, per intenderci assomigliano a mosaici realizzati con tessere molto piccole, all’aumentare del numero di tessere per unità di spazio aumentano qualità dell’immagine e anche dimensioni della stessa, per dimensioni intendo anche indicare il peso che velocemente tenda raggiungere livelli problematici.

Comunque parlando di immagini da utilizzare per la realizzazione di interfacce grafiche, quindi da fruire tramite schermo di PC, smartphone o tablet, le dimensioni da impostare non superano i
DPI (dot per inch) in quanto la maggior parte degli schermi non supporta immagini di qualità migliore.

Pixlr converte direttamente le immagini in modo che siano di dimensioni adeguate mentre su Photoshop e Gimp sta a voi impostare i parametri corretti.

Quindi usando questi due programmi occorre impostare anche la scala colore, che per i file multimediali o destinati al web è RGB (red,green,blue).

Per finire questa prima parte  informo gli utenti di G Suite  del fatto che usando Drive di Google è possibile aprire un nuovo documento direttamente nel formato .sfp nativo di Pixlr e salvare il vostro lavoro in cloud, in modo da poterlo riprendere da qualsiasi computer collegato online.
Non male direi.

(di seguito indico due codici promozionali per utilizzare la versione pro di G Suite: CCUGC73WGNGMNYD, RD4TL7DELYUXTHJ).

Il colore nel web design, gli abbinamenti colore-significato

Per la categoria internet facile: un articolo che spiega le nozioni di base del colore nella progettazione della interfaccia utente.

La ruota dei colori è solo un modello per rappresentare le tonalità di sfumature di colore disposte attorno a un cerchio.

Mostra le relazioni tra i colori primari, secondari e intermedi / terziari e aiuta a dimostrare la temperatura del colore. I designer di interfacce grafiche utilizzani  tonalità di colori esatte attraverso l’uso di codici esadecimali.

Come funziona la ruota dei colori

Molte ruote dei colori mostrano 12 colori.

Questa ruota colori, per esempio, può essere letta come segue: Tre colori primari: rosso, giallo, blu
Tre colori secondari: arancione, verde, violento
Sei colori terziari: rosso-arancio , Giallo-Arancio, Giallo-Verde, Blu-Verde, Blu-Viola, Rosso-Viola, che si formano mescolando un primario con un secondario. Alcune ruote colore mostrano punti interni e cerchi, che rappresentano miscele di colori.

Temperatura del colore

I colori sul lato rosso della ruota sono caldi; il lato verde della ruota ha i colori più freddi. Queste designazioni della temperatura del colore sono assolute.

I rapporti di temperatura del colore sono relativi, il che significa che ogni colore sul lato caldo della ruota può essere definito “freddo” e che i colori sul lato di freddo della ruota possono essere definiti caldi a seconda della relazione con il colore adiacente. I colori della stessa tonalità, ad esempio il rosso tendente al viola, possono anche essere più caldi o più freddi di altri.

Le temperature del colore ci influenzano sia psicologicamente che percettivamente aiutandoci a determinare come gli oggetti appaiono posizionati.

Colori caldi e Colori freddi

I colori caldi includono rosso, arancione e giallo e le variazioni di questi tre colori. Rosso e giallo sono entrambi colori primari, con l’arancione che cade nel mezzo. I colori caldi appaiono più vicini all’osservatore.

I colori freddi includono il verde, il blu e il viola e le variazioni di questi tre colori. Il blu è l’unico colore primario all’interno dello spettro freddo. I verdi assumono alcuni degli attributi del giallo e il viola assume alcuni degli attributi del rosso. Sono spesso più sottomessi dei colori caldi. I colori freddi sembrano più lontani dall’osservatore.

Neutrali I colori neutri includono nero, bianco, grigio, abbronza e marrone. Vengono comunemente combinati con colori accesi più luminosi, ma possono anche essere usati da soli nei disegni. I significati e le impressioni dei colori neutri dipendono più dai colori che li circondano.

I colori esadecimali per l’ interfaccia grafica

Quando si realizzano pagine per siti web oppure applicazioni e che comunque dovranno essere vist tramite smartphone oppure computers i web designer utilizzano una gamma di colori detta esadecimale.

Puoi vedere tutti principali colori esadecimali con codice e relativa descrizione qui

Ogni tonalità di colore viene definita da una combinazione dei valori delle tre componenti di base: rosso, verde e blu (red, green, blue). In pratica, ogni colore è identificato da tre valori (numeri):
– Il primo indica la quantità di rosso presente nel colore;
– Il secondo la quantità di verde;
– Il terzo la quantità di blu.

Ciascuno di questi tre valori può variare da 0 (minimo: componente assente) a 255 (massimo: componente dominante). Ad esempio il nero corrisponde ai valori RGB 0,0,0, ed il bianco corrisponde ai valori RGB 255, 255, 255.

Una parte dei colori esadecimali vengono detti colori web safe in quanto vengono riprodotti fedelmente dalla
maggior parte degli schermi, anche quelli dotati di schede grafiche non aggiornate.

Quindi se vogliamo essere sicuri che i nostri lavori vengano visti perfettamente da qualsiasi utente (anche quelli che hanno computer con settaggi video a 8 bit, ovvero che visualizzano solo 256 colori), dobbiamo utilizzare per i nostri lavori solo i 216 colori detti appunto colori “web safe”

I principali colori esadecimali

Se non sapete cosa sono i colori esadecimali ve lo diciamo noi.

Si tratta di una gamma ben definita di colori rappresentati ognuno da un codice composto da 6 tra lettere e numerie nel dettaglio sono:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, dove zero è pari a 0 e F è pari a a 15.

La base esadecimale è usata nella maggior parte dei programmi di grafica per identificare inequivocabilmente un colore ben specifico. In particolare il codice esadecimale viene riconosciuto nel linguaggio html, ed utilizzato nei fogli stile (css).

Vi consigliamo quindi di utilizzare il codice esadecimale esattamente come usate il codice Pantone per definire i colori dei vostri progetti di corporate image.

Per quanto riguarda il linguaggio HTML i colori sono indicati con un codice a 6 caratteri preceduto dal simbolo # che indica appunto un colore.

Prendiamo in esame il colore bianco, in base esadecimale è indicato come #FFFFFF
è composto da:

FF = 255 Rosso
FF = 255 Verde
FF = 255 Blu

255 parti di rosso, 255 parti di verde e 255 parti blu

Se si utilizza un editor ad oggetti o wysiwyg (What You See Is What You Get) come Dreamweaver o Frontpage le conversioni relative ai colori saranno eseguiti automaticamente in base al colore selezionato.Comunque , e ne parleremo, non fatevi ingannare da queste allettanti promesse, usate un editor testuale per scrivere il vostro codice.

Nonostante il numero massimo di colori ottenibile è pari a 16.777.216 (256*256*256) possiamo usare solo 216 colori che vengono indicati come i colori sicuri (web safe)ossia colori che verranno visualizzati allo stesso modo da tutti i browser disponibili, o comunque anche da computer con schede grafiche non proprio di ultima generazione.

In pratica, come vuole la legge di Murphy per il web design, il computer più obsoleto dell’azienda generalmente è quello del capo. Quindi per andare sul sicuro insito nel consigliarvi l’uso dei colori web safe.

Di seguito i principali colori esadecimali:

FFFFFF

bianco

FFC0B6

sabbia rosata

FF8080

salmone

FF4040

salmone scuro

FF1F35

anguria

E01F25

porpora

A00000

cremisi scuro

600000

mogano

FFEFCE

vaniglia

FFE1B0

sabbia

FFC281

crema o pelle

FF9F71

pesca chiaro

FF8141

pesca

FF421E

pesca scuro

FF1F10

mandarino

FF0000

rosso

E10000

rosso scuro

C21212

mattone

A11F12

terracotta

622100

cioccolata

FFFF80

giallo chiaro

FFFF35

giallo limone

FFFF00

giallo

FFE118

senape

FFBF18

oro

FF8100

arancio

E26200

arancio scuro

A13F00

nocciola

824200

marrone scuro

D2B06A

kaki

FFFFD0

avorio

E0E074

avocado

BFBF00

certosa

808000

verde oliva

424200

marrone avana

101000

avocado scuro

82823F

grigio oliva

E0FFBF

verde pallido

C2FF91

sedano

80FF80

verde menta

41FF32

verde foglia

00E100

verde chiaro

00C200

verde

008000

verde scuro

006000

smeraldo

002100

verde pavone

82C168

verde bamb�

3F621F

giada

E0FFDF

nebbia marina

00FFB2

verde acqua

00E1AD

caraibi

009F82

verde mare

00603C

malachite

004023

sempreverde

00201F

pino scuro

81C097

grigio verde

00FFFF

turchese

00323F

blu baltico

002041

blu metallico

82E0FF

zaffiro

00A0E0

ceruleo

0080C0

ceruleo scuro

004080

blu ardesia

002F80

blu acciaio

002060

blu denim

001040

blu aviazione

71B2CF

grigio blu

E0F1FF

blu artico

82C0FF

fiordaliso

5291EF

azzurro

2181FF

wedgwood

0080FF

blu manganese

0062E1

blu medio

0041C2

mirtillo

001FE2

blu marina

0000FF

blu

0020C2

blu cobalto

0000E0

indaco

0000C2

blu oltremare

E0E0FF

lilla nebbia

8080FF

lavanda

4141FF

lilla scuro

4040C2

blu violetto

9F9FE0

grigio lilla

E8E0FF

rosa azzurro

A160FF

rosa di parma

8242FF

blu violaceo

4000A2

ametista

2200A1

uva

000080

blu notte

00004F

uva americana

F1E0FF

rugiada

E1BFFF

prugna chiaro

E081FF

viola polvere

C200FF

fucsia

400080

prugna

1F007F

prugna scuro

E29FDE

malva chiaro

603181

malva

FFC1FD

rosa pallido

FF7FFF

rosa chiaro

FF22FF

rosa confetto

FF00FF

rosa carico

E000E0

magenta

A1009F

magenta scuro

800080

rosso prugna

200042

mora

602162

grigio prugna

FFE0F5

rosa perlato

FF9FCF

fiori di melo

FF82C2

rosa pallido

FF60AF

rosa ciliegia

FF40A0

rosa

FF0080

rosa scuro

C0007F

vinaccia

620042

ribes nero

400040

bordeaux

FFC0CE

rosa quarzo

FF6088

rosa corallo

FF4070

rosso corallo

FF2259

fragola

C20041

ciliegia

800000

scarlatto

410012

rubino scuro

F18FBC

grigio rosa

FFFFFF

bianco

F7F7F7

grigio 5%

EFEFEF

grigio 10%

E1E1E1

grigio 15%

D2D2D2

grigio 20%

C0C0C0

grigio 25%

B2B2B2

grigio 30%

A2A2A2

grigio 35%

8F8F8F

grigio 40%

808080

grigio 50%

5F5F5F

grigio 60%

4F4F4F

grigio 70%

404040

grigio 75%

2F2F2F

grigio 80%

000000

nero

 

Il simbolismo dei colori nella progettazione delle interfacce utente

Comincia da questo post una serie di articoli inclusi nella categoria internet facile destinata a chi inizia a progettare interfacce grafiche.

Il simbolismo è uno strumento potente da usare nella progettazione della interfaccai grafica: utilizza il colore per richiamare alla nostra mente sensazioni, idee, concetti o sentimenti tradizionali, culturali o religiosi o per evocare reazioni fisiche.

Nella progettazione grafica, la scelta di un colore basato sul suo simbolismo si applica bene ai progetti elettronici, dai loghi agli sfondi del sito web, in quanto provoca una reazione non mediata e quindi immediata nell’utente .

I colori sono comunicazione non verbale. Hanno significati che vanno oltre l’inchiostro.

Mentre progetti loghi e siti Web, tieni presente come l’occhio e la mente percepiscono determinati colori e il simbolismo associato a ciascuno di essi

I colori sullo schermo del computer

Qualsiasi grafica visualizzata tramite computer acquista innegabilmente in brillantezza, in quanto i colori sono retro-illuminati e non disposti su una superficie opaca che richiede una sorgente di colore esterna per ressere visualizzata. Come per esempio nella stampa.

Quindi alcune abitudini riprese dalla grafica tradizionale, come per esempio utilizzare testo nero su fondo bianco oppure testo bianco su fondo nero, possono risultare troppo aggressive e stancanti viste a schermo. Consiglio sempre di mitigare i contrasti, utilizzando per esempio testo comunque scuro, ma ricavato riprendendo il colore istituzionale, quasi al massimo della sua tonalità più scura, su fondo bianco. In modo da mitigarne il contrasto.

Ricordatevi anche che esiste una grande variabilità nella resa di colore da schermo a schermo, che viene spesso modificata anche pesantemente, consiglio l’uso della gamma colori web safe specialmente per computer non recenti.

I differenti mezzi di riproduzione possono incidere molto sulla resa colore, se ritenete che il vostro lavoro possa essere proiettato a muro evitate comunque le tonalità più chiare che non verranno riprodotte.

 

Il simbolismo dei colori freddi

Verde

Blu

Viola

Turchese

I colori freddi tendono ad avere un effetto calmante.

In natura, il blu è l’acqua e il cielo mentre il verde è l’erba, gli alberi e altre forme di vita vegetale, una coppia naturale che sostiene la vita.

Combina il blu e il verde per le tavolozze di colori naturali e acquose.

Riscalda una fantastica tavolozza di colori con un tocco di colore caldo come il rosso o l’arancione.

Se desideri il calore con solo una tavolozza blu, scegli il blu più profondo con un tocco di blu scuro, ma non del tutto viola o quasi nero.

I colori freddi appaiono più piccoli dei colori caldi e retrocedono visivamente sulla pagina in modo che il rosso possa sovrastare visivamente e risaltare sull’azzurro anche se usato in quantità uguali.

Se vuoi concentrarti sulla calma, usa più del fresco e solo un po ‘di colori caldi. I profili per ciascuno di questi colori freddi includono le descrizioni dei loro significati e come utilizzare ciascun colore nel lavoro di progettazione.

Il simbolismo dei colori caldi

Porpora

Rosso

Arancio

Giallo

Verde

 

Il calore del rosso, del giallo o dell’arancio può rappresentare l’eccitazione o anche la rabbia. I colori caldi trasmettono le emozioni dal semplice ottimismo alla violenza forte.

Anche i neutri del nero e del marrone hanno attributi caldi. Possiamo discutere se il o il bianco vanno considerati colori oppure limiti dello spettro luminoso.

In natura, i colori caldi rappresentano il cambiamento come il cambiamento delle stagioni o l’eruzione di un vulcano.

Tonifica le forti emozioni di una tavolozza calda con alcuni colori freddi o neutri rilassanti o usando il lato più chiaro della palette di colori caldi come rosa, giallo pallido e pesca.

I colori caldi appaiono più grandi dei colori freddi, quindi il rosso può sovrastare visivamente il blu anche se usato in quantità uguali. Puoi spesso allontanarti dalle tonalità calde e continuare a trasmettere la sua eccitazione.

I profili per ciascuno di questi colori caldi includono descrizioni dei loro significati e come utilizzare ciascun colore nel lavoro di progettazione.

Il simbolismo degli accostamenti tra colori caldi e freddi

 

 

 

Gli accostamenti tra colori caldi e freddi possono calmare oppure emozionare.

Sfumature di viola e sfumature di verde insieme al beige sono colori misti che trasmettono il simbolismo cromatico dei lati caldi e freddi della ruota dei colori.

Un blu freddo e un rosso caldo si uniscono per creare viola intenso e lavanda pallida.

In misura minore, le sfumature di verde, in particolare turchese e verde acqua, hanno anche gli effetti di riscaldamento e raffreddamento che nascono dal caldo giallo e blu freddo.

Alcuni neutri leggeri come la crema, il beige pallido e il taupe evocano alcune delle stesse sensazioni calde e fredde di viola e verde.

Il colore opposto o contrastante per il viola è verde e per il verde, è viola.

I profili per ciascuno di questi colori misti comprendono le descrizioni dei loro significati e come utilizzare ciascun colore nel lavoro di progettazione.

Il simbolismo dei colori neutri.

Nero

Bianco

Beige

Marrone

I colori neutri del nero, del bianco, dell’argento, del grigio e del marrone fanno buoni sfondi, servono a unificare diverse tavolozze di colori, e spesso anche da soli come l’unico o principale obiettivo di un progetto.
I colori neutri possono essere freddi o caldi ma sono più sottili di blu e rossi. I colori neutri aiutano a mettere l’attenzione su altri colori o servono a smorzare i colori che altrimenti potrebbero essere opprimenti da soli.

In una certa misura, i neri, i marroni, le abbronzature, i colori oro e beige sono considerati caldi.

Mentre bianco, avorio, argento e grigio sono colori un po ‘più freddi. Eppure questi attributi caldi e freddi sono flessibili e più sottili di quelli del rosso o del blu.

I profili per ciascuno di questi colori neutri includono descrizioni dei loro significati e come utilizzare ciascun colore nel lavoro di

Le 10 euristiche*che hanno fatto grande la usability ideata da J. Nielsen

Oggi si parla tanto di user experience e di interfacce grafiche ed è un bene perchè queste procedure di progettazione aiutano a rendere la comunicazione online più efficace ma soprattutto costruita su solide basi.

Riprendo il metodo sulla usabilità perchè ritengo che questo insieme di euristiche* sia alla base appunto dello stato attuale dellaprogettazione di interfacce uomo macchina. Quindi è una maniera per “ripassare i fondamentali” cosa che da insegnante e professionista del settore ritengo utile e capace di dare nuovi spunti.

Ecco le 10 regole della usability secondo Nielsen:

1. Visibilità dello stato del sistema

Il sistema deve sempre tenere gli utenti informati su ciò che sta accadendo, attraverso un feedback appropriato entro un tempo ragionevole.

2. Corrispondenza tra sistema e mondo reale

Il sistema dovrebbe parlare la lingua degli utenti, con parole, frasi e concetti familiari all’utente, piuttosto che termini orientati al sistema. Segui le convenzioni del mondo reale, facendo apparire le informazioni in un ordine naturale e logico.

3. Controllo dell’utente e libertà

Gli utenti spesso scelgono le funzioni di sistema per errore e avranno bisogno di un’uscita di emergenza chiaramente contrassegnata per lasciare lo stato indesiderato senza dover passare attraverso un dialogo esteso. Supporto annulla e ripristina.

4. Coerenza e standard

Gli utenti non dovrebbero chiedersi se parole, situazioni o azioni diverse significano la stessa cosa. Segui le convenzioni della piattaforma.

5. Prevenzione degli errori

Ancor meglio dei buoni messaggi di errore è una progettazione attenta che impedisce il verificarsi di un problema.

6. Riconoscimento piuttosto che richiamo

Rendi visibili oggetti, azioni e opzioni. L’utente non deve ricordare informazioni da una parte del dialogo a un’altra. Le istruzioni per l’uso del sistema dovrebbero essere visibili o facilmente recuperabili ogni volta che è opportuno.

7. Flessibilità ed efficienza di utilizzo

Gli acceleratori – non visti dall’utente principiante – possono spesso accelerare l’interazione per l’utente esperto in modo tale che il sistema possa soddisfare sia gli utenti inesperti che quelli esperti. Consenti agli utenti di personalizzare azioni frequenti.

8. Design estetico e minimalista

I dialoghi non dovrebbero contenere informazioni che sono irrilevanti o raramente necessarie. Ogni ulteriore unità di informazioni in un dialogo compete con le unità di informazioni pertinenti e diminuisce la loro visibilità relativa.

9. Aiutare gli utenti a riconoscere, diagnosticare e recuperare dagli errori

I messaggi di errore dovrebbero essere espressi in un linguaggio semplice (senza codici), indicare con precisione il problema e suggerire in modo costruttivo una soluzione.

10. Assistenza e documentazione

Sebbene sia preferibile utilizzare il sistema senza documentazione, potrebbe essere necessario fornire assistenza e documentazione. Qualsiasi informazione di questo tipo dovrebbe essere facile da cercare, focalizzata sul compito dell’utente, elencare le misure concrete da eseguire e non essere troppo grande.

 

*Euristica da wiki: È la parte della ricerca il cui compito è quello di favorire l’accesso a nuovi sviluppi teorici o a scoperte empiriche. Si definisce, infatti, procedimento euristico, un metodo di approccio alla soluzione dei problemi che non segue un chiaro percorso, ma che si affida all’intuito e allo stato temporaneo delle circostanze, al fine di generare nuova conoscenza.

sul sito della Nielsen Norman Group trovate il testo originale in lingua inglese