Color en el disseny web: com evocar les emocions adequades en l'usuari

2024 Autora: Malcolm Clapton | [email protected]. Última modificació: 2023-12-17 03:49

El color determina la reacció emocional de l'usuari davant el lloc, encara que la persona mateixa no en sigui conscient. Quins colors utilitzar per al fons i diferents elements del lloc per evocar certes sensacions, i com combinar correctament els colors en el disseny web, llegiu a continuació.

Al llarg de la història de la humanitat, els mestres pintors han estat universalment reconeguts per la seva capacitat de treballar amb el color. En el món modern, els especialistes que saben combinar colors amb finalitats comercials i empresarials -en publicitat i disseny web- són igualment reconeguts.

La capacitat d'utilitzar colors es pot augmentar indefinidament. Aquest és un autèntic abisme de possibilitats per influir en una persona.

Cobrirem els conceptes bàsics de la teoria del color i l'esquema de colors, i després parlarem de l'impacte emocional de determinats colors.

Teoria del color

Es pot dedicar un llibre sencer al tema del color, de manera que no el prendrem en la seva totalitat, sinó que ens limitem només a la informació útil que es pot utilitzar a l'hora de desenvolupar un disseny d'interfície.

La teoria del color es pot dividir en tres parts:

Contrast

Cada tonalitat té un contrari, per dir-ho així, la seva "némesi", que constitueix el major contrast amb aquest color. Per trobar aquest color, podeu utilitzar la roda de colors. Només heu de triar un color al costat oposat del cercle.

Addició

Aquests colors no sempre entren en conflicte entre ells. Els colors complementaris s'accentuen els uns als altres, a diferència dels contrastats. A la roda de colors, aquests colors es succeeixen, per exemple, colors complementaris de lila: blau i rosa.

Ressonància

Cada color evoca un determinat estat d'ànim. Els colors càlids brillants (vermell, taronja, groc) omplen una persona d'energia, la desperten, i els tons foscos i freds (verd, blau, morat), per contra, relaxen i calmen.

Per exemple, fan servir la barra de navegació vermella per despertar el lector i augmentar la seva excitació. Tenint en compte l'especificitat del lloc - notícies sensacionals - el vermell sembla una decisió lògica.

La teoria del color en el disseny web és més que una simple decoració. El color pot canviar la percepció del vostre lloc i tenir un paper fonamental en el vostre negoci.

Percepció emocional del color

Ningú negarà l'estreta interacció del color i l'emoció. I, per descomptat, qualsevol dissenyador web vol utilitzar aquesta influència per crear l'ambient adequat per a cada lloc.

A partir d'uns quants estudis -anàlisi publicada al lloc web i una publicació sobre colors a-, explicarem com els colors afecten les emocions i ajudem a crear un disseny UX.

És important recordar que les diferents cultures del món perceben els colors de manera diferent. Descriurem associacions emocionals pròpies de la cultura occidental.

Vermell

El color més estimulant, tan carregat d'energia que fins i tot pot augmentar la pressió arterial. El vermell representa passió i poder i és el color que més crida l'atenció, per això s'utilitza sovint per a advertències i anuncis importants.

Per exemple, el color vermell és molt adequat per a un lloc que té com a finalitat advertir de les amenaces percebudes.

Utilitzar molt de vermell a la part superior de la pàgina és fantàstic, ja que crida l'atenció sobre la informació important del missatge. Al mateix temps, la gent tendeix a sortir ràpidament de la "zona de perill" vermella i desplaçar-se cap avall. I això, al seu torn, permet mostrar més contingut a l'usuari.

Però aquest color també pot funcionar en contra teva, ja que pot provocar agressivitat o sobreestimulació. Si voleu crear un ambient més relaxant, proveu d'utilitzar el vermell amb moderació i trieu tons de vermell més clars.

taronja

Com el més tranquil dels tons càlids, el taronja és capaç d'evocar una sèrie d'emocions diverses. Com a color primari, pot despertar interès i dinamitzar, i com a color secundari, pot conservar aquestes propietats, però d'una manera més discreta.

A més, la taronja ajuda a crear una sensació de moviment i energia. Per exemple, es veu molt bé al lloc web de dibuixos animats de l'empresa, que suggereix la joventut i el moviment. El color s'associa amb la creativitat, alhora que manté una sensació de marca familiar.

groc

És un dels colors més versàtils, i les emocions que suscita depenen més de l'ombra.

El groc brillant aporta energia, però sense la nitidesa i la nitidesa que hi ha al vermell. Els tons mitjans de groc evoquen una sensació de confort alhora que són vigoritzants. Els tons foscos (inclòs l'or) proporcionen una sensació d'antiguitat, omplint l'espai d'atemporal, saviesa i curiositat.

Per exemple, a la pàgina d'inici d'una agència de disseny web, els tons més foscos de groc desprenen energia, curiositat i autoritat. Aquest color és ideal per a empreses que guanyen diners amb la consultoria i volen destacar la seva professionalitat.

Color verd

El verd és un pont entre tons càlids i freds, tot i que acostuma a ser més fred. Això vol dir que el verd té l'efecte relaxant del blau, però també té una mica d'energia del groc.

Com a resultat, es crea un ambient molt equilibrat i estable. Els tons verds més foscos donen la impressió de riquesa i abundància, igual que el lloc web.

Color blau

Igual que amb el groc, l'efecte del blau depèn molt de la tonalitat. Tots els tons de blau són universals pel que fa a la relaxació i la seguretat, però els tons clars s'associen amb l'amabilitat i els tons foscos amb la tristesa.

Les xarxes socials com Twitter i Facebook utilitzen tons de blau més clars a mitjans, mentre que els llocs corporatius prefereixen tons més foscos de força i fiabilitat.

Una agència de disseny d'esdeveniments n'és un gran exemple. Utilitzant flors blaves com a fons, van deixar entreveure visualment els seus coneixements i habilitats en floristeria i també van crear una sensació de fiabilitat i confiança.

Això és de gran importància ja que treballen amb esdeveniments on el visual és molt important, com ara casaments.

Porpra

El color porpra s'associa històricament amb la grandesa reial, deixant entreveure el luxe. Els tons de porpra reflecteixen la generositat i la riquesa en general, cosa que els converteix en una gran opció per a articles de moda i de luxe (fins i tot la xocolata com l'elecció de color de la marca).

Els tons més clars com l'espígol (morat amb un toc de rosa) evoquen pensaments romàntics, mentre que els tons més foscos semblen més elegants i misteriosos.

Negre

El més fort dels colors neutres, el negre, apareix a gairebé qualsevol lloc web. Pot evocar diferents associacions segons els colors que l'acompanyen o dominar-les si s'utilitza en excés.

La força i la neutralitat del negre el converteixen en una gran opció per a grans blocs de text, però com a color primari pot crear una sensació de nerviosisme o fins i tot estar associat amb el mal.

Per a la majoria de llocs, el negre s'utilitza per crear una sensació de sofisticació. La combinació de blanc i negre en un disseny minimalista dóna la impressió d'elegància i estil, igual que al lloc web de BOSE.

Blanc

A la cultura occidental, el blanc s'associa amb la puresa, la bondat i la innocència. Aquest color s'utilitza sovint per al fons de llocs web minimalistes i senzills.

A més, cap color únic us permetrà prestar tanta atenció a altres colors com el blanc. Per exemple, per al guanyador de l'Awwwards, Kloin Toshev, totes les seves obres estan distribuïdes sobre un fons blanc, cosa que només fa que les il·lustracions destaquin i dóna la impressió d'una galeria elegant.

Color gris

Malgrat que en algunes situacions, el gris pot crear un ambient trist i trist, encara és utilitzat sovint pels dissenyadors professionals.

Tot es tracta de matisos: alternant-los, pots aconseguir totes les emocions que provoca tant el blanc com el negre. Tot plegat, el gris és una eina poderosa a les mans adequades.

I en combinació amb colors més brillants en el disseny, el fons gris sembla modern i no fosc, per exemple.

Beix

El beix en si és bastant avorrit i inexpressiu, però té una propietat notable: el beix pren el caràcter de les flors que l'envolten. Per tant, si no es pretén expressar moderació, el beix serveix de fons o segon color.

Els tons més foscos de beix creen una sensació de tradició i terrenal, donen una sensació de paper, mentre que els tons més clars semblen més frescos i moderns.

Per exemple, al lloc web d'un restaurant, un color beix clar al voltant del nom i les vores més fosques donen la impressió que el restaurant és una versió fresca de la cuina tradicional.

Marfil

L'ivori i la crema evoquen gairebé les mateixes emocions que el blanc. Tanmateix, l'ivori és més càlid (o menys estèril) que el blanc, la qual cosa crea una major sensació de confort mantenint el minimalisme.

Podeu utilitzar ivori en comptes de blanc per suavitzar el contrast entre aquest i els colors més foscos. Per exemple, al lloc, es col·loquen elements marró-taronja sobre un fons d'ivori (que sembla grisenc) per mantenir una sensació de calidesa.

Espectre de colors

Cada lloc té una combinació de colors que utilitza colors primaris per omplir més espai. Com hem dit anteriorment, l'ús d'aquests colors afecta la ment i l'estat d'ànim d'una persona principalment de manera inconscient. Així que trieu-los amb cura.

Tot i que hi ha moltes maneres de combinar colors, ens centrarem en tres de les més reeixides i utilitzades habitualment.

Tríada (triple harmonia, triangle)

La tríada és el sistema bàsic i més equilibrat de tres colors. Utilitza ressonància i complement de color, però no té un contrast complex, la qual cosa fa que la tríada sigui la gamma més fiable.

En una roda de 12 colors, seleccioneu-ne tres amb una distància de 120 graus: un per al primer pla i dos per a la barra de contingut i navegació.

Sistema complementari dual

Aquesta gamma és més difícil d'implementar, però pot ser una solució rendible. S'utilitzen quatre colors: dos contrastats i dos complementaris.

Dóna un cop d'ull a l'aspecte d'una gran pàgina de Florida Flourish en funció d'aquest disseny. Els colors vermell i verd contrasten a les plantes i els blocs de text, mentre que el fons blau i el desert taronja complementen la imatge de manera eficaç.

Analògics (sistema sèrie)

La gamma de colors similars utilitza principalment matisos complementaris. Això us permet ressaltar especialment clarament algunes qualitats i evocar determinades emocions.

Per exemple, la combinació de colors vermell, taronja i groc emfatitza l'energia i la vitalitat. És molt senzill utilitzar aquestes escales, però és difícil triar quins colors s'inclouran a la combinació. L'efecte d'ells serà exagerat, de manera que no us podeu equivocar.

Per exemple, l'ús de colors blau, turquesa i verd en el disseny del lloc web va crear un ambient de calma i serenor. Observeu com s'utilitzava el groc per destacar punts importants.

Aquests són només els conceptes bàsics de la teoria del color que us poden ajudar a crear dissenys personalitzats impressionants i no hi ha límit a fins a quin punt podeu arribar en termes de color al vostre lloc.

Eines de l'assistent de selecció de colors

Afortunadament, hi ha diverses eines disponibles per ajudar-vos a posar en pràctica la teoria del color. Prova aquestes paletes perquè no hagis de començar des de zero per crear la teva pròpia:

1. abans conegut com Adobe Kuler. És una de les eines de selecció de colors més fiables.
2. … Si voleu una eina senzilla per triar un color el més ràpidament possible, Paletton és fantàstic.
3. … Una gran eina per triar el color de la interfície d'usuari.

I si aquestes eines no us funcionen, aquí teniu les diferents eines de selecció de colors.

Relació directa entre color i emoció

Recordeu: els usuaris poques vegades noten i aprecien el color del fons, la barra de navegació, els detalls individuals, però això no vol dir que el color no els afecti. Simplement passa de manera inconscient.

L'usuari té algunes emocions, desenvolupa una actitud envers el lloc o la marca, realitza determinades accions: desplaça cap avall, fa clic a botons que indueixen a l'acció o, al contrari, no les nota. I el color té un paper important en tot això.

Si teniu algun consell per utilitzar el color en el disseny web, compartiu-lo als comentaris.