Cor em web design: como fazer com que a emoção desejada usuário
Dicas / / December 19, 2019
Ao longo da história humana, os mestres artistas recebeu o reconhecimento universal devido à capacidade para o trabalho com a cor. No mundo de hoje não recebem menos especialistas de reconhecimento, que são capazes de combinar cores nos fins comerciais e empresariais - em publicidade e web design.
A capacidade de usar cores pode ser bombeada até ao infinito. É uma verdadeira profundidade de oportunidades de exposição humana.
Vamos informá-lo sobre os conceitos básicos da teoria da cor e esquema de cores e, em seguida, falar sobre o impacto emocional de certas cores.
teoria da cor
tema de cor, você pode dedicar um livro inteiro, por isso não vamos levá-la inteiramente, e limitar-nos a informação útil, que pode ser usado no desenvolvimento de design de interface.
Ele pode ser dividido em teoria da cor em três partes:
contraste
Cada sombra é o oposto, por assim dizer, de seu "inimigo jurado", que é o maior contraste com esta cor. Para encontrar uma cor, você pode usar a roda de cores. Basta selecionar a cor do lado oposto do círculo.
adição
Estas cores nem sempre entram em conflito uns com os outros. As cores complementares enfatizar o outro, ao contrário do contraste. Na roda de cores, tais cores são uns com os outros, tais como cores complementares de roxo - azul e rosa.
ressonância
Cada cor representa um certo humor. cores brilhantes quentes (vermelho, laranja, amarelo) preenchido com energia humana, despertá-la, as cores escuras frias (verde, azul, roxo), pelo contrário, relaxar e acalmar.
Por exemplo, BBC News Use a barra de navegação vermelho, para despertar o leitor, para fortalecer seu estado animado. Dada a especificidade do local - uma notícia sensacional - o vermelho é uma solução lógica.
teoria das cores em web design - é mais do que apenas decoração. A cor pode mudar a percepção do seu site, e desempenham um papel crucial na sua empresa.
percepção emocional de cor
Ninguém vai negar a estreita interação de cor e emoção. E, claro, qualquer web designer quer usar este efeito para criar uma certa atmosfera para cada site.
Com base nos diversos estudos - análise, publicada no site Vandelay projetoE postar sobre as cores na Revista quebra - explicamos como cores afetam as emoções e ajudar a criar UX-design.
É importante lembrar que diferentes culturas ao redor do mundo têm percepções diferentes de cor. Vamos descrever as associações emocionais que são únicas para a cultura ocidental.
vermelho
Emoções e associações: o poder, a importância da juventude.
A cor mais estimulante, tão energicamente carregada, pode ainda aumentar a pressão arterial. O vermelho representa a paixão e poder, mais do que outras cores atrair a atenção, muitas vezes usado para avisos importantes e anúncios.
Por exemplo, o vermelho é local muito adequado No Way NSACuja finalidade - para evitar que as supostas ameaças.
Use um monte de vermelho na parte superior da página - esta é uma grande solução porque ele chama a atenção para informações importantes na mensagem. Ao mesmo tempo, as pessoas tendem a sair rapidamente da "zona de perigo" de cor vermelha e rolar para baixo. Este, por sua vez, permite que o usuário para mostrar mais conteúdo.
Mas esta cor pode trabalhar contra você, porque pode causar agressão ou superestimulação. Se você deseja criar um ambiente mais descontraído, tente usar vermelho moderadamente e escolha tons mais claros de vermelho.
laranja
Emoções e associações: simpatia, energia e singularidade.
Como o mais quieto dos tons quentes, laranja pode causar todo o espectro de emoções diversas. À medida que a cor de base, pode ser de interesse e a cinta, e como secundário - preservar estas propriedades, mas de um modo não intrusivo.
Além disso, Orange ajuda a criar uma sensação de movimento e energia. Por exemplo, isso parece ótimo no site da banda desenhada FantaO que é sugestivo da juventude e movimento. Cor está associada com criatividade, mantendo um senso de marca familiar.
amarelo
Emoções e associações: felicidade, entusiasmo, o arcaísmo (cores mais escuras).
Este é um dos mais versáteis cores e as emoções que ela provoca, são dependentes da sombra em maior medida.
cor amarelo brilhante adiciona energia, mas sem a gravidade e aspereza, que está presente em vermelho. tons médios de cores amarelas evocam uma sensação de conforto, embora ainda vigoroso. tons escuros (incluindo ouro) proporcionar uma sensação de antiguidade, preencher o espaço intemporalidade, sabedoria e curiosidade.
Por exemplo, na página principal da agência de web design Flash Media amarelo mais escuro energia exalam tom, curiosidade e autoridade. Esta cor é perfeito para empresas que ganham seus consultas e eles querem enfatizar seu profissionalismo.
verde
Emoções e associações: crescimento, estabilidade, temas de finanças que cercam o tema do meio ambiente.
Green - uma ponte entre o quente e tons frescos, mas se inclina mais para o frio. Isto significa que verde tem um efeito de cor azul que relaxa, mas também tem um pouco de vigor de amarelo.
Como um resultado, ele cria uma atmosfera muito equilibrado e estável. tons mais escuros de verde criar a impressão de riqueza e abundância, tanto on-line Ameritrade.
azul
Emoções e associações: paz de espírito, segurança, abertura (tons mais claros), confiabilidade (tons mais escuros).
Como no caso da cor amarela, o efeito é altamente dependente da tonalidade azul. Todos os tons de azul são versáteis em termos de relaxamento e de segurança, mas as cores brilhantes associado com simpatia, e escuro - com tristeza.
As redes sociais como Twitter e Facebook são usados tons mais leves e médios de azul, e sites corporativos preferem mais escuras tons de resistência e confiabilidade.
Um grande exemplo - agência de design evento Van Vliet & Armadilha. Usando cor azul como pano de fundo, eles são visualmente insinuado seus conhecimentos e habilidades em design floral, mas também criou uma sensação de confiabilidade e confiança.
Isto é de grande importância, como eles trabalham com os eventos, o que é importante para a parte visual, por exemplo, com casamentos.
roxo
Emoções e associações: de luxo, romance (tons claros), misticismo e mistério (cores escuras).
cor roxa tem sido historicamente associada com a real grandeza, sugestões no luxo. tons roxos refletem a generosidade ea riqueza como um todo, o que os torna uma excelente escolha para moda e bens de luxo (mesmo chocolate, por exemplo, CadburyQuem escolheu sua cor marca).
tons mais claros, como lavanda (rosa roxo com adição) evocar pensamentos sobre romance, enquanto os tons escuros parecem mais elegante e misteriosa.
preto
Emoções e associações: poder, sofisticação, nervosismo.
A mais poderosa das cores neutras - preto - aparece em praticamente qualquer site. Ela pode causar diferentes associações, dependendo da cor que acompanha ou dominá-los, se usado em excesso.
A força ea neutralidade do preto o torna uma excelente opção para grandes blocos de texto, mas a cor principal pode criar um sentimento de nervosismo ou até mesmo ser associada com o mal.
Para a maioria dos sites, o preto é usado para criar uma sensação de elegância. A combinação de design minimalista preto e branco dá a impressão de elegância e estilo, tanto no local Sonho e alcance Empresa BOSE.
branco
Emoções e associações: pureza, simplicidade, bondade.
Na cultura ocidental, branco está associado com a pureza, bens e inocente. Esta cor é frequentemente usado para o fundo de locais minimalista e simples.
Além disso, nenhuma das cores não permitirá desenhar tanta atenção para as outras cores como branco. Por exemplo, em site vencedor Awwwards Kloina Toshev todas as suas obras são colocadas para fora em um fundo branco, que só aloca ilustrações, e cria a impressão de uma galeria elegante.
cinza
Emoções e associações: neutralidade, a formalidade, a melancolia.
Apesar do fato de que em algumas situações a cinza pode criar uma atmosfera sombria e melancólica, ainda é frequentemente utilizado por designers profissionais.
A coisa em tons: alternando-los, você pode obter todas as emoções causadas por ambos em preto e branco. Em geral, o cinza - é uma ferramenta poderosa nas mãos certas.
Mas em combinação com cores mais vivas em cinza projeto do fundo parece moderno, mas não sombrio, tais como Awwwards.
bege
Emoções e associações: ele transmite o caráter das outras cores.
Por si só, bege bastante aborrecido e sem expressão, mas ele tem uma propriedade notável: bege assume o caráter de cores que a rodeiam. Portanto, se ele não se destina a expressar contenção bege serve como um fundo ou a segunda cor.
Tons mais escuros de bege criar um senso de tradição e mundano, dar uma sensação de textura de papel e tons mais claros parecem mais fresco e mais moderno.
Por exemplo, restaurante no local Dishoom luz de cor bege em torno dos nomes e mais escuras bordas dar a impressão de que este restaurante - uma nova perspectiva sobre a cozinha tradicional.
marfim
Emoções e associações: conforto, elegância, simplicidade.
Marfim e creme de produzir quase as mesmas emoções como o branco. No entanto aquecedor marfim (ou menos estéril) do branco, o que cria uma maior sensação de conforto, enquanto se mantém minimalista.
Você pode usar marfim em vez de branco para suavizar o contraste entre ele e as cores mais escuras. Por exemplo, o site Art in My Coffee elementos de-laranja castanho são colocados sobre um fundo cor de marfim (que parece acinzentado) que mantém uma sensação de calor.
espectro de cores
Cada site tem uma gama de cores, em que as cores primárias usado para preencher um espaço maior. Como dissemos antes, o uso dessas cores afeta a mente e humor na maior parte inconscientemente. Portanto, escolha-os cuidadosamente.
Apesar do fato de que existem muitas maneiras de combinar as cores, vamos nos concentrar em três mais bem sucedido e comumente usado.
Tríade (triplo triângulo harmonia)
Triad - o sistema principal e mais equilibrada de três cores. Ele usa ressonância e adição de cores, mas há um contraste complexo, por causa do que a tríade é a gama mais confiável.
Em uma roda de cor de 12 cores, escolher qualquer três, localizado em 120 graus um do outro: uma cor para o fundo principal e duas para conteúdo e barra de navegação.
sistema complementar Duplo
Esta gama é mais difícil de implementar, mas pode ser solução de custo eficaz. Ele usou quatro cores: duas contrastantes e dois adicional.
Veja como a página parece notavelmente Flórida Flourish, com base em tal esquema. contraste vermelho e cor verde nas plantas e blocos de texto e fundo azul e deserto laranja efetivamente completar o quadro.
Os análogos (sistema sequencial)
Gamma cores semelhantes utiliza principalmente cores complementares. Isso permite que mais claramente enfatizam algumas qualidades e causar certas emoções.
Por exemplo, uma combinação de vermelho, laranja e amarelo destaca o vigor e vitalidade. Uso de tal escala é muito simples, mas é difícil escolher a cor que será incluído na combinação. Seu efeito será exagerado, por isso não pode estar errado.
Por exemplo, o uso de azul, turquesa e as cores verdes no design do site Blinksale Ele criou uma atmosfera de paz e tranquilidade. Observe como a cor amarela usado para enfatizar pontos importantes.
Este é apenas o básico da teoria da cor, que podem ajudar a criar um design personalizado impressionante, e não há limite para o quão longe você pode ir em termos de cores em seu site.
Ferramentas auxiliares para selecionar uma cor
Felizmente, existem várias ferramentas que ajudam a trazer a teoria da cor em prática. Experimente estas paletas para não ter de começar do zero na criação de seu:
- Adobe Color CC, Anteriormente conhecido como Adobe Kuler. Esta é uma das ferramentas mais confiáveis em escolher cores.
- Paletton. Se você precisa de uma ferramenta simples para seleção de cor rápida, Paletton é perfeito.
- Plano UI Color Picker. A ferramenta perfeita para selecionar as cores de interface de usuário.
E se esses instrumentos não combina com você, aqui está outra 28 sites com paletas e ferramentas diferentes para seleção de cores.
A relação direta entre cor e emoções
Lembre-se, os usuários raramente notar e apreciar a cor do fundo, barra de navegação, peças individuais, mas isso não significa que a cor não é afetada por elas. Apenas isso acontece inconscientemente.
experiência do usuário qualquer emoção, é a relação com o site ou marca, faz certas ações: rolar para baixo para clicar em botões que perguntar o que fazer, ou, inversamente, não notá-los. E a cor desempenha em tudo isso um grande papel.
Se você tem o seu conselho sobre o uso da cor em web design, compartilhar por favor nos comentários.