introdução à teoria das cores e aplicação prática
DESCRIPTION
Faça download do arquivo PDF desta apresentação para ler as anotações dos slides e entender melhor o conteúdo desta palestra. É grátis! ======================================================= Designers usam padrões e conceitos simples que são reconhecidos quase que de maneira instintiva pelos olhos do usuário. Um deles é o uso das cores, que são escolhidas a dedo para representarem as emoções desejadas pelo designer — e isso vai bem além de vermelho para erros e verde para sucesso. Durante 50 minutos, você entenderá como as cores estão interligadas com as emoções e como aplicá-las em seus projetos.TRANSCRIPT
Presenter
Presentation Notes
Esta palestra vai falar sobre como as cores funcionam, os significados que elas carregam e como criar uma paleta de cores interessante. Ah, também teremos nesta palestra Breaking Bad.
Breaking Bad
Presenter
Presentation Notes
Mas é preciso explicar o básico do funcionamento das cores antes de falar desta série que quase todo mundo conhece. Na verdade, as cores são como nossos olhos percebem a luz refletida sobre a superfície dos objetos. Se todas as luzes fossem apagadas agora, não conseguiríamos enxergar nada, nenhum objeto e nenhuma cor, certo?
Onda eletromagnética
Tamanho equivalente ao de células e protozoários
Presenter
Presentation Notes
A luz natural, ou a luz fluorescente dessa sala, é uma onda eletromagnética, de comprimento variável, e o olho humano é sensível a ela. Consideramos que a luz natural é branca e “carrega” todas as cores em si.
Vermelho Laranja Amarelo Verde Azul Anil Violeta
700nm mais quente
400nm mais frio
1nm = 0,000000001m
Presenter
Presentation Notes
Vermelho, laranja, amarelo, verde, azul, anil e violeta, do maior comprimento de onda para o menor, do mais quente pro mais frio. Quando a luz atinge a superfície dos objetos, ela pode refletir por completo, parcialmente ou não refletir, e revelar a cor presente naquele objeto. O funcionamento básico das cores é este:
Superfície branca Superfície vermelha Superfície preta
Presenter
Presentation Notes
• Se o objeto refletir a luz por completo, veremos a cor branca; • Se ele refletir uma parte da luz, veremos parte constante da onda eletromagnética atingindo nossos olhos e, dependendo do valor do comprimento de onda refletida, a cor do objeto poderá ser vermelha, azul esverdeada, ou outra cor qualquer; • Se o objeto não refletir a luz, absorvendo toda a onda eletromagnética, enxergaremos a cor preta. A cor resultante depende da composição molecular do objeto em que a luz branca incide. Porém, existem alguns fatores que podem influenciar nossa percepção das cores.
Presenter
Presentation Notes
Como neste pato de borracha, por exemplo. Vamos imaginar que na hora da foto, a luz que atingia a superfície dele refletia somente esse amarelão bonito.
Presenter
Presentation Notes
Se pegássemos uma cantetinha hidrocor e pintássemos o objeto com uma leve camada de tinta azul. O amarelo muda e agora vemos esse verde aqui.
Cores subtrativas
Presenter
Presentation Notes
Se continuássemos a pintar esse objeto amarelo com mais e mais cores, talvez ele ficasse preto. Chamamos de subtrativas cores que quando somadas (misturadas) ou sem iluminação adequada tendem à cor preta.
Presenter
Presentation Notes
Bem, vamos limpar agora o coitado. E se usássemos luzes coloridas? Vamos usar uma luz azul, como fizemos com as canetinhas. Ele voltou a fica verde.
Presenter
Presentation Notes
E se adicionássemos mais luzes coloridas? Que tal vermelho? Ficou meio rosa.
Cores aditivas
Presenter
Presentation Notes
Pra finalizar, uma luz verde. E voltamos a um estágio muito parecido com o branco original. Cores que tendem ao branco quando misturadas são chamadas de aditivas.
Cores subtrativas Cores aditivas
Presenter
Presentation Notes
Ciano (um azul claro), magenta (um tipo de vermelho) e amarelo são as cores primárias das subtrativas, presentes nos objetos e na produção gráfica. Vermelho, verde e azul são as primárias das cores aditivas, presentes nas luzes e telas luminosas dos aparelhos digitais. Apesar de serem classificadas conforme seu comportamento, cores aditivas e cores subtrativas conseguem gerar praticamente a mesma gama de cores. Observe que as cores primárias de uma são as cores secundárias da outra e vice versa. E, para os olhos humanos, o vermelho de um objeto real (cor subtrativa) pode ser o mesmo vermelho da foto digital deste objeto vista em um smartphone (cor aditiva).
Cores aditivas
#000000 #39CCCC #FFDC00 #B10DC9
#000000 #39CCCC #FFDC00 #B10DC9
Presenter
Presentation Notes
E quem trabalha com produção digital (internet, vídeo, artes gráficas digitais) já sabe que é possível trabalhar com este números hexadecimais para indicar cores. São seis dígitos, que vão do zero a nove, da letra A até a letra F, indicando em pares as quantidades de vermelho, verde e azul que a cor escolhida possui.
A cor de um objeto é percebida pelos olhos porque a luz que incide sobre ele é refletida.
Presenter
Presentation Notes
Só pra gravar o que foi dito até agora: a cor de um objeto é percebida pelos olhos porque a luz que incide sobre ele é refletida. A mesma cor pode ser simulada através das telas luminosas dos aparelhos digitais. Isso acontece pois o entendimento das cores é feito em nosso cérebro. E ele é muito fácil de ser enganado e gosta muito fazer associações do tipo “maçãs são vermelhas, suculentas e saudáveis”.
Presenter
Presentation Notes
Mesmo na penumbra, ele identifica a cor vermelha da maçã. Os olhos não enxergam essa cor viva mas o cérebro nem percebe a nova cor da maçã, um vermelho escuro, assumindo pela forma que se trata de uma fruta “vermelha, suculenta e saudável”. Porém ele pode estranhar completamente coisas deste tipo.
Presenter
Presentation Notes
Estranho né?
Presenter
Presentation Notes
As luzes do semáforo seguem um padrão uniforme ao redor do mundo: verde para seguir, amarelo para chamar a atenção e vermelho para parar. Sabemos que o vermelho possui maior comprimento de onda e talvez tenha sido escolhido por isso, pois nosso cérebro percebe a tensão visual que o vermelho cria e tende fazer o corpo reagir de acordo.
Presenter
Presentation Notes
Além disso, o vermelho também é a cor do sangue que corre dentro da gente, e o cérebro deve ter aprendido em algum estágio da evolução humana que é não muito interessante se deparar com a cor vermelha do sangue. Ou ficar alerta com a cor amarela, depois que foi atacado diversas vezes por abelhas.
Presenter
Presentation Notes
Através desse “aprendizado evolutivo”, a civilização ocidental inconscientemente foi associando significados às cores. Talvez algum grupo de cientistas já tenha comprovado o efeito das cores no cérebro. E esse conhecimento é levado em conta quando algum criativo começa a trabalhar em projetos gráficos. Vamos ver agora alguns destes significados e conferir um exemplo de uso da cor citada em sites da internet.
Vermelho
Ação Aventura Fogo Luxúria Raiva Coragem Rebeldia
Paixão Força Energia Amor Liderança Masculinidade Perigo
Presenter
Presentation Notes
Vamos começar pela cor vermelha. A ela foram atribuídos os valores de ação, aventura, fogo, luxúria, raiva, coragem, rebeldia, paixão, força, energia, amor, liderança, masculinidade e perigo. Junto com o laranja, o vermelho aumenta o apetite. Ela é uma das cores prediletas entre as pessoas, além de significar mundialmente a mesma coisa: “pare”.
joingdcmb.ca
Presenter
Presentation Notes
http://joingdcmb.ca/ Aqui temos um exemplo de site que abusa do vermelho em seu layout. Mas abusa mesmo. Chega a ser cansativo de olhar mas não há como negar que o site causa impacto e aproveita bem os atributos positivos da cor vermelha.
Laranja
Energia Vitalidade Celebração Excitamento Aventura Criatividade Equilíbrio
Presenter
Presentation Notes
O laranja é entendido como sinônimo de energia, vitalidade, celebração, excitamento, aventura, criatividade e equilíbrio. Essa cor é usada para remeter ao outono, além de ser usada em itens básicos de segurança como cones, coletes salva vidas e capacetes.
en.fantazista.ru
Presenter
Presentation Notes
http://en.fantazista.ru/ Este site é um ótimo exemplo de aplicação da cor laranja na internet. Ele pertence a uma escola de treinamento esportivo, uma empresa que deve deixar claro que seus atletas estão preparados pra ajudar qualquer time a vencer, com muita energia e vitalidade.
Felicidade Otimismo Iluminação Criatividade Calor Jovialidade Diversão
Velocidade Concentração Idealismo Riqueza Dinheiro
Presenter
Presentation Notes
Felicidade, otimismo, iluminação, criatividade, calor, jovialidade, diversão, velocidade, concentração, idealismo, riqueza e dinheiro são os valores da cor amarela. O amarelo consegue chamar mais atenção do que qualquer outra cor em um layout. A cor ainda pode estar relacionada à santidade em algumas religiões.
kurkawolna.pl
Presenter
Presentation Notes
http://kurkawolna.pl A cor amarela foi usada neste site para convidar o visitante a interagir e explorar a página. Tudo é muito inusitado e divertido e, apesar da barreira linguística, fica evidente a presença do humor.
Verde Crescimento Renascimento Frescor Revitalização Fertilidade Natureza
Primavera Juventude Desenvolvimento Sorte Esperança
Presenter
Presentation Notes
O verde pode ser entendido como símbolo de crescimento, renascimento, frescor, revitalização, fertilidade, natureza, primavera, juventude, desenvolvimento, sorte e esperança. Tudo que fala de ecologia hoje em dia é verde.
www.mooncampapp.com
Presenter
Presentation Notes
http://www.mooncampapp.com/ O site usa o verde para reforçar a ideia de revitalização que o aplicativo traz no uso do Basecamp, um site de gerenciamento de projetos. Com um design retro futurista, o site aponta seus melhores recursos e convida o visitante a testar o aplicativo através da cor.
Azul
Dignidade Inteligência Pureza Paz Segurança
Confiança Calma Harmonia Liberdade Tecnologia
Presenter
Presentation Notes
Os valores do azul são dignidade, inteligência, pureza, paz, segurança, confiança, calma, harmonia, liberdade e tecnologia. O azul é bem aceito em qualquer ocasião, por ser a cor favorita da maioria das pessoas, mas pode deixar o projeto monótono. O ideal é sempre combinar o azul com outra cor pra obter um efeito mais interessante.
jilsanderfragrances.com
Presenter
Presentation Notes
http://jilsanderfragrances.com/ O azul do site parece estar alinhado com a proposta da fragrância do perfume promovido, criado para o homem moderno, inteligente, confiante e seguro.
Roxo
Nobreza Poder Magia Mistério Espiritualidade
Criatividade Dignidade Realeza Sabedoria
Presenter
Presentation Notes
O roxo simboliza nobreza, poder, magia, mistério, espiritualidade, criatividade, dignidade, realeza e sabedoria. Essa cor possui diferentes interpretações conforme a faixa etária do público alvo. Alguns podem rejeitar completamente seu uso e outros adorar. Em muitas culturas pode significar luto ou morte.
www.alfredapp.com
Presenter
Presentation Notes
http://www.alfredapp.com/ Este aplicativo faz mágicas, literalmente falando: além de fazer pesquisas dentro dos computadores, faz pesquisas na internet, faz contas, abre arquivos e programas, entre outras funções avançadas. E a cor roxa é ideal para ilustrar magia.
Preto
Sofisticação Formalidade Morte Medo Anonimato
Raiva Poder Elegância Modernidade
Presenter
Presentation Notes
Além destes significados nas cores puras, também atribuiu-se valores ao preto, branco e cinza. O preto representa sofisticação, formalidade, morte, medo, anonimato, raiva, poder, elegância e modernidade. Pode simbolizar o vazio e mistério também, de forma negativa.
Branco
Clareza Limpeza Esperança Imensidão Inocência Reverência
Paz Simplicidade Rendição União Neutralidade
Presenter
Presentation Notes
Os valores da cor branca são clareza, limpeza, esperança, imensidão, inocência, reverência, paz, simplicidade, rendição, união e neutralidade. O uso desta cor ajuda a ter clareza mental, ter coragem para vencer obstáculos e a recomeçar quantas vezes for necessário.
Cinza
Elegância Humildade Respeito Reverência Sutileza
Neutralidade Calma Inteligência Sabedoria Conhecimento
Presenter
Presentation Notes
Já o uso do cinza reflete os símbolos de elegância, humildade, respeito, reverência, sutileza, neutralidade, calma, inteligência, sabedoria e conhecimento. O cinza também é percebido como digno, conservativo e austero, emprestando valores do preto e do branco conforme o grau de intensidade dessas cores.
www.laconfection.fr
Presenter
Presentation Notes
Esses dois sites são predominantemente preto e branco. O primeiro é o site de uma agência de comunicação francesa e possui um estilo gráfico bem elegante, sofisticado, minimalista, simples e formal.
goldfrapp.com
Presenter
Presentation Notes
E o segundo é o site de uma banda londrina que, assim como o site da agência, possui praticamente a mesma seleção de valores, mais os de sutileza, inocência e união, referentes às composições musicais do duo musical.
globo.com
Presenter
Presentation Notes
E temos este site que é bem legal. O globo.com usa as cores pra dividir os assuntos entre diferentes temas: notícias gerais, esportes, entretenimento, etc. Ele ensina essa divisão logo na primeira tela do site.
globo.com
Presenter
Presentation Notes
E mesmo no meio da página, e em outras páginas do portal, o padrão de cores se mantem constante. Assim o visitante sabe perfeitamente sobre o que está lendo.
Breaking Bad
Presenter
Presentation Notes
Ah, voltamos ao Breaking Bad. Além de ser uma das séries mais assistidas dos últimos anos, ela possui uma característica bem interessante: o criador dela, Vince Gilligan, resolveu exibir as intenções e atitudes dos personagens através da cor da roupa que eles usam.
Presenter
Presentation Notes
Roupas da cor vermelha denotam raiva; laranja indicam cenas de perigo; amarela revelam atenção e cuidado; verde simbolizam sucesso ou obtenção de poder; azul está ligado à pureza; violeta pra hesitação e desilução; branco para verdade e bondade; preto para maldade, morte e frustração. Não é um recurso criado por Gilligan mas ele ficou bem evidente devido ao grande número de episódios que a série Breaking Bad possui. Objetos de cena também são usados com o mesmo intuito.
Presenter
Presentation Notes
Aqui temos um estudo de quase todas as cores do figurino usadas pelos protagonistas da série e sua relação com eventos-chave da história. Veja com detalhes neste link: http://tdylf.com/2013/08/11/infographic-colorizing-walter-whites-decay/ Pois bem, preciso deixar claro que todos os significados apresentados aqui são subjetivos e dependem da experiência pessoal também. Mas eles são de conhecimento público e são muito utilizados dentro das agências com o intuito de gerar emoções e reações nas pessoas. Vocês também devem ter percebido que os projetos apresentados aqui não possuem apenas uma cor. As cores possuem muito mais eficiência se combinadas e misturadas a outras. E existem alguns macetes pra criar uma paleta de cores interessante. O importante é manter sempre o contraste e a harmonia entre as cores.
Contraste e Harmonia
Culturas distintas podem ter diferentes significados para determinadas cores.
Culturas distintas podem ter diferentes significados para determinadas cores.
Presenter
Presentation Notes
O contraste é muito importante pois grande parte dos projetos para internet envolve o uso de textos e quanto mais fácil for a leitura dele, melhor.
Contraste e Harmonia
Culturas distintas podem ter diferentes significados para determinadas cores.
Culturas distintas podem ter diferentes significados para determinadas cores.
Presenter
Presentation Notes
Deste jeito, a leitura do texto ficou melhor e a figura está mais agradável ao olhar.
Cores subtrativas Cores aditivas
Presenter
Presentation Notes
Vamos ver como podemos combinar cores usando um disco cromático. Vale citar que as cores podem variar em saturação e brilho, conforme a adição das cores preta e branca a elas. Aqui está uma representação da gama de cores que se pode conseguir nas cores aditivas e subjetivas. Elas são praticamente idênticas, se observarmos a borda dos discos. Vale citar também que as cores podem variar em saturação e brilho, conforme a adição das cores preta e branca a elas.
Círculo cromático
Presenter
Presentation Notes
Para mostrar como combinar cores, vamos usar este disco (círculo) cromático para facilitar a escolha das cores. Ele é uma simplificação dos discos que vimos no slide anterior.
Monocromático Complementares Análogas Tríades
Complementos divididos
Complementos mútuos
Complementos adjacentes
Complementos duplos
Presenter
Presentation Notes
• Monocromático: a escolha de uma única cor do disco cromático. • Complementares: duas cores opostas e igualmente equidistantes do centro do disco cromático. É preciso tomar cuidado que o uso deste padrão: algumas cores podem não possuir harmonia, incomodando e cansado os olhos. • Análogas: três cores adjacentes umas às outras, proporcionam uma combinação harmoniosa e natural. • Tríades: três cores equidistantes no disco de cores. Também possuem alto contraste e geram tensão visual. As cores primárias e secundárias são tríades. • Complementos divididos: três cores, sendo que duas devem ser adjacentes à cor complementar da principal. • Complementos mútuos: quatro cores, sendo três tríades e duas complementares. • Complementos adjacentes: duas cores, sendo uma adjacente à complementar da outra. • Complementos duplos: quatro cores, sendo duas complementares das outras.
kuler.adobe.com
Presenter
Presentation Notes
Existem inúmeros sites na internet que podem ajudar a criar paleta de cores interessantes, como o Adobe Kuler, o Colors e o Colourlover. Vale a pena testar e criar uma coisa original.
Pratique, combine e teste.
Presenter
Presentation Notes
Cores quentes, frias, subtrativas, aditivas, complementares, análogas, harmônicas, contrastantes. Cheias de significados, sutis ou escancarados. Para usar bem as cores, é preciso prática. E essas dicas são um bom começo pra entender melhor, de forma consciente, uma coisa que nosso cérebro conhece e percebe, de forma inconsciente, há gerações.
Presenter
Presentation Notes
Agradecimento
Créditos das fotos • Red Telephone Box - http://www.flickr.com/photos/freefoto/533626295/ • Purple - http://www.flickr.com/photos/judy-van-der-velden/7893455160/ • Orange - http://www.flickr.com/photos/jpellgen/2929334257/ • M&Ms Sorted by Color - http://www.flickr.com/photos/mr_t_in_dc/4800819674/ • London Black & White September 30 2013 137 National Gallery -
http://www.flickr.com/photos/zongo/10026405574/ • Imperial Art Appreciation: Yellow - http://www.flickr.com/photos/jdhancock/3790892751/ • IMG_7258 - http://www.flickr.com/photos/thefastone/2387805810/ • Green Study 2 - http://www.flickr.com/photos/wrote/1452629667/ • Covered by Fun at The Color Run - http://www.flickr.com/photos/jorgeq82/7871590502/ • Blue Baskets - http://www.flickr.com/photos/oatsy40/8130460225/ • apple harvest - http://www.flickr.com/photos/9966270@N02/6281731365/ • Alone - http://www.flickr.com/photos/elliotmoore/354450803/ • 16 colors Umbrella | 十六色傘 - http://www.flickr.com/photos/2493/2495492508/
Presenter
Presentation Notes
Crédito das fotos