0:00
Oi, eu sou a Jaqueline e eu trabalho na Taqtile como designer de interface.
Hoje eu vou falar pouco sobre os principais elementos de uma
interface: a cor.
A gente vai saber um pouco sobre o que são as cores,
como elas são classificadas e como o designer as utiliza.
Mas, o que são cores?
Bom, todo mundo que enxerga cores sabe identificar o que é o rosa,
o que é o verde ou que é o preto, mas qual a definição exata da cor?
As cores são definidas como percepções visuais.
A cor tem a ver com os olhos,
com a retina e com a informação presente no seu cérebro.
Por isso, incrivelmente, ela não é igual para todo mundo.
Em exemplo bem polêmico disso foi aquele vestido azul e preto para alguns e
branco e dourado para outros.
As cores são classificadas como primárias, secundárias e terciárias.
Na classificação tradicional da cor, a cor primária são aquelas cores puras,
isto é, aquelas cores que não têm mistura com outras cores, como o azul,
o vermelho e o amarelo.
A mistura de duas cores primárias formam as cores secundárias, como o verde,
o roxo e o laranja.
Já as cores terciárias são aquelas cores formadas a partir de uma combinação de uma
cor primária com uma cor secundária.
Existe também uma classificação relativa à temperatura das cores.
Ela é facilmente percebida por nós como cores neutras,
que são aquelas cores com pouca reflexão da luz, como o branco, os tons de cinza,
os tons de bege e marrom e elas servem como bom fundamento das demais cores.
E também as cores quentes,
que são as cores que transmitem aquela sensação de calor, como o vermelho, o laranja
e o amarelo e elas são associadas ao sol e denotam dinamismo, movimento e vivacidade.
Por outro lado, as cores chamadas frias são as cores que
correspondem a uma atitude de introspecção e seriedade,
ao mesmo tempo que originam a sensação de relaxamento e tranquilidade.
Elas englobam as cores verde e violeta.
Por outro lado,
as chamadas cores frias correspondem às atitudes de introspecção, seriedade
e ao mesmo tempo originam uma sensação de relaxamento e tranquilidade e inocência.
Elas englobam as cores azul, verde e violeta.
Existe também o círculo cromático, mas o que é isso?
Ele é uma representação simplificada das cores percebidas pelo olho humano.
O círculo cromático é composto por 12 cores, sendo as três primárias,
as três secundárias e as seis terciárias.
Esse instrumento é muito utilizado na hora de compor uma paleta de cores,
servindo como guia na criação de combinações mais harmônicas,
que a gente vai ver mais para frente.
As cores também são divididas alguns sistemas.
Os mais conhecidos são os sistemas CMYK e RGB.
Basicamente o CMYK é o sistema de cores utilizado gráficas e pigmentos.
Então, ele está presente nos impressos: nos livros, nos cartazes,
cartões de visitas e abrange as cores ciano, magenta, amarelo e preto.
Já o RGB, com as cores primárias vermelho, verde e azul, é o sistema de cores
utilizado loops, ou seja, recursos visuais, digitais como nas telas de
aplicativos, dos sites e até mesmo nesse vídeo que você está assistindo agora.
Nele, a gente consegue chegar a uma variedade de cores maior do que o CMYK,
que utiliza pigmentos e fica limitados a esses pigmentos.
Como a gente explora a cor no dia-a-dia?
A cor é usada todos os lugares: na arte, no design e até na arquitetura as
cores são usadas para provocar sentimentos e sensações nas pessoas.
As cores podem se combinar para gerar esses efeitos.
Por exemplo, pode-se conseguir com a correta combinação
um ambiente mais tranquilo, uma sensação mais calma e até um alerta de perigo.
A percepção da cor ela é muito importante para a compreensão de
ambiente e esse é um recurso muito explorado, por exemplo, no cinema com
a predominância de cores mais quentes para criar uma atmosfera mais quente e
confortável ou até cores frias para fazer sentir a solidão de personagem numa cena.
É importante lembrar que essa percepção relacionada a determinadas cores varia
muito de pessoa para pessoa, especialmente culturas e idades diferentes.
Nas interfaces digitais, como aplicativos e sites, o uso correto da cor pode ajudar
o usuário a completar algumas tarefas e entender o que está acontecendo na tela.
Então, nós podemos utilizá-las para comunicar erros, sucesso e até para chamar
a atenção para o tipo de tarefa que você quer que o usuário realize.
Vamos supor que você escolheu desenhar um aplicativo.
Você pode utilizar uma cor só ou combinar duas ou mais cores.
Uma dessas cores vai ser a cor primária,
ela será a cor que mais vai aparecer no seu aplicativo.
É como o azul no Facebook, por exemplo.
E a segunda cor, que pode ser chamada de cor acessório ou cor secundária,
é a cor que vai servir para auxiliar a cor primária do seu app, para dar uma
quebrada na seriedade de uma cor só ou criar uma paleta mais interessante também.
Se você tiver uma tarefa que você quer muito que o usuário realize,
como uma ação, um botão que você quer que ele clique porque via dar muito cadastro,
por exemplo, você pode utilizar esse artifício da cor para chamar a atenção
do usuário e direcioná-lo para aquela ação.
Então, a cor é muito importante,
pode te ajudar inclusive a hierarquizar as informações na sua interface.
Além disso, existem algumas cores que são mais padrões, tanto online quanto offline,
que é o caso do vermelho, utilizado casos de erro, e o verde, para sucesso.
Então, é sempre bom considerar esse significado tradicional das cores,
quando você for dar esse feedback para o seu usuário para acabar não confundindo.
Você deve estar se perguntando: "Ok, mas como isso funciona na prática?
Eu não sei combinar cores.
Como eu monto uma paleta?" Calma.
Lembra o círculo cromático?
Ele vai ajudar a gente agora.
No círculo cromático a gente pode identificar facilmente as cores
complementares, análogas,
para formar combinações mais harmônicas na sua interface.
Mas o que é isso?
As cores complementares são as cores que estão diretamente opostas no círculo
cromático.
Então, elas servem para criar uma paleta com bastante contraste,
como a combinação de laranja, azul e amarelo e violeta, por exemplo.
Tem as cores complementares diretas,
que são as cores que estão posições no círculo cromático.
Elas servem para criar uma paleta com bastante contraste, como a combinação
de laranja com azul, amarelo com violeta e o vermelho com o verde.
Porém, é importante tomar cuidado, porque por serem bem contrastantes,
elas não funcionam todas as aplicações.
Imagina você tentar ler um texto verde cima de um fundo vermelho.
Não vai funcionar muito.
As cores análogas são as três cores sequência no círculo cromático,
se você olhar o círculo cromático, você ver a sequência.
É uma cor primária e as suas adjacentes.
A combinação delas resulta numa harmonia com cores de baixo contraste.
E tem também a combinação tríade,
que é feito utilizando três cores equidistantes do círculo cromático.
É como se você desenhasse um triângulo mesmo no círculo,
no círculo cromático, e o resultado, por exemplo,
você pode chegar numa combinação do verde, do laranja e do roxo.
Geralmente essas combinações dão bastante certo,
inclusive essa técnica de utilizar cores análogas e complementares,
elas são usadas para harmonizar o ambiente, faz parte de diversos segmentos,
desde interface, publicidade e até mesmo na moda.
Existem ferramentas que identificam essas harmonias cromáticas para a gente.
Tem uma ferramenta da Adobe, que a gente vai deixar link aqui para vocês,
e alguns sites onde você encontra paletas pré-montadas, que é o caso do Coolors.
Se você chegar a desenhar ou montar uma interface no Android, tem até uma coleção
de cores já do Android, no Material Design, que é o guia visual do Android.
Então, você pode pegar algumas cores lá que são comumente usadas nas interfaces
do Android.
No início pode parecer complicado, eu sei, mas depois de um tempo vai acabar se
tornando mais natural, vai ficar cada vez mais fácil harmonizar mais cores.
Depois de toda essa informação, é legal se inspirar com combinações também.
Combinações de cores que os designers andam experimentando por aí,
aplicativos e sites.
Existe uma variedade de lugares onde você pode buscar inspirações ou até fazer uma
pesquisa com uma paleta específica de cor, como é o caso do Dribble.
Ele tem uma ferramenta onde você consegue escolher exatamente a cor que você quer
e ver diversos trabalhos com a paleta similar.
É bem legal.
Além do Dribble, outros sites legais que você encontrar trabalhos incríveis de
interface, é o Collect UI, Designspiration e o Behance.
E a gente vai deixar os links para vocês na descrição.
Como deu para perceber um pouco, o universo da cor é enorme, cheio de possibilidades,
principalmente quando ele está envolvido no processo criativo.
Então, se você quiser saber mais sobre esse universo da cor,
quiser estudar mais a fundo sobre esse assunto, existem livros bem legais,
como "A Cor no Processo Criativo" da Lilian Miller, da editora Senac,
"O Guia Completo da Cor" que também foi publicado pela editora Senac
e "A Psicologia das Cores" da Eva Heller.
Então, é isso por hoje.
Artur Vilas Boas
André Leme FleuryProfessor
