Um espectro de possibilidades: o guia de cores da interface do usuário Go-to

Publicados: 2022-03-11

Não tem jeito: a cor é o elemento criativo mais impactante no design visual. Dos cenários encantadores da cenografia às intrincadas composições da pixel art, uma compreensão robusta da cor é a chave mestra para uma comunicação convincente. Precisa de provas?

Quando os participantes de um estudo recente focado na marca foram desafiados a desenhar os logotipos de 10 corporações icônicas, apenas 16% conseguiram lembrar formas precisas e recursos de design. No entanto, quando solicitados a identificar a paleta de cores de uma marca, o número de respostas corretas disparou para 80%.

A cor também desempenha um papel influente no mundo do design de interface do usuário. Os produtos digitais com os quais interagimos diariamente dependem do uso estratégico da cor para comunicar informações importantes, por isso é fundamental que os designers de UX e UI entendam como manejar as cores com sabedoria.

Neste guia, vamos:

Desmistifique os fundamentos da teoria das cores,
Fornecer princípios sólidos para trabalhar com cores em interfaces digitais,
Compartilhe recursos úteis para criar reconhecimento de cores e
Capacite os designers de interface do usuário a criar seus próprios esquemas de cores notáveis.

O objetivo deste guia é a competência em cores, seguida pela confiança em cores, tudo para uma incrível execução de cores nas interfaces de usuário que encontramos todos os dias.

Uma paleta de cores da interface do usuário pode ser um arco-íris de cores.

Curso intensivo: teoria das cores para designers de interface do usuário

A teoria das cores é um amplo campo de estudo com sua própria terminologia, metodologia e fundamentos científicos. Pode ser complicado, mas não é isso que queremos. O que queremos é uma compreensão da cor que possa ser aplicada com uma precisão extremamente rápida. Queremos usar as cores da mesma forma que usamos as formas – sem esforço, com ousadia e com eficácia.

Para usar as cores dessa maneira, os designers de interface do usuário devem ter uma compreensão sólida desses conceitos básicos da teoria das cores:

A cor é relativa.
A sobrecarga de saturação mata a vibração das cores.
O contraste simultâneo tem prós e contras.
Esquemas de cores básicos são os melhores.
O matiz sempre afeta o valor.

Vamos cavar.

A cor é relativa

A cor nunca está sozinha. Como o olho humano e o cérebro trabalham juntos para ver uma cor, eles são sempre influenciados por:

Luz brilhando na cor
Outras cores ao redor da cor

Confira este exemplo da natureza:

Relatividade de cores no design e na natureza da interface do usuário — Observar sombras e realces na natureza é uma maneira fácil de ver a relatividade das cores em ação.

R: O cérebro e o olho trabalham juntos para nos ajudar a entender que a flor como um todo é, na verdade, vermelha brilhante.

B & C: O marrom escuro da sombra da flor (B) faz com que o destaque na crista da pétala (C) pareça muito mais brilhante do que a cor marrom opaca que realmente é. Essencialmente, a luz que brilha na crista da pétala e a cor da sombra trabalham em conjunto para enganar os olhos e intensificar o destaque.

Aqui está outro exemplo que mostra como a cor pode ser enganosa:

Relatividade de cores e design de interface de usuário — Ambas as caixas internas têm a mesma tonalidade, saturação e brilho. No entanto, a caixa interna à esquerda parece ser mais escura do que a da direita porque sua cor ao redor é mais clara.

No design de interface do usuário, a relatividade das cores nem sempre é tão óbvia, portanto, as cores dentro de um esquema devem ser testadas umas contra as outras. Por quê? Porque essa seleção de cores lindamente organizada em seu guia de estilo pode se tornar problemática quando aplicada a uma interface.

Erros de cores no design da interface do aplicativo — As cores que ficam ótimas como amostras isoladas nem sempre funcionam juntas em uma interface de usuário. Testar cores umas contra as outras, especialmente para contraste, é uma etapa simples, mas crucial no processo de design de interface do usuário.

A grande sacada? Não mime seus conceitos de cores. Se uma amostra de amarelo acentuado parecer exuberante quando cercada por espaços em branco no Sketch, mas colidir com o esquema de cores dominante de uma interface do usuário, encontre uma solução diferente.

A sobrecarga de saturação mata a vibração da cor

A saturação de cor é essencial para a vibração da cor. No entanto, um esquema montado em torno de nada além de cores altamente saturadas sobrecarrega o olho e a vibração é diminuída. Com cores, menos é mais. Uma cor altamente saturada torna-se vibrante quando usada em conjunto com cores menos saturadas.

Saturação e brilho de paletas de cores bonitas — **Esquerda: As cores neste agrupamento estão com 100% de saturação e brilho, mas nenhuma cor se destaca como mais vibrante do que o resto, e o esquema geral é berrante.** **Direita: O laranja superior esquerdo e o roxo superior direito não mudaram, mas ambos parecem mais vibrantes, e o esquema é mais harmonioso porque as cores ao redor são menos saturadas.**

Contraste simultâneo tem prós e contras

O contraste simultâneo ocorre quando complementos de cores com o mesmo valor são colocados adjacentes um ao outro. O efeito é tão intenso que faz vibrar ou pulsar o ponto onde as duas cores se encontram.

Combinações de cores da interface do usuário de contraste simultâneo — Observe a tensão visual onde o azul e o laranja se encontram. Isso é contraste simultâneo, um efeito de cor dinâmico que os designers de interface do usuário podem usar com grande vantagem.

Para designers de interface do usuário, o contraste simultâneo pode ter resultados positivos e negativos, por isso é importante entender como controlar a potência desse fenômeno visual.

Por exemplo, em uma interface projetada em torno de uma variedade de azuis, usar um laranja complementar com o mesmo valor da cor âncora azul seria uma ótima maneira de chamar a atenção para os ícones de notificação.

No entanto, essa mesma combinação laranja e azul seria indutora de enxaqueca se usada para o texto e o plano de fundo dos menus suspensos.

Contraste simultâneo no design moderno da interface do usuário: paleta de cores da interface do usuário ruim — O contraste simultâneo não é apropriado para todas as decisões de design de interface do usuário, especialmente quando o texto está envolvido.

Esquemas de cores básicos são os melhores

Arco-íris são lindos – na natureza. No design de interface do usuário, a cor deve ser usada de forma mais seletiva ou sobrecarrega a experiência. Mesmo quando as marcas têm paletas de alto impacto com uma ampla gama de opções, é melhor mostrar contenção e construir interfaces de usuário em torno de esquemas de cores simples.

Aqui estão dois planos infalíveis para criar um esquema básico de cores da interface do usuário:

1. Esquemas de cores de IU análogas

Esses esquemas agradáveis aos olhos consistem em cores agrupadas de perto na roda de cores.
Esquemas de cores análogos são fáceis de encontrar em fotos de ambientes naturais, especialmente plantas, e tendem a ser visualmente calmantes.
A variedade de esquemas análogos vem de mudanças na saturação e brilho, não grandes mudanças de matiz.
Ao usar um esquema análogo, tente adicionar uma cor altamente saturada diretamente na roda de cores para criar ênfase em uma interface.

Cores de design de interface do usuário análogas — É fácil criar um “clima visual” em esquemas análogos, escolhendo entre cores quentes e frias e experimentando a saturação.

2. Esquemas de cores de IU complementares

Esquemas de cores complementares são baseados na interação de complementar cores frias e quentes que existem uma em frente à outra na roda de cores.
A variedade de cores é alcançada alterando a saturação e o brilho entre os extremos complementares.
Usar muitas cores brilhantes e altamente saturadas prejudica o impacto dos esquemas complementares.

Cores de design de interface do usuário complementares — Vermelho e verde são as cores complementares, e uma seleção de variantes menos saturadas unem o esquema.

Hue sempre impacta o valor

Isso pode parecer estranho, mas as cores têm valores de cinza correspondentes. Aqui está a prova:

Design de interface do usuário da teoria das cores

Na imagem acima, temos uma gama de matizes com 100% de brilho e saturação, mas veja o que acontece quando essas cores são convertidas em tons de cinza:

Cores convertidas em design de interface do usuário em escala de cinza — Embora as cores na linha superior estejam com 100% de brilho e saturação, seus valores de escala de cinza correspondentes variam drasticamente.

Estrondo! Toda uma gama de valores de cinza é revelada. Por que isso importa para os designers de interface do usuário? Uma palavra: contraste .

Mude sua mente para tons de cinza por um momento. Se você estivesse procurando criar contraste, você usaria um valor de cinza de 40% em cima de 50%? Claro que não, mas isso é exatamente o que é arriscado quando o tom é deixado de fora da equação de contraste de cores.

Lembre-se, matiz sempre afeta o valor.

Procuravam-se designers de UI freelancers em tempo integral nos EUA

4 Princípios Essenciais de Cores para Interfaces Digitais

Agora que simplificamos a teoria das cores e relacionamos seus principais conceitos ao design da interface do usuário, é hora de dar uma olhada mais focada no papel que as cores desempenham nas interfaces digitais. Esses são os quatro princípios de cores que devem ser considerados desde os primeiros esforços de cada projeto de design de interface do usuário.

A relação entre texto e cor é crucial.
A acessibilidade de cores não pode ser ignorada.
O contraste é essencial, mas não é uma panacéia de design.
A cor funciona melhor quando aplicada proporcionalmente.

A relação entre texto e cor é crucial

A cor afeta a legibilidade. A maioria dos designers de interface do usuário entende isso em princípio, e é por isso que não vemos muitas interfaces com texto de corpo verde em fundos vermelhos. Em vez disso, a tensão entre texto e cor surge sutilmente, se infiltrando nos componentes comuns da interface do usuário, como formulários, botões, cabeçalhos e ícones.

Mantenha uma relação texto/cor saudável seguindo estas diretrizes simples:

Sempre evite o baixo contraste entre o texto e o plano de fundo.
Não use cores complementares para texto e plano de fundo, especialmente quando as cores tiverem brilho e saturação semelhantes (por exemplo, texto amarelo em um plano de fundo roxo).
Mesmo em fundos brancos, não defina o corpo do texto em cores brilhantes. Preto e cinza escuro são os mais fáceis de ler.

Interface de usuário bonita com contraste de cores ruim — O esquema de cores desta nota de status pode ser visualmente atraente, mas a experiência do usuário é prejudicada pelo contraste insuficiente entre o plano de fundo e o texto.

A acessibilidade de cores não pode ser ignorada

A cor é comunicativa, mas não pode ser o único elemento de design usado para transmitir informações em uma interface do usuário. Por que não? Porque alguns usuários da web percebem a cor de forma diferente (ou não) do que a maioria da população.

Por exemplo, uma pessoa que sofre de daltonismo pode não saber quando um ícone de produto está em seu estado “pressionado” se a única diferença no ícone for uma mudança de cor.

Exemplos de design de acessibilidade de cores — Ao transmitir informações aos usuários, os designers de interface do usuário devem se esforçar para a acessibilidade da Web combinando alterações de cores com dicas visuais adicionais, como formas e preenchimentos.

Além disso, algumas pessoas têm dificuldade em ver componentes importantes da interface do usuário com baixo contraste de cores com o plano de fundo de uma interface. Sites como Colorable e Contrast Ratio permitem que os designers testem rapidamente uma variedade de combinações de cores para acessibilidade de contraste.

O contraste é essencial, mas não é uma cura de design

Sim, o contraste de cores no design da interface do usuário é importante. Planeje-o, implemente-o, beneficie-se dele. Mas não espere acenar como uma varinha mágica e consertar um design ruim.

Forma, espaço, tamanho e outros elementos de design não devem ser ignorados. O contraste de cores pode fazer uma interface de usuário horrível parecer atraente, mas não corrigirá uma experiência ruim do usuário.

A cor funciona melhor quando aplicada proporcionalmente

Imagine um aplicativo de notícias em que todas as instâncias de texto são definidas em maiúsculas ou um site de comércio eletrônico projetado em uma grade de imagens 9x9. Ambos seriam terríveis!

Maus exemplos de hierarquia de design — Como o título, a data, o autor e o corpo do texto têm o mesmo tamanho de fonte, a experiência de leitura é prejudicada e nenhuma informação se destaca. Um problema semelhante ocorre quando os designers de interface do usuário sobrecarregam as interfaces com cores.

Designers de interface do usuário experientes empregam elementos de design como tipografia e repetição proporcionalmente para aprimorar a hierarquia de design. A cor merece a mesma consideração cuidadosa. No design de interface do usuário, o uso de muitas cores confunde a forma como as informações são percebidas.

Recursos de cores para progresso contínuo

Aqui está uma verdade inconveniente: projetar com cores é uma habilidade, e habilidades devem ser desenvolvidas. A maioria dos designers de interface do usuário tem um senso inato de quais cores ficam bem juntas (também conhecido como gosto de cor), mas isso nem sempre se traduz em aplicação.

Para realmente dominar as cores e ver seu impacto total no design da interface do usuário, os designers devem praticar. Felizmente, existem muitos recursos para ajudar no aprendizado contínuo de cores e no desenvolvimento de habilidades.

Ctrl+Pintar

Se você é um designer de interface do usuário que deseja obter confiança imediata nas cores, comece com o ctrlpaint.com, um site dedicado à instrução de pintura digital. Pintura digital? Mesmo?

Absolutamente. O artista conceitual profissional Matt Kohr ensina o uso de cores digitais por meio de tutoriais em vídeo rápidos e exercícios práticos. O currículo é maravilhosamente simples e centrado em “pintar o que você vê”, tanto no mundo físico quanto na imaginação.

Comece com a biblioteca de vídeos gratuita (Seção 11) antes de passar para os exercícios mais intensivos do Color Starter Kit .

Tutoriais de teoria das cores digitais — As pinturas conceituais digitais de Matt Kohr exibem um domínio da teoria das cores, e seus vídeos instrutivos são divertidos e fáceis de seguir.

Josef Albers e o aplicativo de interação de cores

A compreensão contemporânea da relatividade das cores foi fortemente explorada e avançada pela abordagem prática- antes- teoria do artista/educador Josef Albers.

Albers propôs que uma única cor poderia ter “muitas faces” e encorajou o jogo extensivo e a experimentação entre seus alunos na esperança de que “os olhos fossem abertos” para ver a cor como ela realmente se comporta no mundo real (em oposição às cores simbólicas que imaginamos em nossas mentes).

Em 1963, Albers escreveu Interaction of Color , um livro-texto que continua a ser altamente influente no ensino mundial de arte e design. Para comemorar o aniversário de 50 anos da publicação do livro, a Universidade de Yale lançou um aplicativo interativo para iPad que contém o texto completo, mas também permite que os usuários joguem e experimentem as placas de cores de Albers.

Aplicativo de esquemas de cores de design de interface do usuário — Uma das melhores maneiras de melhorar o trabalho com cores é a experimentação. O aplicativo Interaction of Color é uma maneira fácil e intuitiva para designers de interface do usuário criarem paletas personalizadas e verem como as cores se relacionam umas com as outras.

Para designers de interface do usuário, o aplicativo Interaction of Color oferece a oportunidade de experimentar exercícios de cores analógicas em um ambiente digital e ver em primeira mão como a relatividade das cores afeta as interfaces do usuário.

André Loomis

Durante a primeira metade do século 20, Andrew Loomis foi um proeminente ilustrador e instrutor da Academia Americana de Arte em Chicago, mas seu legado duradouro é o de autor. Loomis escreveu seis livros sobre arte comercial e design e cobriu uma variedade de tópicos, desde desenho de figuras até colocação de produtos.

Cores de design de interface do usuário da pintura tradicional — Embora originalmente escrito para pintores e ilustradores, o livro *Creative Illustration* de Andrew Loomis oferece informações práticas sobre cores nas quais os designers de interface do usuário podem confiar ao projetar interfaces.

Em seus livros Creative Illustration e Eye of the Painter (ambos disponíveis em archive.org), Loomis lança uma série de linhas duradouras que permanecem relevantes para o campo moderno do design de interface do usuário:

O maior erro na cor, e que causa falta de unidade e harmonia, é ter muitas cores na paleta.

Quaisquer duas cores serão harmoniosas quando uma ou ambas contiverem um pouco da outra.

A cor se presta a experimentar mais do que qualquer outro elemento de beleza.

Interfaces de outros designers

Uma vez que um nível básico de competência de cores é alcançado, a criação de esquemas de cores floresce em uma busca fascinante. Cada interface encontrada torna-se uma oportunidade de aprendizado e crítica, e as observações são abundantes.

Este é o estágio de desenvolvimento de um designer de interface do usuário quando referenciar o trabalho de outros designers se torna empoderador. Como assim? Porque a referência se move do destino para a jornada, do ponto final para a inspiração.

Exemplos de esquemas de cores da interface do usuário — Procurando por inspiração de cores de interface? Experimente o site do Webby Awards. Está cheio de exemplos incríveis organizados em categorias específicas do setor.

Os designers de interface do usuário de todos os níveis de habilidade se beneficiam ao manter um registro contínuo dos esquemas de cores da interface do usuário encontrados. Faça capturas de tela, mantenha um diário de cores físico, inicie um quadro de humor - o que for necessário para imprimir momentos de iluminação de cores para implementação futura.

A cor é muito importante para ser ignorada

Quando se trata do design de interfaces digitais, a cor não é uma consideração opcional. Mesmo em UIs que empregam cores mínimas (ou aquelas que são totalmente em preto e branco), é imperativo que os designers de UI entendam por que a cor está ou não sendo usada e como isso afeta a experiência do usuário.

Também é importante que os designers de interface do usuário tenham a capacidade de gerar e implementar esquemas de cores originais. Fazer referência ao trabalho de outros designers e produtos digitais é uma prática que vale a pena, mas isso se torna limitante quando é o único método de exploração de cores realizado durante o processo de design. Há imenso valor em ser capaz de capturar pares de cores vistos no mundo real ou no olho da mente.

Se você é um designer que se esforçou para usar cores habilmente ou já pensou: “Eu realmente não tenho talento para cores”, não desanime. Projetar com cores não é uma forma de magia criativa ou dom especial; é uma disciplina prática baseada em técnicas simples que podem ser repetidas e melhoradas.

Lembre-se, a cor é a chave mestra para uma comunicação de design clara e atraente. Seja implementado com cuidado ou abandono imprudente, afeta a conversão, o reconhecimento da marca e a experiência do usuário. Para o designer de interface do usuário, a cor é uma ferramenta poderosa que simplesmente não pode ser ignorada.

• • •

Leia mais no Blog Toptal Design:

O papel da cor na UX
Criando um guia de estilo de interface do usuário para melhor UX
UX e a importância da acessibilidade na Web
Arte vs. Design – Um Debate Atemporal
Projetando para ambientes interativos e espaços inteligentes