quarta-feira, agosto, 2018

Um guia rápido e definitivo para escolher paleta de cores

1 estrela2 estrelas3 estrelas4 estrelas5 estrelas
Loading...Loading...
FavoriteLoadingFavoritar este Post
Categoria:

Transformar um projeto e torna-lo amigável ao usuário, permanecendo fiel aos objetivos do cliente, não é uma tarefa fácil. Design são responsáveis em fazer isso acontecer, desde wireframes, fluxo, tipografia e seleção de core. Para facilitar a vida do design, vamos apresentar um guia fácil para a escolha de uma paleta de cores agradável aos olhos e ainda seja fácil de entender.

O básico da teoria das cores

Vamos tirar algumas coisas básicas do caminho primeiro. Aqui está uma pequena lista de termos e definições (sim, como no ensino médio) para que todos nós estamos na mesma página quando se trata de conhecimento essencial.

Terminologia de cor

  • Matiz – que cor é algo, como azul ou vermelho
  • Chroma – quão pura é uma cor; a falta de branco, preto ou cinza adicionado a ele
  • Saturação – a força ou fraqueza de uma cor
  • Valor – como claro ou escuro é uma cor
  • Tom – criado pela adição de cinza a um tom puro
  • Shade – criado pela adição de preto a um tom puro
  • Tint – criado pela adição de branco a um tom

 

Quatro tipos principais de paletas de cores

Monocromático – Diferentes tonalidades e profundidades de um único matiz. Estes podem ser os esquemas de cores mais simples de criar, já que são todos tirados da mesma cor. Isso torna mais difícil (mas não impossível) criar um esquema chocante ou feio. Tenha cuidado, porém; paletas monocromáticas podem ser chatas quando mal feitas.

Análogas – Uma cor principal e as cores dos dois lados na roda de cores. Essas paletas normalmente fazem um ótimo trabalho ao expressar consistência e uniformidade no design. Eles também são fáceis de trabalhar porque não há uma grande diferenciação no matiz. Em vez disso, o contraste é atingido principalmente pelas variações na tonalidade da cor, limitando qualquer distração do conteúdo.

Complementar – Cores complementares ou opostas da roda de cores (como vermelho e verde, azul e laranja, etc.). Paletas complementares são ótimas para comunicar um senso de equilíbrio. Como paletas análogas, adicionar vários tons e tons pode expandir esses esquemas. Isso é especialmente útil para evitar o contraste gritante que pode criar fadiga ocular quando duas cores opostas são colocadas uma ao lado da outra.

Tríade – Três cores de pontos equidistantes na roda de cores (como vermelho, amarelo e azul). O método triádico cria uma paleta mais diversificada. Isso requer um pouco mais de planejamento e experimentação porque envolve um número maior de matizes que se opõem.

 

O que cores significam

  • Vermelho: energia, poder, paixão
  • Laranja: alegria, entusiasmo, criatividade
  • Amarelo: felicidade, intelecto, energia
  • Verde: ambição, crescimento, frescor, segurança
  • Azul: tranquilidade, confiança, inteligência
  • Roxo: luxo, ambição, criatividade
  • Preto: poder, elegância, mistério
  • Branco: limpeza, pureza, perfeição

 

Uma nota sobre acessibilidade

Um desafio que os designers de UX devem ter em mente é atender às necessidades dos visitantes do site com daltonismo ou deficiência de visão de cores (DCV). Essa condição afeta mais de 8% dos homens e cerca de 0,5% das mulheres de ascendência europeia. Cabe aos projetistas de UX empregar paletas compatíveis com cores cegas adaptadas e configuradas para acomodar as múltiplas variedades de daltonismo. 

3 dicas para você começar

Comece com escala de cinzas.

Ao esboçar seus projetos em escala de cinza primeiro, você está garantindo um foco na usabilidade e na navegação clara, mais do que simplesmente obter a cor desse botão de CTA . Force-se a se concentrar em dispor elementos e otimizar o espaço em branco. Uma hierarquia limpa de tipo e elementos irá percorrer um longo caminho para gerar a melhor experiência do usuário.

Use a regra 60-30-10.

Use suas cores em uma proporção de 60% + 30% + 10%. Esta antiga regra de design de interiores é destinada a dar equilíbrio às suas cores. A fórmula funciona porque permite que o olho se mova confortavelmente de um ponto focal para o próximo. Também é incrivelmente simples de usar: 60% é o tom dominante, 30% é a cor secundária e 10% é para uma cor de destaque. Mesmo que sua paleta tenha mais de três cores (mas, por favor, não mais que cinco), manter as coisas em equilíbrio ficará mais claro e mais confortável para os cérebros de seus usuários.

As melhores combinações de cores vêm da natureza.

Eles sempre parecerão naturais. A melhor coisa de olhar para o ambiente para soluções de design é que a paleta está sempre mudando. Nascer do sol, pôr-do-sol, cenas de praia… todos têm paletas exclusivas que podem ser adaptadas às suas necessidades. Use um aplicativo como o Adobe Capture para isolar uma paleta de cores de uma foto para uso em outros aplicativos.

 

3 ferramentas de cores que farão o seu jogo de paletas

O Color Hunt é “uma plataforma gratuita e aberta para inspiração de cores, com milhares de paletas de cores escolhidas a dedo.” É uma ótima maneira de percorrer um feed (quase) infinito de paletas de cores em busca daquelas que impressionam.

 Coolors.co – Esta ferramenta é “um gerador de esquemas de cores super rápido para designers legais.” Há um aplicativo iOS junto com o Adobe Add-ons para Photoshop e Illustrator. Você pode navegar em milhares de paletas de cores da comunidade, salvar e acessar suas paletas de cores favoritas de quase todos os lugares e usá-las em seus projetos com apenas alguns cliques.

Paletton – É semelhante a Coolors e Color CC, com a principal diferença sendo que você não está limitado a apenas 5 tons. Essa é uma ótima ferramenta para usar quando você tem cores primárias e deseja explorar tons adicionais. Se você quiser explorar todos os diferentes tipos de paletas de cores de que falamos acima, essa é uma ótima ferramenta para aprender sobre elas.

Depois disso, sua vida pode ficar muito mais fácil para escolher a sua paleta de cores? Queremos saber no Facebook e no Twitter como você escolher a sua paleta também.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Conheça a nova linha para profissionais criativos

Os últimos lançamentos da Wacom, a nova geração da Intuos Pro, Intuos Pro Paper Edition…

Leia mais >