Um Pouco Sobre Cores na Web

UMPOUCOSOBRECORESNAWEB
POR ÍTALO WAXMAN

Cores são percepções visuais através
das células cones, que transmitem
ao nervo ótico as impressões que
vão direto ao sistema nervoso.

Saber como explorar, combinar e
contrastar as cores criará efeitos
visuais lógicos e sedutores.
Também é responsável por construir um design bem
sucedido nesse ambiente flexível que é a web.

As cores terão papel de favorecer ou
prejudicar seu conteúdo ou
ação desejada.
Servirão para atrair e manter novos usuários.
Terão papel fundamental para obter os sentimentos
específicos e reações esperadas do usuário.

Psicodinâmica das Cores tem a ver
com os significados de acordo com
o contexto de utilização.
No entanto existem alguns significados que são sentidos e
interpretados da mesma maneira ao redor do mundo
(ocidente) que são as cores primárias, secundárias, e
neutras.

VERMELHO
Cor da paixão, do amor, do sangue, da atividade, da
emoção, da luxuria, da empolgação, da juventude, da força,
da confiança, do poder, da bravura.
Gera ansiedade, fome, acelera o cérebro, estimula ações
e aumenta a frequência cardíaca e a respiração.
Ideal para as áreas automotivas, alimentícias, tecnologia,
talvez para planos de saúde, seguros e artigos domésticos.
Fonte: https://www.agenciainbound.com.br/blog/ux-design-a-importancia-das-cores-para-o-sucesso-do-seu-site

AZUL
Cor da tranquilidade, da paz de espírito, do céu e do
oceano, da tristeza, da serenidade, da responsabilidade, da
confiança, do profissionalismo, da segurança, do controle,
do propósito, do moderno.
Relaxa o organismo e desacelera o pensamento,
conforta e acolhe.
Ideal para instituições financeiras, de saúde, de tecnologia,
de viagens e energia.

AMARELO
Cor do otimismo, da esperança, do calor, do sol, da
felicidade, da energia, da criatividade, da luz, da motivação,
da claridade, da fortuna.
Salta aos olhos e chama a atenção quase que
imediatamente. Atrai os olhares.
Ideal para empresas de energia, de alimentos e artigos
domésticos. Talvez para a indústria automotiva, de saúde e
agrícola.

VERDE
Cor do frescor, da natureza, da saúde, da calma, da limpeza,
do equilíbrio, da renovação, da generosidade, da
estabilidade, da positividade, da fortuna, do prestígio.
Traz confiança e acalma, porém suas variações mais
escuras podem pender para sentimentos e sensações
mais fortes.
Ideal para indústria de energia, instituições financeiras,
alimentos naturais, artigos domésticos e tecnologia. Talvez
para a área de saúde e agrícola.

LARANJA
Cor da criatividade, da diversão, da extroversão, da
espontaneidade, da amizade, do companheirismo, do calor
humano, da energia, do impulso, da motivação, do instinto.
Combinação da coragem e atividade do vermelho com a
alegria e energia do amarelo.
Ideal para empresas de tecnologia e de saúde. Talvez para
alimentos e itens domésticos. Possui um forte apelo com o
público infanto-juvenil.

ROXO
Cor da realeza, da sofisticação, da elegância, do mistério, da
originalidade, da riqueza, do diferente, do inconvencional,
da fantasia, do respeito.
Atrai nosso senso de elitismo e refino, impõe respeito, se
destaca da multidão.
Ideal para instituições financeiras, de tecnologia e da área
da saúde. Talvez para a indústria automotiva, viagens,
vestuário, alimentação e artigos domésticos. É a cor mais
popular entre as marcas.

PRETO
Cor do elitismo, da sofisticação, da noite, do prestigio, do
alto padrão, do tradicional, do refinado, do poder, da
riqueza, do uniforme, do dramático.
Adotado por marcas que queiram evidenciar o alto
padrão de seus serviços.
Ideal para vestuário, automóveis, tecnologia e itens
domésticos.

CINZA
Cor do elitismo, da sofisticação, da noite, do prestigio, do
alto padrão, do tradicional, do refinado, do poder, da
riqueza, do uniforme, do dramático.
Repassa confiança e acolhe o público. Encaixa-se com
quase todas as outras cores.
Ideal para empresas de tecnologia, vestuário, planos de
saúde, energia, viagens, automotivo e artigos domésticos.

BRANCO
Cor da pureza, sinceridade e verdade. Também costuma ser
usado como coringa, associando-se com eficiência junto a
qualquer cor.
Passa uma sensação de paz para produtos e serviços que
precisam demonstrar sua segurança e estabilidade.
Ideal para empresas de tecnologia, vestuário, planos de
saúde, energia, viagens, automotivo e artigos domésticos.

Uma técnica simples e eficiente de combinar cores e
destacar algo é utilizando cores complementares
(opostas).
Mas tome cuidado! A tendência é que cores
complementares produzam vibrância, ou seja, contraste
deste tipo são péssimos para textos.

Cores Neutras possuem um melhor
contraste para leitura.
O contraste entre preto e branco é considerado o ideal
devido a oposição de luminosidade.

Para obter um efeito de leitura mais confortável opte por
usar tonalidades de cores menos saturadas (menos
intensas).
Como estamos falando de leitura em monitor, tonalidades
mais saturadas podem causar desconforto e cansaço.

Podemos fazer um simples teste
que pode nos ajudar a ter certeza de
um bom contraste / legibilidade.
Selecione cores para o background e texto, se tiver
sensação de vibração (impressão de estar pulsando),
significa um péssimo contraste / legibilidade.
Alta vibração, baixa legibilidade Baixa vibração, boa legibilidade

Não tenha medo de usar as cores à
seu favor.
Com essas pequenas dicas, espero que consigam entender
um pouco dessa magia das cores e como elas podem nos
ajudar.
Uma web sem cor é uma web sem
graça ;)

Como o uso das cores pode melhorar
a experiência de uso.

Problemas Atuais
Interface monocromática e mórbida.
Ausência de padrões de cor acaba confundindo alguns
filtros e dificultando a leitura das tabelas.
Botões de ação visualmente iguais prejudicando
a distinção entre eles.
Falta de destaque para informações relevantes
e ações importantes na interface.

Versão antiga da listagem de tickets do HelpTec

Versão antiga da leitura de tickets do HelpTec

Versão antiga da listagem padrão (sistemas) do HelpTec

Versão antiga da área administrativa do HelpTec

Melhorias Propostas
Definição de cores base para toda a interface.
Melhoria de legibilidade das informações e layout mais
leve para as tabelas.
Padronização de informações e ciclos importantes
por cores.
Facilitar a identificação de quando houver e do tipo de
interação nos tickets.

Definição de cores base para toda a
interface
Para construção da interface optamos por usar a palheta
padrão da nossa nova identidade como base.
NEON CARROT
#f9a31e
R 249 G 173 B 30
C 1% M 41% Y 98% K 0%
IRON GRAY
#75706b
R 117 G 112 B 107
C 54% M 48% Y 52% K 16%

Melhoria de legibilidade das
informações e layout mais leve
para as tabelas
Visando deixar o layout mais leve e harmônico, optamos
por manter tonalidades neutras e leves de background
tanto para aplicação quanto para as tabelas.
PRETO 3%
#f7f7f7
BRANCO
#FFF
Background e Tabelas Textos
IRON GRAY
#75706b
Notificações de Interação
VERMELHO
#c9302c

Interface mais leve e tabela com melhor legibilidade.

Padronização de informações e
ciclos importantes por cores
Para o destaque das informações e diferenciação dos fluxos
optamos por cores que saltassem os olhos e fossem
facilmente identificadas dentro da interface neutra.

VERDE
#449d44
VERMELHO
#c9302c
LARANJA
#f0ad4e
AZUL
#337ab7
AZUL CLARO
#5bc0de
PRETO
#000
IRON GRAY
#787879
BRANCO
#fff
Status de Ticket / Prioridade
S - Finalizado
P - Baixa
S - Aberto
P - Alta
S - Em Andam.
P - Média
S - Outros
P - Sem Prior.
S- Sem Resp.
P - Urgente
VERDE
#449d44
VERMELHO
#c9302c
LARANJA
#f0ad4e
Botões / Ações
AZUL
#337ab7
AZUL CLARO
#5bc0de
Interações no Ticket
IRON GRAY
#787879
Interação no
Ticket
Mudança de
Status
Comentário
Interno
Novo /
Iniciar /
Concluir
Excluir /
Fechar
Voltar para
Análise
Aguardar
Resposta
Solicitar
Análise
Comentar /
Filtrar /
Editar /
Anexos

Nova Versão da listagem de tickets do HelpTec

Pontos de destaque que foram ressaltados com o padrão de cores criado.

Nova Versão da leitura de tickets do HelpTec

Nova Versão da listagem padrão (sistemas) do HelpTec

Nova Versão da área administrativa do HelpTec

Facilitar a identificação de quando
houver e do tipo de interação nos
tickets
Visando deixar a identificação do tipo de interação na nos
tickets mais fácil, além da filtragem foram propostas cores
específicas para cada tipo.
AZUL
#337ab7
AZUL CLARO
#5bc0de
Interações no Ticket
IRON GRAY
#787879
Interação no
Ticket
Mudança de
Status
Comentário
Interno

Interações dos tickets identificadas por cores específicas.

Alguns links legais para dar
aquela forcinha com cores!
http://paletton.com/
http://www.colourlovers.com/
http://www.color-hex.com/
https://coolors.co/
https://uigradients.com
http://www.lolcolors.com/
https://www.canva.com/color-palette/
https://color.adobe.com/pt/create/color-wheel/

MUITO OBRIGADO!
@italowaxman - fb.me/italowaxman

Um Pouco Sobre Cores na Web

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Um Pouco Sobre Cores na Web