CRIAÇÃO E PRODUÇÃO PUBLICITÁRIA DIGITAL AULA 2

Prévia do material em texto

CRIAÇÃO E PRODUÇÃO 
PUBLICITÁRIA DIGITAL 
AULA 2 
 
 
 
 
 
 
 
 
 
 
 
 
 
Prof. Mauro Bruno Pinto 
 
 
2 
 
CONVERSA INICIAL 
Nesta aula abordaremos a inclusão de recursos visuais de cor e texturas 
em páginas web e em outros meios digitais. 
Inicialmente é preciso saber o que se quer comunicar com as cores e que 
reações estas causam ao usuário, assunto para a psicodinâmica das cores. Feito 
esse estudo é preciso entender como compor as cores no meio digital e como 
reproduzi-las. A gama de cores no monitor é expressada em milhões de 
variações, muitas as vezes acima da nossa capacidade de discernimento – o 
que não indica que tudo é possível. Assim como nos meios impressos, reproduzir 
não se trata da capacidade de fazer uso, mas sim de compor corretamente por 
meio de esquemas de cores 
Neste recente cenário da riqueza de detalhes dos novos monitores e da 
busca de experiência por parte do usuário, a cor não basta para comunicar ou 
manter o ambiente atrativo para quem navega: é preciso imersão – o que é 
possível por meio das texturas. Alinhar as técnicas de controle da mensagem, 
imersão e capacidade de reprodução é mais um passo para o aprendizado sobre 
a criação virtual. 
 
CONTEXTUALIZANDO 
O advento da internet 2.0 ampliou muito um universo que já era vasto. Na 
onda das bandas largas de conexão vieram imagens com resolução de milhões 
de cores, bancos de imagens, assim como o compartilhamento de vídeos. 
Junto a esse salto informacional somou-se o avanço na tecnologia de 
reprodução com telas de plasma, LCD e LED e as definições de imagem de 
altíssima qualidade. A internet permite o uso de mais 16 milhões de cores, 
imagens de altíssima definição e telas de pequenas e grandes proporções. 
Aplicativos de sistema de gerenciamento de conteúdo para web, como 
Wordpress e Joomla, permitem alterações em poucos cliques. Contudo, a 
ferramenta é apenas a facilitadora do processo. A mesma aparência do site pode 
ser utilizada para vários clientes diferentes, de inúmeros mercados e nichos, o 
que pode não ser eficiente. 
A cor e a textura dão suporte ao conteúdo. Integram a mensagem em sua 
associação material e psicológica com o tema, mercado e público. Toda variação 
 
 
3 
da escala cromática não garantirão a combinação harmônica de cores, 
tampouco o contraste. É preciso harmonizar cores e usá-las como suporte de 
comunicação para o conteúdo do site. 
 
Saiba mais 
Leia Psicodinâmica das cores em comunicação, de Modesto Farina. 
 
TEMA 1 – PSICOLOGIA DA COR 
A cor é parte integrante na relação do indivíduo com o ambiente ao seu 
redor: ela gera percepções de forma, tempo, espaço, temperatura e 
comportamento. Quando é necessário comunicar, fazemos o uso de palavras, 
formas e cores. 
A cor tem grande grau de valia na comunicação visual. A relação entre o 
visual e o conteúdo da comunicação passam pela cor, e seu uso dentro do 
contexto. O meio ambiente, a faixa etária, as condições sociais e culturais 
influenciam na aplicação da cor. Usar a cor considerando os conceitos de 
harmonia e contraste ajuda o produto a atingir seus objetivos. A cor impõe aos 
indivíduos uma reação peculiar. 
Modesto Farina cita os estudos de Rorschach e Schachtel, relativizando 
cor e forma, em que há indicação de alteração de humores à percepção da cor, 
mas demonstram uma atitude passiva. Já a percepção da forma indica ações 
ativas e a busca de organização do que é estudado. Essas observações 
permitem aliar os estudos da aula 1 sobre percepção da forma ao assunto 
corrente, ou seja, a percepção da cor. 
Imagem 1: Manchas de Rorschach 
 
 
 
 
4 
A aplicação da cor no ambiente digital pode então mudar a percepção 
sobre determinada forma? Em que contexto isso seria possível? Como gerar 
estímulos sensoriais e informativos tendo apenas o campo visual e peças 
bidimensionais (com largura e altura)? 
A aplicação de técnicas sinestésicas intimamente relativizadas com a 
psicodinâmica da cor serão as linhas condutivas das técnicas aplicadas para o 
planejamento visual das peças eletrônicas. 
 
Sinestesia e a psicodinâmica das cores em publicidade 
Sinestesia é o estudo do comportamento dos indivíduos relacionados ao 
uso da cor. 
[...] desde a antiguidade o homem tem dado um significado psicológico as cores e, 
a rigor, não tem havido diferença interpretativa no decorrer dos tempos. [...] As cores 
fazem parte da vida do homem porque são vibrações do cosmo que penetram em 
seu cérebro para continuar vibrando e impressionando sua psique [...]. (Farina, 
1972) 
 
A cor está conectada à história humana pela fisiologia, sociologia e 
psicologia. Estímulos visuais compõem a percepção de cores que impressionam 
a retina e são interpretadas em nosso cérebro. Elas também representam um 
código próprio para povos e são atreladas a experiências que registramos em 
nosso tempo de vida. 
A sinestesia da cor pode ser feita por duas formas de associação: 
 Associação material – todo objeto é identificado por características 
específicas, e a cor é uma delas. Esse recurso é muito utilizado em 
Publicidade e Design como Semântica do Produto1. 
 Associação afetiva – experiências vivenciadas e/ou percebidas a que a 
cor nos remete. 
 
 
 
1 A definição da Semântica do produto pode ser realizada identificando aquilo que se deseja comunicar 
com o produto, lembrando que as características estéticas dos produtos sempre comunicam algo. 
(CARPES JR., 2014) 
 
 
5 
Sensações Acromáticas 
Branco 
 Associação material – batismo, casamento, cisne, lírio, primeira 
comunhão, a neve, nuvens em tempo claro, areia clara. 
 Associação afetiva – ordem, simplicidade, limpeza, bem, pensamento, 
juventude, otimismo, piedade, paz, pureza, inocência, dignidade, 
afirmação, modéstia, deleite, despertar. 
Imagem 2: Utilização do branco 
 
 
Preto 
 Associação material – sujeira, sombra, enterro, noite, carvão, fumaça, 
condolência, morto. 
 Associação afetiva – mal, miséria, pessimismo, sordidez, tristeza, temor, 
negação, opressão etc. 
Imagem 3: Utilização do preto 
 
 
 
6 
 
No entanto, o preto, quando combinado a cores quentes, torna a 
composição alegre. Observe a Imagem 4: 
Imagem 4: Utilização do preto com cores quentes 
 
 
Cinza 
 Associação material – pó, chuva, ratos, neblina, máquinas, mar sob 
tempestade. 
 Associação afetiva – tédio, tristeza, decadência, velhice, desânimo, 
seriedade, sabedoria, passado, finura, pena. 
Imagem 5: Utilização do cinza 
 
 
Sensações Cromáticas 
Vermelho 
 Associação material – sangue, vinho, maçã, calor. 
 Associação afetiva – metabolismo, paixão, inquietação, perigo. 
Imagem 6: Utilização do vermelho 
 
 
7 
 
 
Laranja 
 Associação material – outono, laranja, fogo, pôr do sol, luz, chama. 
 Associação afetiva – força, luminosidade, energia, tentação. 
Imagem 7: Utilização do laranja 
 
 
Verde 
 Associação material – umidade, frescor, primavera, folhagem, mar, verão, 
planície. 
 Associação afetiva – bem-estar, paz, saúde, abundância, segurança, 
natureza, esperança, serenidade, suavidade, crença. 
Imagem 8: Utilização do verde 
 
 
Azul 
 Associação material: montanhas longínquas, frio, mar, céu, gelo. 
 
 
8 
 Associação afetiva: espaço, viagem, verdade, intelectualidade, paz, 
serenidade, infinito, meditação. 
Imagem 9: Utilização do azul 
 
 
Roxo 
 Associação material: pedras preciosas, frutas exóticas, flores, veneno, pôr 
do sol. 
 Associação afetiva: extravagância, riqueza, respeito ou resguardo 
(religião católica). 
Imagem 10: Utilização do roxo 
 
 
TEMA 2: CANAIS DE COR 
A cor e o olho humano 
As cores são visíveis porque na retina possuímos cones sensíveis às 
cores primárias. Cada cor tem uma frequência de onda própria, o que as torna 
distintas. Há células cônicas mais sensíveis à cor vermelha, outrasà verde e 
outras ao azul violeta. Por esta razão, a construção de imagens por emissão de 
luz em nossas telas utiliza os canais RGB (red – vermelho; green – verde e blue 
– azul). 
A diferença de “claro e escuro”, ou seja, de luminosidade, é percebida 
pelos bastonetes. A natureza da luz é branca, assim, as cores são resultado da 
refração da cor e da sua consequente divisão em frequências menores. 
 
 
 
9 
Cores quentes 
As cores quentes possuem alta frequência, portanto impressionam mais 
rapidamente a retina. Vão do vermelho ao amarelo e incluem ainda as cores 
laranja, rosa, marrom e vinho. Por sua associação com o sol e o fogo, as cores 
quentes representam tanto calor quanto movimento. 
Quando contrastadas com uma cor fria, a tendência é que se 
sobressaiam, dominem e produzam ênfase visual. 
 
Imagem 11: Cores quentes 
 
 
Cores frias 
As cores frias possuem frequência mais baixa e porcentagem de 
predominância menor na gama de cores, como é caso das cores azul e verde. 
Elas têm a propriedade de acalmar pessoas e reduzir a tensão, e são ideais para 
a produção de fundos e elementos de maior dimensão por não interferirem no 
conteúdo e proporcionar uma profundidade de campo. Variam do verde ao azul, 
e podem incluir alguns tons de roxo. O roxo é intermediário entre o vermelho e o 
azul; portanto, o violeta mais suave aproxima-se do azul, enquanto o violeta mais 
avermelhado cria uma atmosfera quente. 
 
Imagem 12: Cores quentes 
 
 
Valor da Cor: termos usados e seu significado 
 Matiz: fusão da luz com cores; 
 Tom: é a variação quantitativa da cor; 
 Saturação: é a força máxima da cor em tom e pureza sem adição de preto 
ou branco; 
 
 
10 
 Luminosidade: capacidade de refletir a luz branca sobre ela inserida; 
 Modulação: variação na mesma cor; 
 Escala: modulação em intervalos regulares e contínuos. 
 
Podem ser monocromáticas e policromáticas. 
 
Cores aditivas 
São cores luz. A emissão das três frequências juntas dão a cor da luz, isto 
é, o branco. São elas o azul violeta, o vermelho e o verde (RGB). 
 
Cores subtrativas 
São cores pigmento, que reproduzem graficamente as cores. 
Teoricamente a sua soma dá o preto. São elas o ciano, o magenta e o amarelo 
(CMY, sigla dos nomes das cores em inglês: cyan, magenta e yellow). 
Imagem 13: Cores aditivas e subtrativas 
 
 
 
 
 
Classificação de Cores 
 Cores primárias: o vermelho, o amarelo e o azul. Essas nuances formam 
um triângulo equilateral. 
 Cores secundárias: ao misturarmos duas cores primárias próximas, 
criaremos cores secundárias. 
 
 
11 
 Cores terciárias: são formadas pela mistura de uma cor primária com 
uma cor secundária. 
 
Tabela 1: Síntese das luzes primárias 
Primária + Primária Secundária Cores Primárias + Complementares 
vermelho verde amarelo vermelho ciano branco 
verde azul violeta ciano verde magenta branco 
azul violeta vermelho magenta azul violeta verde branco 
luz vermelha + luz verde + luz azul violeta = luz branca (acromática) 
 
TEMA 3: COMPOSIÇÃO DE CORES 
Esquemas de cores são fórmulas básicas para a criação harmoniosa e 
eficaz da combinação de cores. Há seis esquemas clássicos de esquemas de 
cores: 
 Monocromático; 
 Análogo; 
 Complementar; 
 Semicomplementar; 
 Triádico; 
 Tetrádico. 
 
Monocromáticos 
O esquema de cor monocromático consiste no uso de uma única cor e de 
suas variações de matizes ou tonalidades. 
Imagem 14: Esquema de cor monocromático 
 
 
Análogo 
Consiste no uso de cores adjacentes, ou ainda vizinhas na escala de 
cores. 
Para que o uso de cores análogas seja agradável e equilibrado é 
necessário muito controle sobre a variação dessas cores. 
 
 
12 
Imagem 15: Esquema de cor análogo 
 
 
Complementar 
O esquema complementar consiste na aplicação cores localizadas em 
áreas opostas do círculo cromático. 
Imagem 16: Esquema de cores complementares 
 
 
Semicomplementar 
A aplicação desse esquema é semelhante ao complementar: utiliza-se 
uma cor básica combinada a duas cores adjacentes à cor complementar da 
primeira. 
Imagem 17: Esquema de cores semicomplementares 
 
 
Triádico 
Ao avançar um grau ou mais em cada lado no esquema 
semicomplementar obteremos um esquema triádico. Neste tipo de esquema há 
equidistância entre as cores do círculo cromático. 
Imagem 18: Esquema triádico 
 
 
13 
 
 
Tetrádico 
No esquema de cores tetrádicas quaisquer esquemas de cores 
complementares estão combinados a outro também de complementares. 
Imagem 18: Esquema tetrádico 
 
 
Notação Hexadecimal 
Composição de cores utilizando cores RGB, baseado num sistema de 
contagem hexadecimal, em que a composição de cores na tabela é baseada em 
múltiplos de 16, e não de dez, como nas tabelas CMYK. 
Os dígitos adicionais são compostos por letras que tem equivalência 
numérica: A=10; B=11; C=12, D=13, E=14, F=15. 
 
Por que utilizar a tabela hexadecimal? 
A escala de cores aditiva RGB possui 256 níveis diferentes de pontos 
luminosos, que variam de 0 a 255 na escala tonal para cada canal de cor. Isso 
resulta em 16.777.216 cores diferentes. Isso torna a síntese aditiva mais fácil de 
ser mensurada. 
Por exemplo: a cor branca 255 R, 255 G, 255 B, corresponde a FFFFFF 
na escala hexadecimal. 
Tabela 1: Notação hexadecimal 
 
 
14 
 
Fonte: BEAIRD, 2008. 
 
Saiba mais 
Para entender e visualizar o recurso de esquemas de cores para composição 
na web, algumas empresas disponibilizam recursos on-line. Com essas 
ferramentas é possível determinar as cores específicas de RGB e ter acesso 
à sua notação hexadecimal. Visite os sites a seguir e conheça mais: 
 <http://colorschemedesigner.com/csd-3.5/>; 
 <https://color.adobe.com/pt/>. 
 
Outra ferramenta interessante é o verificador de contrastes. A escolha correta 
de cores para a composição não significa que haverá legibilidade de conteúdo, 
mas apenas uma composição harmônica de cores. É preciso distinguir a 
informação textual dos demais estímulos visuais. Para isso, basta colocar os 
valores de RGB utilizados na página e o medidor indicará o grau de contraste. 
<http://www.snook.ca/technical/colour_contrast/colour.html>. (BEAIRD, 2008). 
 
 
 
15 
TEMA 04 – FUNÇÕES DA TEXTURA 
Define-se textura como sendo qualquer elemento capaz de imprimir à 
superfície do design ou do objeto uma aparência ou aspecto distinto. Lupton 
afirma que é como o grão tátil das superfícies e substâncias, e que define o 
objeto observado e a natureza das coisas tanto pelas sensações físicas, como 
conceituais. 
Em web design a textura é visual e apresentada ao usuário como 
superfícies de fundos, botões, menus ou de objetos representados por ilustração 
ou fotografia. E como apresentar experiências físicas ao usuário se dispomos 
apenas de efeitos ópticos? 
 
E por que utilizar texturas? 
Porque a sua aplicação traz mais qualidade à superfície, realça o produto 
e chama atenção do observador. 
 
Finalidades de uso de texturas 
 Estabelecer atmosfera: definem o espaço de trabalho e do que trata o 
assunto; remetem ao tema de forma visual. 
 Reforçar um ponto de vista: pregnância por repetição. 
 Remeter a outras experiências sensoriais: tato, olfato, sensação térmica. 
 Situar no tempo e no espaço. 
 
Construção da ideia de textura apenas com estímulo visual 
Construímos as ideias de sensações utilizando pregnância de forma 
(escala, ritmo, equilíbrio, profundidade) e sensações cromáticas. 
Texturas são criadas a partir de elementos básicos de construção de 
imagem: pontos, linhas e planos. 
 
Ponto 
Assim como o pixel, o ponto é um elemento fundamental de imagens 
digitais, e elemento essencial para o design. A partir do ponto podemos criar 
qualquer elemento gráfico. 
 
 
 
 
16 
Linhas 
É definida pela junção de dois ou mais pontos. É o elemento mais comum 
para o design gráfico. 
As linhas podem ser usadas de forma maisbásica: delimitação de área e 
indicatividade, e também podem transmitir movimento e agitação por frequência 
e repetição, inclinação, variação tonal e espessura. 
Linhas diagonais criam a sensação de movimento e inquietação, 
enquanto linhas horizontais trazem estabilidade para a composição. 
A variação da espessura das linhas traz aspecto mais dinâmico a textura. 
Por sua vez, a variação tonal pode ser usada para transmitir 
esvanecimento ou profundidade à textura. 
 
Formas 
 Geométricas: são mais básicas. Em design, as formas que derivam de 
formas básicas também são consideradas como geométricas. 
 Orgânicas ou livres: formas mais arredondadas, com uso de curvaturas 
não geométricas; são mais abstratas que as geométricas. 
 
Ritmo e repetição 
A percepção de textura do exemplo (Imagem 19) está no ritmo que nosso 
cérebro identifica para leitura da imagem. O reconhecimento de padrões de 
formas, espaçamentos e composição de cor como um todo permite que 
atentemos a outras informações transmitidas como ideia de profundidade de 
campo. 
Imagem 19: exemplo de padrão de forma, com ritmo e repetição 
 
 
 
17 
A Imagem 19 traz pontos e linhas que, conectadas, geram elementos 
geométricos num padrão de repetição ritmado pela variação tonal de pontos e 
linhas. 
 
Escala 
O recurso de escala é utilizado para quebrar a monotonia da página. A 
diferença de tamanho de elementos relativamente próximos gera uma tensão no 
observador e nos deixa atentos à variação de estímulos. 
Um recurso interessante é o recorte de imagens diferenciadas, 
apresentando planos detalhes (que são planos que mostram detalhe de parte 
significativa de um objeto) de um produto para valorizar seus pontos fortes. 
Imagem 20: Utilização de escala 
 
 
TEMA 05 – APLICAÇÃO DE COR E TEXTURA 
Farina, ao citar Gérard, apresenta a síntese dos temas abordados nessa 
aula: “memória é a modificação do comportamento pela experiência”. 
A cor carrega em sua essência aspectos físicos que determinam nossa 
percepção primária e instintiva quanto ao seu uso, e impõe aos indivíduos uma 
reação peculiar. 
 O amarelo expande e invade o espaço que o circula; 
 O magenta é o equilíbrio, sem criar movimento; 
 O ciano dá profundidade e ideia de distância. 
 
 
 
18 
As cores quentes nos indicam alerta e nos aguçam rapidamente. Devido 
à sua alta frequência, caminham mais rápido e sensibilizam primeiro nossa 
retina. Porém, são nossas experiências que relativizam a interpretação. O laranja 
do ferro incandescente e da fruta nos dão o comando da hora certa de apanhá-
los. Isso só é possível graças aos nossos conhecimentos prévios. 
A compreensão dos aspectos físicos da cor e sua interpretação podem 
ser largamente utilizados para comunicação visual. 
 
A atmosfera e o sensorial na publicidade 
A sinestesia da cor comentada anteriormente nessa aula é um recurso 
importante para uso da textura como recurso sensorial. A web ainda é 
bidimensional, e faz uso apenas de recursos audiovisuais. E como transmitir 
calor, frescor e sabor sem explorar os outros sentidos humanos? 
A resposta está na memória sensorial que guardamos de tais 
experiências. 
A publicidade de alimentos utiliza os recursos sensoriais da textura muito 
bem. Observe a Imagem 21: o café parece fresco e feito com produtos naturais. 
Tudo remete aos conhecimentos e experiências prévias: a fumaça, a espuma 
espessa, o sol nascendo e o cafezal verdejante. 
Imagem 21: Publicidade de alimentos 
 
 
TROCANDO IDEIAS 
Acesse o site de sua empresa, de seu cliente ou de seu fornecedor. O 
impacto estético inicial é agradável? Por quanto tempo você consegue 
permanecer na página sem migar para outro site? Ler o menu foi difícil? 
Observe o contraste, a escolha do fundo e a comunicação visual (não 
textual). 
 
 
19 
 
NA PRÁTICA 
Agora que todas as informações sobre cores são visíveis e conhecidas, 
selecione 6 (seis) sites como modelo para realizar a decupagem de informações 
sobre a aula. Depois de selecionar os modelos, realize a identificação de cores 
expressas em cada um deles, justificando o uso da textura. 
Para as cores utilize uma ferramenta de paleta on-line para identificar as 
cores básicas da composição e as identifique descrevendo suas composições 
em canais RGB e sua representação hexadecimal. 
 
FINALIZANDO 
Vimos na aula que a cor possui aspectos físicos que orientam e interferem 
na percepção da imagem, e impõe relações instintivas e psicológicas ao 
observador, abordando relações semânticas com produtos e serviços, e 
semióticas quanto aos significados. 
Abordamos a questão dos canais de cores RGB utilizados para o padrão 
web e sua diferença do modelo impresso e a importância de notação 
hexadecimal para as páginas. 
Foram relacionadas a importância da composição com cores, seu uso 
otimizado e a exploração do uso de textura para sustentar e maximizar a 
eficiência da mensagem – recursos muito bem aplicados na linguagem 
publicitária. 
 
REFERÊNCIAS 
BEAIRD, J. Princípios do web design maravilhoso. Rio de Janeiro: Alta Books, 
2008. 
CARPES JR., W. P. Introdução ao projeto de produtos. Porto Alegre: 
Bookman, 2014. 
COLLARO, A. C. Projeto gráfico: teoria e prática da diagramação. São Paulo: 
Summus, 2000. 
CSS & webdesign workshop. Wellstyled.com. Disponível em: 
<http://wellstyled.com/>. Acesso em: 7 abr. 2011. 
 
 
20 
FARINA, M. Psicodinâmica das cores em comunicação. São Paulo: Senac, 
2003. 
LUPTON, E.; PHILLIPS, J. C. Novos fundamentos do design. São Paulo: 
Cosac Naify, 2008. 
SNOOK, J. Tips, tricks & bookmarks on web development. Disponível em: 
<http://www.snook.ca/technical/colour_contrast/colour.html>. Acesso em: 28 
abr. 2011.