As pessoas são fisicamente, psicologicamente e socialmente influenciadas pela cor. Verificou-se que a cor tem conexões com a saúde e pode ajudar a definir o clima através do qual seus designs são vistos.
A cor comunica significado e, portanto, precisamos estar conscientes do significado que estamos transmitindo quando escolhemos usar uma cor em detrimento de outra. Não basta um designer usar uma cor simplesmente porque gosta dessa cor.
A cor é uma ferramenta na caixa de ferramentas do designer da mesma forma que uma grade ouespaço em brancoe é importante entender como usar essa ferramenta.
Na semana passada falamos sobre oteoria das corese como poderíamos representar cores e escolher diferentes esquemas de cores. Nesta semana, veremos o significado que as cores comunicam, como podemos controlar melhor nossos designs por meio de nossas escolhas de cores e, finalmente, como escolher um esquema de cores que reforce a mensagem que seu design pretende comunicar.
Significado da cor
A primeira e talvez a mais importante coisa a entender sobre o significado da cor é que não há nenhuma evidência substantiva que suporte um sistema universal de significado da cor. Não é que as cores em si tenham um significado específico, mas sim que atribuímos significados culturalmente a elas.
Embora exista algum simbolismo de cores globalmente (vermelho como a cor de um sinal de parada, amarelo para cautela), o simbolismo de cores tende a ser mais comum em uma determinada cultura do que em culturas diferentes (o branco é usado para casamentos nas culturas ocidentais e para funerais no leste). culturas).
Mesmo dentro de uma única cultura, diferenças individuais existirão. Você e eu não seremos necessariamente afetados da mesma forma por vermos a mesma cor.
O que foi dito acima significa que é importante entender quem é seu público-alvo e como ele atribui significado à cor. Novamente, não é que uma cor tenha um significado específico por conta própria. É que culturalmente atribuímos significado às cores. Tenha isso em mente ao ler alguns dos detalhes sobre as cores mencionadas abaixo.
Cores quentes:Para simplificar, vamos definir cores quentes como vermelho, laranja e amarelo. Estas são as cores do fogo. Eles irradiam calor. As cores quentes são mais frequentemente associadas à paixão, energia, impulsividade, felicidade, aconchego e conforto. Chamam a atenção e têm a vantagem de serem convidativos e harmoniosos.
Cores frias:Novamente, para simplificar, vamos definir as cores frias como verde, azul e violeta. Estas são as cores da água. As cores frias são mais frequentemente associadas à calma, confiança e profissionalismo. Também estão associados à tristeza e à melancolia. Têm a vantagem de serem profissionais e harmoniosos, mas também podem afastar as pessoas pela frieza que irradiam.
Observação:O ponto de demarcação entre cores quentes e frias fica em algum lugar entre amarelo/verde e vermelho violado. Verde e roxo não caem perfeitamente em acampamentos quentes ou frios. Eles tendem a assumir as propriedades de um ou outro com base no contexto circundante.
Vermelho:é a cor do fogo e do sangue. É emocionalmente intenso. O vermelho está associado à energia, guerra, perigo, força, poder, determinação, ação, confiança, coragem, vitalidade, paixão, desejo e amor. Pode aumentar o metabolismo, aumentar a respiração e aumentar a pressão arterial. O vermelho tem alta visibilidade e avança para o primeiro plano. É frequentemente usado para botões, a fim de levar as pessoas a realizar ações impulsivas.
Amarelo:é a cor do sol. Amarelo brilhante atrai a atenção, embora também possa ser uma distração quando usado em excesso. O amarelo está associado à alegria, felicidade, sabedoria e energia intelectual. Estimula a atividade mental e gera energia muscular. O amarelo produz um efeito de aquecimento, desperta alegria e é freqüentemente usado para evocar sentimentos agradáveis. Tons de amarelo podem ficar opacos, diminuindo o efeito agradável.
Azul:é a cor do céu e do mar. Tem o efeito oposto do vermelho e retarda o metabolismo, a respiração e os batimentos cardíacos. É vista como uma cor masculina. O azul está associado à confiança, lealdade, sabedoria, inteligência, experiência, confiança, estabilidade e profundidade. Cria um efeito calmante, suprime o apetite e é considerado benéfico para o corpo e a mente. O azul é frequentemente usado para sites corporativos devido às associações mencionadas anteriormente.
Laranja:combina a energia do vermelho com a alegria do amarelo. Não é tão agressivo como o tinto e remete para uma alimentação saudável (citrinos). . O laranja está associado à alegria, ao sol, aos trópicos, ao entusiasmo, à felicidade, ao fascínio, à criatividade, à determinação, à atração, ao sucesso, ao encorajamento, ao estímulo e à força. Pode aumentar o apetite e evocar pensamentos de outono e colheita.
Verde:é a cor da natureza. Simboliza crescimento, esperança, frescor e fertilidade. Em países com dinheiro verde, como os EUA, evoca pensamentos e sentimentos de riqueza financeira. O verde está associado à cura, estabilidade, resistência, harmonia, segurança. vida e bem-estar. Às vezes, pode significar falta de experiência e costuma ser usado para indicar a segurança de medicamentos e produtos médicos na publicidade.
Roxo:combina a estabilidade do azul e a energia do vermelho. Transmite riqueza e extravagância e é vista como a cor ou a realeza. Simboliza poder, nobreza, luxo e ambição. O roxo está associado à sabedoria, dignidade, independência, criatividade, mistério e magia. O roxo claro é visto como feminino e o roxo é uma cor popular entre as crianças. O roxo ocorre com menos frequência na natureza e alguns podem considerá-lo artificial. Nas culturas católicas representa a morte e em algumas nações islâmicas está associada à prostituição.
Branco:está associado à luz, bondade, inocência, pureza, virgindade. Geralmente tem conotações positivas e é visto como limpo e seguro.
Preto:está associado ao poder, elegância, formalidade, morte, maldade e mistério. Denota força e autoridade, é visto como formal e elegante e traz sentimentos de medo e desconhecido.
Cinza:é a cor da tristeza, desapego e isolamento. Conota responsabilidade e praticidade conservadora. É uma cor neutra e cria uma sensação não invasiva. Está associado à segurança, maturidade e confiabilidade. Pode ser usado para reduzir a energia intensa de outra cor e enfatizar a vontade de obedecer. Algumas pessoas que preferem o cinza podem ser vistas como o tipo de lobo solitário ou tacanho.
Marrom:é a cor da terra e tende a se misturar com o fundo. Está associado a coisas materiais, ordem e convenção. Sua conexão com a terra lhe dá estabilidade. Marrom pode transmitir uma sensação sólida e saudável.
Os artigos a seguir oferecem informações adicionais sobre o possível significado que alguns associam a uma determinada cor.
- Teoria das Cores para Designers, Parte 1: O Significado das Cores
- Cor e Publicidade– Um site interessante que permite escolher uma palavra e ver quais cores outras pessoas associaram a essa palavra.
- Simbolismo das cores, cor e personalidade, cor e significado das pedras preciosas
- Cor: Significado, Simbolismo e Psicologia
- O significado das cores– Uma tabela de cores com palavras frequentemente associadas a elas.
- Simbolismo e significado das cores na Bíblia
- Significados das cores nos sonhos
- Entendendo o significado
de cores– oferece associações positivas e negativas com cores diferentes - Psicologia das cores e significado das cores
O efeito visual da cor em seus projetos
Usar cores que não funcionam bem juntas, usar muitas cores ou até mesmo cores insuficientes pode afastar as pessoas antes que elas tenham a chance de absorver seu conteúdo. Idealmente, você deve planejar e escolher um esquema de cores desde o início e deve ser consistente na forma como usa cores em seu design.
A cor é usada para chamar a atenção,elementos relacionados ao grupo, transmitem significado e geralmente melhoram a estética do seu site. Ele pode ser usado para organizar seus elementos e criar umhierarquia visual em seu projeto.
Uma pequena dose de cor quecontrastescom sua cor principal vai chamar a atenção. Ele vai dar ênfase. A repetição de cores em elementos como cabeçalhos de página fornece uma indicação visual imediata de que esses cabeçalhos estão relacionados.
As cores mais quentes avançam para o primeiro plano, enquanto as cores mais frias recuam para o fundo. Sua escolha de cores quentes e frias pode afetar orelação figura/fundodos seus elementos. Como as cores mais frias recuam, você pode decidir usá-las para elementos de fundo e, como as cores quentes avançam, elas são uma boa escolha para elementos em primeiro plano.
Ao misturar cores quentes e frias, você pode criar profundidade em seu design. Considere o milharal de Van Gogh com Cypress acima. A cor não é a única maneira de Van Gogh dar profundidade à pintura, mas observe como as cores aumentam a profundidade. As montanhas, o céu e as nuvens usam cores mais frias, enquanto o milharal usa cores mais quentes.
Você pode escolher uma cor mais quente para o tipo na parte superior de uma imagem para garantir que seja visto. Naturalmente, depende das cores da imagem, pois será mais importante garantir o contraste das cores do texto.
Cores mais escuras tendem a ser vistas primeiro e carregam maispeso visual. Uma área maior de cor mais clara é necessária para equilibrar o peso visual.
Cores altamente saturadas (tons puros) são percebidas como mais dinâmicas. Eles chamam a atenção. Muitas cores saturadas podem competir e causar fadiga ocular. Cores dessaturadas se prestam a desempenho e eficiência. Eles podem ser uma escolha melhor para ajudar as pessoas a concluir uma tarefa específica. Cores dessaturadas/brilhantes são percebidas como amigáveis e profissionais. Cores dessaturadas/escuras são vistas como sérias e profissionais.
Tenha cuidado ao usar muitas cores. Você deseja limitar as cores da mesma forma que limita as fontes. Você precisa do suficiente para poder oferecer contraste, mas não muito para não ter semelhança. 5 cores geralmente é um bom máximo, embora você possa usar mais. Quanto mais cores você usar, mais difícil será usá-las de forma eficaz.
Os artigos a seguir oferecem ideias gerais sobre o uso de cores, significado das cores e esquemas de cores
- Como a cor comunica significado
- Como obter uma aparência profissional com cores
- Escolhendo as combinações de cores
- Um guia para combinar cores e esquemas de cores para um ótimo design da Web
- Esquemas de cores: Projetando ideias para usar paletas de cores
Como escolher um esquema de cores
Compreender o significado por trás das cores é uma coisa. Escolher um esquema de cores é outra. Normalmente, ao decidir sobre um esquema de cores, você começará com a cor dominante. Isso pode vir de material de marketing existente, como um logotipo ou brochura.
Outra maneira de escolher as cores dominantes é pensar nas palavras que você usaria para descrever a empresa e o site da empresa. Que tipo de resposta emocional você deseja que as pessoas tenham ao olhar para o seu design. Quais associações você deseja que eles façam com o site e a empresa por trás do site.
O McDonald's, por exemplo, usa vermelho e amarelo porque essas cores aumentam o apetite e levam à impulsividade. Perfeito quando você está vendendo fast food. A IBM, por outro lado, usa o azul (assim como muitas entidades corporativas) para associar sentimentos de confiança e estabilidade à sua marca.
Pense na marca que seu design está representando e que tipo de associações você deseja que as pessoas façam e escolha as cores de acordo. Acho útil pensar rapidamente em palavras que descrevam a marca e, em seguida, considerar os significados das cores acima.
Os esquemas de cores sobre os quais falamos da última vez também desempenham um papel nas associações. Assim como uma cor individual pode transmitir um certo significado, a combinação de cores também pode transmitir significado.
Esquemas de cores monocromáticasparecem limpos e elegantes e são eficazes para estabelecer um clima geral. Eles produzem um efeito calmante e são muito agradáveis aos olhos. Isso é especialmente verdadeiro ao usar azul e verde. Os esquemas de cores monocromáticas tendem a ser muito unificados e harmoniosos. A desvantagem é que eles podem se tornar monótonos devido à falta de matizes. Para combater a monotonia tente misturar seus tons monocromáticos com branco puro e/ou preto puro.
Esquemas de cores complementaresficam melhores quando uma cor quente é usada contra uma cor fria. Isso cria um nível intrinsecamente alto de contraste e cria uma aparência dramática. Cores complementares intensificam umas às outras e são extremamente atraentes e vibrantes. A desvantagem é que eles podem ser muito vibrantes e chocantes e podem realmente fazer com que as cores pareçam vibrar. Cores contrastantes geralmente são ruins para o texto. Isso é especialmente verdadeiro na saturação total, portanto, certifique-se de usar tons diferentes de cores contrastantes para diminuir esses efeitos negativos.
Esquemas de cores análogassão semelhantes aos esquemas de cores monocromáticas, mas oferecem mais nuances, pois se baseiam em uma faixa mais ampla da roda de cores. Eles são frequentemente encontrados na natureza, são harmoniosos e agradáveis aos olhos e podem ser muito versáteis. Normalmente, você deseja escolher uma cor para dominar (a cor do meio), uma segunda para apoiar a cor principal e uma terceira cor para realçar. Certifique-se de ter contraste suficiente. Use tons, sombras e matizes para adicionar interesse.
Esquemas de cores triádicasoferecem um forte contraste visual, mantendo a harmonia e a riqueza de cores. Eles não são tão chocantes quanto as cores complementares. Eles podem ser vibrantes mesmo quando as cores são insaturadas e têm estabilidade porque cada cor da tríade equilibra as outras duas. Existe uma relação simples entre as cores que podem ser dinâmicas, mas também berrantes se não forem bem feitas. Use uma das cores como cor dominante e as outras duas como destaques.
Dividir esquemas de cores complementaresoferecem alto contraste sem a forte tensão de esquemas de cores complementares. Embora possa ser difícil harmonizar as cores em um esquema complementar dividido, elas costumam ser uma boa escolha para iniciantes, pois são difíceis de bagunçar. Eles têm mais variedade do que esquemas de cores complementares, embora sejam menos vibrantes e chamem a atenção.
Esquemas de cores tetrádicaspode ser difícil de harmonizar e pode parecer desequilibrado. As cores tetrádicas criam um rico esquema de cores com muita variação. Eles são ainda mais variados do que os esquemas de cores complementares divididas, embora isso também os torne menos vibrantes. Preste muita atenção ao equilíbrio entre cores quentes e frias. Escolha uma cor para dominar e use as outras cores de forma coadjuvante e mais suave.
Em qualquer esquema de cores, certifique-se de usar vários tons, matizes e tonalidades para evitar ser chato ou, no outro extremo, opressor. Uma ótima dica que peguei no último dosrecente série da Smashing Magazine sobre coresé o seguinte:
Uma das maneiras mais simples de criar um esquema de cores com aparência profissional é pegar alguns tons, nuances e matizes de uma determinada cor (evitando o tom puro) e adicionar outro tom puro (ou quase puro) que seja pelo menos três espaços na roda de cores (parte de um esquema de cores tetrádicas, triádicas ou complementares divididas) como uma cor de destaque. Isso adiciona interesse visual ao seu esquema de cores, mantendo um senso de equilíbrio.
Obrigado Cameron!
Certifique-se também de adicionar cores neutras (preto, branco, cinza) e neutras acentuadas (tons de marrom) ao seu esquema. Pretos e brancos serão mais frios. Os marrons parecerão mais quentes e os cinzas serão quentes ou frios, dependendo das cores ao redor.
Os links a seguir o levarão a lugares que podem ajudá-lo a escolher um esquema de cores.
- Marcadores da Adobe- Muitos esquemas de cores existentes para escolher. Existe também umAplicativo Adobe Airpara download. O link é direto para o download. Você precisará ter o Adobe Air instalado para executar o aplicativo.
- amantes da cor– Outro ótimo site para todas as coisas de cor.
- Designer de esquema de cores– um aplicativo online para ajudá-lo a escolher um esquema de cores
- O Assistente de Cores– um aplicativo online para ajudá-lo a escolher um esquema de cores
- Diferentes métodos para escolher esquemas de cores em web design– links para uma variedade de aplicativos para escolher um esquema de cores, incluindo os mencionados acima.
Acessibilidade
Quando pensamos em acessibilidade às vezes esquecemos das cores, mas é importante lembrar que muitas pessoas possuem algum tipo de deficiência na visão de cores. Por exemplo, se a única distinção entre o seu texto e o plano de fundo for um vermelho e o outro verde, as pessoas com daltonismo vermelho/verde terão dificuldade em ler o texto.
Tenha em mente que um grande número de pessoas tem visão de cores limitada. Por mais importante que seja a cor, seu design ainda deve funcionar na ausência de cor. Não mostre semelhanças e diferenças apenas em termos de tonalidade, pois algumas pessoas podem ter dificuldade em distinguir as tonalidades. Certifique-se de usar uma variedade de tons, valores e níveis de saturação.
Acima está a página inicial atual deste site convertida em tons de cinza. Provavelmente não é perfeito, mas você ainda deve ser capaz de ver diferentes elementos claramente e ainda ser capaz de ler o texto. Há contraste suficiente mesmo em escala de cinza para reconhecer onde um elemento muda para o próximo.
Os recursos a seguir oferecem mais informações sobre acessibilidade em relação à cor, bem como aplicativos para avaliar a cor em seus próprios projetos.
- Teoria das cores para daltônicos
- bit cinza– a ferramenta que usei para criar a imagem em tons de cinza acima
- Comparação de contraste de cores– uma ferramenta que permite comparar o contraste entre duas cores
- Analisador de taxa de contraste de cor de luminosidade– uma ferramenta que permite comparar o contraste entre duas cores
- 14 ferramentas brilhantes para avaliar as cores do seu design– links para uma variedade de ferramentas para testar as cores em seus projetos.
Resumo
Há muito o que digerir aqui, assim como as cores em geral. Alguns pontos importantes a serem lembrados ao trabalhar com cores.
A cor nos afeta de várias maneiras e, embora seu design não deva depender apenas da cor, sua escolha de cor será uma das primeiras coisas que as pessoas notam e podem determinar se as pessoas saem rapidamente ou ficam por mais.
Embora não haja um significado intrínseco para a cor, culturalmente atribuímos significado às cores com base em como e onde as vemos usadas com mais frequência.
Além do significado, a cor pode ser usada para impactar seu design visual ao criar hierarquias e adicionar profundidade. A cor impactará seus visitantes além de qualquer significado que seja transmitido.
Não apenas as cores individuais têm significado, a combinação de cores em esquemas transfere significado adicional.
Os 7 componentes do design
- Unidade
- Gestalt
- Espaço
- Domínio
- Hierarquia
- Equilíbrio
- Cor Parte I: Teoria das Cores
- Cor Parte II: Como usar a cor
«Post anteriorpróxima postagem»
Baixe uma amostra grátisdo meu livro, Design Fundamentals.